Satura rādītājs
Vietnēm vai tīmekļa lietojumprogrammām, kurās tiek apstrādāts viss, kas saistīts ar ēdienu receptēm, jābūt ne tikai pievilcīgam, bet arī noderīgam, draudzīgam un ļauj lietotājiem izpildīt norādījumus, kas norādīti minētajās receptēs.Ja mūsu kodols ir tieši tāds, tad mums ir jāievieš labs dizains katrai mūsu vietnē vai tīmekļa lietojumprogrammā ievietotajai receptei, un, lai gan, iespējams, domājam, ka mums ir vajadzīgas stundas un stundas, patiesība ir tāda, ka dažos stilos CSS un labi plānota struktūra mēs varam sasniegt to, kas mums nepieciešams.
HTML kods
Mūsu HTML Tas būs pavisam vienkārši, mēs iekļausim mūsu style.css failu mūsu galvenē un strukturēsim to divos sērijās, kur mēs sakārtosim informāciju sarakstos, papildus informācijas bloka identificēšanai ar raksta tagu:
sarkana samta
Deserts
- 1
- 45 min
- Grūtības
- 560
Sarkana samta kūka-angļu valodā: Red samta kūka-ir kūka ar tumši sarkanu, spilgti sarkanu vai sarkanbrūnu krāsu.
Sastāvdaļas: piens, milti, olas, vaniļa, krāsviela, cukurs, sviests.
Šeit mēs papildus pievienojam mūsu receptes attēlu, kuru katrs no jums modificēs atbilstoši savām vajadzībām, redzēsim, ko nesīs mūsu .css fails.CSS kods
Nosakot tajā mūsu struktūru .html, mums tikai jāizveido savi stili. Šim nolūkam mēs izmantosim dažus rekvizītus, kas pazīstami kā mala, polsterējums un pozīcijas. Papildus tam mēs izmantosim tādas īpašības kā gradienti vai kastes izmēri, paskatīsimies:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; kastes izmērs: border-box; } html {augstums: 100%; } pamatteksts {fona krāsa: # 57abf2; fona attēls: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); fona attēls: lineārs gradients (-45deg, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', sans-serif; fonta izmērs: 1rem; } img {max-width: 100%; augstums: auto; vertikāli izlīdzināt: apakšā; } .recipe-card {background: #fff; mala: 4em auto; platums: 90%; maksimālais platums: 496 pikseļi; robežas augšējais kreisais rādiuss: 5 pikseļi; robežas augšējais labais rādiuss: 5 pikseļi; robežas apakšējais kreisais rādiuss: 5 pikseļi; robežas apakšējais labais rādiuss: 5 pikseļi; } Papildus tam mēs izmantosim mūsu dokumenta bērnu rekvizītus un ikonām, kuras mēs izmantosim savā receptē, mēs izmantosim .svg, lai tos izvilktu un ievietotu mūsu HTML:
.recepšu kartīte .icon {display: inline; displejs: inline-block; fona attēls: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); fona atkārtošana: neatkārtot; } .recipe-card .icon-kalorijas, .recipe-card .icon-kalorijas \: parasts {background-position: 0 0; platums: 16 pikseļi; augstums: 19 pikseļi; } .recipe-card .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; platums: 20 pikseļi; augstums: 20 pikseļi; } .recipe-card .icon-level, .recipe-card .icon-level \: regular {background-position: 0 -39px; platums: 16 pikseļi; augstums: 19 pikseļi; } .recipe-card .icon-play, .recipe-card .icon-play \: regular {background-position: 0 -58px; platums: 21 pikseļi; augstums: 26 pikseļi; } .recipe-card .icon-users, .recipe-card .icon-users \: regular {background-position: 0 -84px; platums: 18 pikseļi; augstums: 18 pikseļi; }Kad tas ir izdarīts, redzēsim gala rezultātu, kāda izskatīsies mūsu recepte.
PALIELINĀT
recepte.zip 91.82K 415 lejupielādesVai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu 
