Recepto šablonas su HTML5 ir CSS3

Svetainės ar žiniatinklio programos, kuriose tvarkoma viskas, kas susiję su maisto receptais, turi būti ne tik patrauklaus, bet ir naudingo, draugiško dizaino, leidžiančio vartotojams vykdyti minėtuose receptuose nurodytas instrukcijas.
Jei mūsų esmė yra būtent tokia, tada mes turime įgyvendinti gerą kiekvieno mūsų svetainėje ar žiniatinklio programoje paskelbto recepto dizainą ir, nors mes galvojame, kad mums reikia valandų valandų dizaino, tiesa yra ta, kad kai kurių stilių CSS ir gerai suplanuota struktūra galime pasiekti tai, ko mums reikia.
HTML kodas
Mūsų HTML Tai bus gana paprasta, į savo antraštę įtrauksime stilių.css failą ir suskirstysime jį į serijas, kuriose mes sutvarkysime informaciją sąrašuose, be to, kad identifikuosime informacijos bloką su straipsnio žyma:

 
Raudonas aksomas
Desertas

1
45 min
Sunkumas
560

Raudonas aksominis pyragas-angliškai: raudonas aksominis pyragas-yra pyragas su tamsiai raudona, ryškiai raudona arba raudonai ruda spalva.

Sudedamosios dalys: pienas, miltai, kiaušiniai, vanilė, dažai, cukrus, sviestas.

Čia mes papildomai pridedame savo recepto vaizdą, kurį kiekvienas iš jūsų pakeis pagal savo poreikius, pažiūrėkime, ką atliks mūsų .css failas.
CSS kodas
Turėdami jame apibrėžtą struktūrą .html, turime tik sukurti savo stilių. Tam naudosime kai kurias savybes, žinomas kaip paraštė, paminkštinimas ir pozicijas. Be to, mes naudosime tokias savybes kaip nuolydžiai ar dėžutės dydžio nustatymas, Pažiūrėkime:

 * {-webkit-box-sizing: border-box; -moz-box-dydžių: border-box; dėžutės dydis: border-box; } html {aukštis: 100%; } body {background-color: # 57abf2; fono vaizdas: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); fono vaizdas: linijinis gradientas (-45deg, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', sans-serif; šrifto dydis: 1rem; } img {max-width: 100%; aukštis: automatinis; vertikaliai išlygiuoti: apačioje; } .recipe-card {background: #fff; paraštė: 4em auto; plotis: 90%; maksimalus plotis: 496 taškų; border-top-left-spindulys: 5px; border-top-right-spindulys: 5px; riba-apatinis kairysis spindulys: 5 taškų; riba-apačia-dešinysis spindulys: 5 taškų; } 

Be to, mes naudosime mūsų dokumento vaikų savybes ir piktogramas, kurias naudosime savo recepte, naudosime .svg, kad jas išgautume ir įdėtume į HTML:

 .recipe-card .icon {display: inline; ekranas: inline-block; fono vaizdas: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); fono kartojimas: nekartoti; } .recipe-card .icon-kalorijas, .recipe-card .icon-kalorijas \: reguliariai {background-position: 0 0; plotis: 16 pikselių; aukštis: 19 pikselių; } .recipe-card .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; plotis: 20 taškų; aukštis: 20 taškų; } .recipe-card .icon-level, .recipe-card .icon-level \: regular {background-position: 0 -39px; plotis: 16 pikselių; aukštis: 19 pikselių; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; plotis: 21 pikselio; aukštis: 26 pikselių; } .recipe-card .icon-users, .recipe-card .icon-users \: regular {background-position: 0 -84px; plotis: 18 pikselių; aukštis: 18 pikselių; }

Kai tai bus padaryta, pažiūrėkime galutinį rezultatą, kaip atrodys mūsų receptas.

DIDELIS

Kaip matome, mes kreipiamės tik į HTML5 Y CSS3 Norėdami sukurti mūsų receptą, dabar lieka tik tiems, kurie nori naudoti šį pavyzdį, atsisiųskite jį ir atlikite reikiamus spalvų, šrifto ir norimų pateikti receptų pakeitimus.
receptas.zip 91.82K 415 atsisiuntimaiAr jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką