Copyright-Erklärung: Das Copyright dieses Artikels liegt beim ursprünglichen Autor. Die Übersetzung dient nur zur Referenz für inländische Leser
. Zusammenfassung dieses Artikels: Die am häufigsten verwendeten CSS-Tricks, wie abgerundete Ecken, Initialen usw.
Es gab eine frühere Übersetzung von „8 Ein-Satz-CSS-Tricks“, die 8 sehr nützliche Ein-Satz-CSS-Tricks vorstellte. Diese Woche werde ich Ihnen einen ähnlichen Artikel bringen, der einige der am häufigsten verwendeten CSS-Tricks vorstellt CSS-Trick. Natürlich glaube ich, dass jeder Designer einige persönliche Vorlieben hat. Mir persönlich gefallen einige der Tricks im Artikel nicht besonders gut.
1. Verwenden Sie nicht den abgerundeten Eckeneffekt des Bildes
<div id="container">
<b class=“rtop“>
<b class=“r1″></b> <b class=“r2″></b> <b class=“r3″></b> <b class=“r4″></b>
</b>
<!–Inhalt kommt hierher –>
<b class=“rbottom“>
<b class=“r4″></b> <b class=“r3″></b> <b class=“r2″></b> <b class=“r1″></b>
</b>
</div>
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block height: 1px;
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
(Viele Leute verwenden diese Rundungstechnik gerne, aber mir persönlich gefällt sie nicht besonders. Obwohl ich keine Bilder mit abgerundeten Ecken erstellen muss, sind diese zusätzlichen Tags immer vorhanden fühlen sich überflüssig)
2. Gestylte Liste
<ol>
<li>
<p>Dies ist Zeile eins</p>
</li>
<li>
<p>Hier ist Zeile zwei</p>
</li>
<li>
<p>Und letzte Zeile</p>
</li>
</ol>
ol {
Schriftart: kursiv 1em Georgia, Times, Serif;
Farbe: #999999;
}
ol p {
Schriftart: normal .8em Arial, Helvetica, serifenlos;
Farbe: #000000;
}
Dieser Effekt gefällt mir auch sehr gut. Man kann die Seriennummern mit verschiedenen Schriftarten versehen.
3. Formular ohne Tabelle
4. Technik mit doppelten Anführungszeichen
5. Verlaufsworteffekt
6. Vertikale Zentrierung
Weitere Informationen finden Sie im Originaltext
10. Initiale
<p class=“introduction“> Dieser Absatz hat die Klasse „introduction“. Ihr Browser unterstützt die Pseudoklasse „first-letter“, der erste Buchstabe ist eine Initiale </p>
p.introduction:first-letter {
Schriftgröße: 300 %;
Schriftstärke: fett;
schweben: links;
Breite: 1em;
}