Indholdsfortegnelse
De websteder eller webapplikationer, der håndterer alt relateret til madopskrifter, skal have et design, der ikke kun er attraktivt, men også nyttigt, venligt, og som giver brugerne mulighed for at udføre instruktionerne i opskrifterne.Hvis vores kerne er præcis dette, skal vi implementere gode designs til hver af de opskrifter, der er lagt ud på vores websted eller webapplikation, og selvom vi måske tænker, at vi har brug for timer og timer i design, er sandheden, at med nogle stilarter af CSS og en velplanlagt struktur kan vi opnå det, vi har brug for.
HTML -kode
Vores HTML Det vil være ganske enkelt, vi vil inkludere vores styles.css -fil i vores header, og vi vil strukturere den i en række divs, hvor vi vil organisere oplysningerne i lister, udover at identificere informationsblokken med et artikeltag:
rødt fløjl
Dessert
- 1
- 45 min
- Vanskelighed
- 560
En rød fløjlskage-på engelsk: Rød fløjlskage- er en kage med en mørk rød, lys rød eller rødbrun farve.
Ingredienser: Mælk, mel, æg, vanilje, farvestof, sukker, smør.
Her tilføjer vi desuden billedet til vores opskrift, som hver af jer vil ændre efter jeres behov, lad os se, hvad vores .css -fil vil bære.CSS -kode
Ved at have vores struktur defineret i den .html skal vi kun oprette vores stilarter. Til dette vil vi bruge nogle egenskaber kendt som margen, polstring og positioner. Ud over dette vil vi bruge egenskaber som for eksempel gradienter eller kasse-dimensionering, Lad os se:
* {-webkit-box-dimensionering: border-box; -moz-box-dimensionering: border-box; box-dimensionering: border-box; } html {højde: 100%; } krop {baggrundsfarve: # 57abf2; baggrundsbillede: -webkit-lineær-gradient (-225deg, # 19d3d1 5%, # 57abf2); baggrundsbillede: lineær-gradient (-45deg, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', sans-serif; skrifttype: 1rem; } img {max-width: 100%; højde: auto; lodret justering: bund; } .opskrift-kort {baggrund: #fff; margen: 4em auto; bredde: 90%; max-bredde: 496px; grænse-top-venstre-radius: 5px; kant-top-højre-radius: 5px; kant-bund-venstre-radius: 5px; kant-bund-højre-radius: 5px; } Ud over dette vil vi bruge egenskaberne for børnene i vores dokument, og for de ikoner, vi vil bruge i vores opskrift, skal vi bruge en .svg til at udtrække dem og placere dem i vores HTML:
.recept-kort .ikon {display: inline; display: inline-blok; baggrundsbillede: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); baggrund-gentag: ingen-gentagelse; } .opskrift-kort .ikon-kalorier, .opskrift-kort .ikon-kalorier \: almindelig {baggrundsstilling: 0 0; bredde: 16px; højde: 19px; } .opskrift-kort .ikon-ur, .opskrift-kort .ikon-ur \: almindelig {baggrundsstilling: 0 -19px; bredde: 20px; højde: 20px; } .opskrift-kort .ikon-niveau, .opskrift-kort .ikon-niveau \: almindelig {baggrundsstilling: 0 -39px; bredde: 16px; højde: 19px; } .recept-kort .icon-play, .recept-kort .icon-play \: almindelig {baggrundsstilling: 0 -58px; bredde: 21px; højde: 26px; } .opskrift-kort .ikon-brugere, .opskrift-kort .ikon-brugere \: almindelig {baggrundsstilling: 0 -84px; bredde: 18px; højde: 18px; }Når dette er gjort, lad os se det endelige resultat af, hvordan vores opskrift ville se ud.
FORSTØRRE
recept.zip 91,82K 415 DownloadsKan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt 
