Eine sehr einfache Möglichkeit, die Elemente einer Website-Seite zu drehen - wenden Sie einfach ein paar CSS-Stile an. Wenn Sie sich mit dieser Lektion vertraut machen, können Sie einen aufgeklappten Kartenfächer, verstreute gefallene Blätter oder stilvolle Fotos in einem Album auf der Seite platzieren. Die Lektion enthält ein Beispiel für die Implementierung eines Fotoalbums und berücksichtigt die Lösung für alle modernen Browser.
Es ist notwendig
Vier Fotos mit einer Breite von bis zu 450 Pixeln
Anleitung
Schritt 1
Dieses Beispiel konzentriert sich auf das Erstellen einer stilvollen Albumseite mit gedrehten Fotos.
Ich habe im Voraus Bilder (Breite 400px) mit Adressen vorbereitet:
Zukünftig werden wir Bildern anhand ihrer Namen IDs zuordnen.
Schritt 2
Zuerst bereiten wir einen Block für unser Fotoalbum mit dem div-Tag vor und fügen ihm auch Fotos mit dem img-Tag hinzu (jedes Bild muss in einem eigenen div-Tag eingeschlossen sein), wie folgt:
Bitte beachten Sie, dass wir dem Block eine Kennung zugewiesen haben -. Über den Bezeichner können wir mit CSS auf den Block verweisen.
Schritt 3
Als nächstes müssen Sie die CSS-Stile auf den Block setzen. Liste der Stile: "position: relativ;" - setzt den Ursprung von der oberen linken Ecke unseres Blocks; "Rand: 50px automatisch;" - setzt die Einrückung unseres Blocks "50px" über und unter den restlichen Seiteninhalt, sowie die automatische Einrückung nach rechts und links, wodurch unser Block in der Mitte ausgerichtet wird; "Breite: 900px; Höhe: 650px;" - setzt die Breite auf 900px bzw. die Höhe auf 650px.
Die angegebene Stilliste muss wie folgt platziert werden:
#photo_page {
Position: relativ;
Rand: 0 automatisch;
Breite: 900px;
Höhe: 650px;
Textausrichtung: Mitte;
}
Beachten Sie die Verwendung von "#photo_page" - so bezeichnen wir die Block-ID.
Schritt 4
Jetzt werden wir jedem Bild im photo_page-Block allgemeine Stile zuweisen. Dies sind abgerundete Ecken, grauer Rand, weißer Hintergrund, Polsterung und Schlagschatten.
Dies erzeugt einen fotografischen Effekt:
#photo_page img {
Randradius: 7px;
Rand: 1px einfarbig grau;
Hintergrund: #ffffff;
Polsterung: 10px;
Kastenschatten: 2px 2px 10px # 697898;
}
Beachten Sie die Verwendung von "#photo_page img" - dies bezieht sich auf alle Bilder innerhalb des photo_page-Blocks
Schritt 5
Es ist auch wichtig, einen kurzen Stil wie diesen hinzuzufügen:
#photo_page div {
Schwimmer: links;
}
Es verkleinert alle Blöcke innerhalb des photo_page-Blocks nach links.
Schritt 6
Die Zwischenphase des Unterrichts ist nun abgeschlossen. Wenn Ihre Arbeit dem Bild im Screenshot ähnelt, haben Sie keinen Fehler gemacht und können mit dem nächsten Schritt fortfahren.
Schritt 7
Jetzt drehen wir die geposteten Fotos. Dazu benötigen wir den Transformationsstil. Im Moment wird es in seiner reinen Form nicht verwendet, sondern nur mit einem Präfix für jeden Browser zu Beginn, wie folgt:
-webkit-transform: rotieren (Wert);
-moz-transform: rotieren (Wert);
-o-transform: rotieren (Wert);
Dies ist der Rotationsstil für Browser: Google Chrome, Mazilla, Opera (bzw.). Anstelle des Wortes "Wert" fügen wir am Ende eine Zahl mit deg ein, wie folgt:
90deg - um 90 Grad im Uhrzeigersinn drehen.
-5deg - um -5 Grad gegen den Uhrzeigersinn drehen.
Usw.
Schritt 8
Stil für Foto Foto_1:
# photo_1 {
-webkit-transform: rotieren (5deg);
-moz-transform: drehen (5deg);
-o-transformieren: drehen (5deg);
}
Das erste Bild ist um 5 Grad gedreht.
Schritt 9
Stil für Foto Foto_2:
# photo_2 {
-webkit-transform: rotieren (-3deg);
-moz-transform: drehen (-3deg);
-o-transform: drehen (-3deg);
}
Das zweite Bild ist um -3 Grad gedreht.
Schritt 10
Stil für Foto photo_3:
# photo_3 {
-webkit-transform: rotieren (-2deg);
-moz-transform: drehen (-2deg);
-o-transformieren: drehen (-2deg);
}
Das dritte Bild ist um -2 Grad gedreht.
Schritt 11
Stil für Foto photo_4:
# photo_4 {
-webkit-transform: drehen (8deg);
-moz-transform: drehen (8deg);
-o-transformieren: drehen (8deg);
}
Das vierte Bild ist um 8 Grad gedreht.
Schritt 12
Sehen wir uns an, wie Sie die Position von Bildern korrigieren können. Sie möchten beispielsweise das erste Bild 20 Pixel von oben und 10 Pixel von links versetzen. In diesem Fall müssen Sie den Randstil verwenden. So verwenden Sie es für unseren Fall:
# photo_1 {
Rand: 20px -10px -20px 10px;
-webkit-transform: rotieren (5deg);
-moz-transform: drehen (5deg);
-o-transformieren: drehen (5deg);
}
Bitte beachten Sie, dass der erste Wert des Stils der obere Rand ist; der zweite ist der Einzug nach rechts; der dritte ist eine Einkerbung von unten; vierter - linker Einzug.
Wichtig: In unserem Fall entspricht der untere Rand dem negativen Wert des oberen Rands. Wenn Sie unter dem Bild auf Ihrer Seite Leerräume sehen, versuchen Sie, den unteren Rand des Bildes noch stärker einzurücken.
Schritt 13
Die Arbeit ist abgeschlossen, ich stelle einen Screenshot zur Verfügung (unter Berücksichtigung der in Schritt 12 beschriebenen Änderung der Einrückung des ersten Bildes).
Fügen Sie allen Bildern, die nicht in der für Sie passenden Position sind, einen Einzugsstil hinzu.
