Inhaltsverzeichnis
Die Websites oder Webanwendungen, die alles rund um Lebensmittelrezepte behandeln, müssen ein ansprechendes, aber auch nützliches und benutzerfreundliches Design haben, das es den Benutzern ermöglicht, die in den Rezepten gezeigten Anweisungen auszuführen.Wenn genau dies unser Kern ist, müssen wir für jedes der auf unserer Website oder Webanwendung veröffentlichten Rezepte gute Designs implementieren CSS und einer gut geplanten Struktur können wir das erreichen, was wir brauchen.
HTML Quelltext
Unser HTML Es wird ganz einfach sein, wir fügen unsere Datei style.css in unseren Header ein und strukturieren sie in eine Reihe von Divs, in denen wir die Informationen in Listen organisieren und den Informationsblock zusätzlich mit einem Artikel-Tag kennzeichnen:
roter Samt
Dessert
- 1
- 45 Minuten
- Schwierigkeit
- 560
Ein Red Velvet Cake – zu Deutsch: Red Velvet Cake – ist ein Kuchen mit einer dunkelroten, leuchtend roten oder rotbraunen Farbe.
Zutaten: Milch, Mehl, Eier, Vanille, Farbstoff, Zucker, Butter.
Hier fügen wir zusätzlich das Bild für unser Rezept hinzu, das jeder von euch nach seinen Bedürfnissen anpassen wird, mal sehen, was unsere .css-Datei trägt.CSS-Code
Indem wir unsere Struktur in .html definiert haben, müssen wir nur unsere Stile erstellen. Dazu verwenden wir einige Eigenschaften, die als bekannt sind Rand Einlage und Positionen. Darüber hinaus verwenden wir Eigenschaften wie Farbverläufe oder die Kartongröße, mal sehen:
* {-webkit-box-sizing: border-box; -moz-Box-Größe: Rahmen-Box; Box-Größe: Bordüre-Box; } html {Höhe: 100%; } body {Hintergrundfarbe: # 57abf2; Hintergrundbild: -webkit-linear-gradient (-225deg, # 19d3d1 5%, # 57abf2); Hintergrundbild: Linear-Gradient (-45deg, # 19d3d1 5%, # 57abf2); Schriftfamilie: 'Open Sans', serifenlos; Schriftgröße: 1rem; } img {max-Breite: 100%; Höhe: automatisch; vertikal ausrichten: unten; } .Rezeptkarte {Hintergrund: #fff; Rand: 4em automatisch; Breite: 90%; maximale Breite: 496px; Rand-oben-links-Radius: 5px; Rand-oben-rechts-Radius: 5px; Rand-unten-links-Radius: 5px; Rand-unten-rechts-Radius: 5px; } Darüber hinaus werden wir die Eigenschaften der untergeordneten Elemente unseres Dokuments verwenden und für die Symbole, die wir in unserem Rezept verwenden, eine .svg verwenden, um sie zu extrahieren und in unseren HTML-Code zu platzieren:
.Rezeptkarte .icon {Anzeige: Inline; Anzeige: Inline-Block; Hintergrundbild: URL (https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/recipe-card-icons.svg); Hintergrundwiederholung: keine Wiederholung; } .Rezeptkarte .icon-calories, .recipe-card .icon-calories \: regular {background-position: 0 0; Breite: 16px; Höhe: 19px; } .rezeptkarte .icon-clock, .recipe-card .icon-clock \: regular {background-position: 0 -19px; Breite: 20px; Höhe: 20px; } .rezeptkarte .icon-level, .rezeptkarte .icon-level \: regular {background-position: 0 -39px; Breite: 16px; Höhe: 19px; } .Rezeptkarte .icon-play, .Rezeptkarte .icon-play \: regular {background-position: 0 -58px; Breite: 21px; Höhe: 26px; } .recipe-card .icon-users, .recipe-card .icon-users \: regular {background-position: 0 -84px; Breite: 18px; Höhe: 18px; }Sobald dies erledigt ist, sehen wir uns das Endergebnis an, wie unser Rezept aussehen würde.
VERGRÖSSERN
Rezept.zip 91.82K 415 DownloadsHat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben 
