Innholdsfortegnelse
Nettstedene eller webapplikasjonene som håndterer alt relatert til matoppskrifter må ha et design som ikke bare er attraktivt, men også nyttig, vennlig og som lar brukerne utføre instruksjonene vist i oppskriftene.Hvis kjernen vår er akkurat dette, må vi implementere gode design for hver av oppskriftene som er lagt ut på nettstedet vårt eller webapplikasjonen, og selv om vi kanskje tenker at vi trenger timer og timer i design, er sannheten at med noen stiler av CSS og en godt planlagt struktur kan vi oppnå det vi trenger.
HTML -kode
Våre HTML Det vil være ganske enkelt, vi vil inkludere styles.css -filen i overskriften vår, og vi vil strukturere den i en serie divs, hvor vi vil organisere informasjonen i lister, i tillegg til å identifisere informasjonsblokken med en artikkeltag:
rød fløyel
Dessert
- 1
- 45 min
- Vanskelighet
- 560
En rød fløyelskake-på engelsk: Red velvet cake- er en kake med en mørk rød, lys rød eller rødbrun farge.
Ingredienser: Melk, mel, egg, vanilje, fargestoff, sukker, smør.
Her legger vi i tillegg til bildet for oppskriften vår, som hver og en av dere vil endre etter dine behov, la oss se hva vår .css -fil vil bære.CSS -kode
Ved å ha strukturen vår definert i den .html trenger vi bare å lage våre stiler. For dette vil vi bruke noen eiendommer kjent som margin, polstring og stillinger. I tillegg til dette vil vi bruke egenskaper som gradienter eller boksestørrelse, la oss se:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; eske-dimensjonering: border-box; } html {høyde: 100%; } body {bakgrunnsfarge: # 57abf2; bakgrunnsbilde: -webkit-lineær-gradient (-225deg, # 19d3d1 5%, # 57abf2); bakgrunnsbilde: lineær-gradient (-45deg, # 19d3d1 5%, # 57abf2); font-family: 'Open Sans', sans-serif; skriftstørrelse: 1rem; } img {maks-bredde: 100%; høyde: auto; loddrett justering: bunn; } .recipe-card {bakgrunn: #fff; margin: 4em auto; bredde: 90%; maks-bredde: 496px; kantlinje-topp-venstre-radius: 5px; kantlinje-topp-høyre-radius: 5px; kantlinje-bunn-venstre-radius: 5px; kantlinje-bunn-høyre-radius: 5px; } I tillegg til dette, skal vi bruke egenskapene til barna til dokumentet vårt, og for ikonene vi skal bruke i oppskriften, skal vi bruke en .svg for å trekke dem ut og plassere dem i HTML -koden vår:
.recipe-card .icon {display: inline; display: inline-block; bakgrunnsbilde: url (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); bakgrunn-gjenta: nei-gjenta; } .oppskrift-kort .ikon-kalorier, .oppskrift-kort .ikon-kalorier \: vanlig {bakgrunn-posisjon: 0 0; bredde: 16px; høyde: 19px; } .oppskrift-kort .ikon-klokke, .oppskrift-kort .ikon-klokke \: vanlig {bakgrunn-posisjon: 0 -19px; bredde: 20px; høyde: 20px; } .oppskrift-kort .ikon-nivå,. oppskrift-kort .ikon-nivå \: vanlig {bakgrunn-posisjon: 0 -39px; bredde: 16px; høyde: 19px; } .recipe-card .icon-play, .recipe-card .icon-play \: vanlig {bakgrunn-posisjon: 0 -58px; bredde: 21px; høyde: 26px; } .recipe-card .icon-brukere, .recipe-card .icon-users \: vanlig {bakgrunn-posisjon: 0 -84px; bredde: 18px; høyde: 18px; }Når dette er gjort, la oss se det endelige resultatet av hvordan oppskriften vår vil se ut.
FORSTØRRE
recipe.zip 91.82K 415 NedlastingerLikte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
