Praktische Tipps für CSS zur Verbesserung des Frontend-Webseitenlayouts

Es gibt viele Techniken für das CSS-Frontend-Webseitenlayout. Hier finden Sie eine Zusammenfassung von CSS-Frontend-Webseiten-Layout-Tipps, die für Anfänger geeignet sind und möglicherweise einen praktischeren Referenzwert für Sie darstellen:

1 Das ul-Tag hat in Mozilla standardmäßig einen Füllwert. und in Mozilla hat es einen Füllwert. Im IE hat nur margin einen Wert.

2. Derselbe Klassenselektor kann wiederholt in einem Dokument erscheinen, aber der ID-Selektor kann nur einmal erscheinen, um eine Bezeichnung in CSS zu definieren Definitionen ist die vom ID-Selektor vorgenommene Definition gültig, da die Gewichtung von ID größer als CLASS ist.

3. Eine dumme Möglichkeit, die Kompatibilität anzupassen (IE und Mozilla):
Anfänger können auf eine solche Situation stoßen: Die Attribute derselben Bezeichnung sind im IE festgelegt Es ist normal, es als A anzuzeigen, aber in Mozilla muss es auf B eingestellt werden, um es normal anzuzeigen, sonst sind die beiden umgekehrt.
Vorübergehende Lösung:

选择符{属性名:B !important;属性名:A}

4. Wenn zwischen einer Gruppe von zu verschachtelnden Tags ein gewisser Abstand erforderlich ist, belassen Sie ihn beim Randattribut des Tags, das sich im Inneren befindet, anstatt das Tag, das sich außerhalb befindet, zu definieren des Tags
5. Es wird empfohlen, für das Symbol vor dem li-Tag „background-image“ anstelle von „list-style-image“ zu verwenden.
6. IE kann den Unterschied zwischen Vererbungsbeziehung und Eltern-Kind-Beziehung nicht unterscheiden.
7. Vergessen Sie beim Hinzufügen von Selektoren zu Ihren Tags nicht, Kommentare zu den Selektoren in CSS hinzuzufügen. Sie werden wissen, warum Sie dies tun, wenn Sie Ihr CSS in Zukunft ändern.

8. Wenn Sie ein dunkles Hintergrundbild und einen hellen Texteffekt für eine Beschriftung festlegen. Es wird empfohlen, zu diesem Zeitpunkt eine dunkle Hintergrundfarbe für Ihr Etikett festzulegen.

9. Achten Sie bei der Definition der vier Zustände des Links auf die Reihenfolge:

Link Visited Hover Active

10. Bitte verwenden Sie Hintergrund

11. Die definierte Farbe kann mit #8899FF=#89F abgekürzt werden.

12 in einigen Aspekten. Bitte verwenden Sie es dort, wo eine Spaltenausrichtung erforderlich ist.

13. 3f1c4e4b6b16bbbd69b2ee476dc4f83a hat nicht das Sprachattribut Es sollte so geschrieben sein:

<script type=”text/JavaScript”>

14. Der Titel ist der Titel, und der Text des Titels ist der Text des Titels. Manchmal muss der Titel nicht unbedingt Text anzeigen, daher wird 4a249f0d628e2318394fd9b75b4636b1Titelinhalt473f0a7621bec819994bb5020d29372a in 4a249f0d628e2318394fd9b75b4636b145a2772a6b6107b401db3c9b82c049c2Titelinhalt54bdf357c58b8a65c66d7c19c8e4d114473f0a7621bec819994bb5020d29372a

15. Perfekte Einzelpixel-Umrisstabelle (kann den Test in IE5, IE6, IE7 und FF1.0.4 oder höher bestehen)

table{border-collapse:collapse;}
td{border:#000 solid 1px;}

16 spielen eine Rolle bei der relativen Positionierung, wenn das Etikett eine absolute Positionierung verwendet

Wenn die Seite in der Mitte angezeigt wird, ist das Attribut left:XXpx nicht für Ebenen mit absoluter Positionierung geeignet. Es empfiehlt sich, diese Ebene neben einem Etikett zu platzieren, das relativ positioniert werden muss, und dann negative Werte für den Rand zu verwenden.

17. Bei Verwendung der absoluten Positionierung kann der Randwert zur Positionierung relativ zu seiner eigenen Position verwendet werden, was sich von der Positionierung von Attributen wie oben und links relativ zum Fensterrand unterscheidet . Der Vorteil der absoluten Positionierung besteht darin, dass andere Elemente ihre Existenz ignorieren können.

18. Wenn der Text zu lang ist, ändern Sie den langen Teil in Auslassungspunkte und zeigen Sie ihn an: IE5, FF sind ungültig, können aber ausgeblendet werden, IE6 ist gültig

<p STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>

19. Wenn es durch Kommentare im IE zu Textduplizierungsproblemen kommen kann, können Sie die Kommentare ändern in:

<!–[if !IE]>Put your commentary in here…<![endif]–>

20. So rufen Sie es mit CSS auf Externe Schriftart

Syntax:

@font-face{font-family:name;src:url(url);sRules}

Wert:

name: Schriftartname. Jeder mögliche Wert des Attributs „font-family“

url(url): Verwenden Sie eine absolute oder relative URL-Adresse, um die OpenType-Schriftartdatei anzugeben
sRegeln: Stylesheet-Definition

21. Anleitung Ein Formular erstellen Den Text in einem Textfeld vertikal zentrieren?

Wenn die Verwendung von Zeilenhöhe und Höhengruppierung in FF keine Auswirkung hat, besteht die Möglichkeit darin, die obere und untere Polsterung zu definieren, um den gewünschten Effekt zu erzielen.

22. Kleine Punkte, auf die Sie bei der Definition des A-Tags achten sollten:

Wenn wir a{color:red;} definieren, repräsentiert es die Stile der vier Zustände von A . Wenn Sie zu diesem Zeitpunkt einen Status definieren möchten, in dem sich die Maus befindet, definieren Sie einfach a:hover. Die anderen drei Status sind die in A definierten Stile. Wenn nur ein a:link definiert ist, denken Sie unbedingt daran, die anderen drei Zustände zu definieren!

23. Nicht alle Stile müssen abgekürzt werden:

Wenn das Stylesheet wie p{padding:1px 2px 3px 4px} definiert ist, wird es im Folgenden hinzugefügt Projekt Der obere Abstand eines Stils beträgt 5 Pixel und der untere Abstand 6 Pixel. Wir müssen nicht unbedingt p.style1{padding:5px 6px 3px 4px} schreiben. Es kann als p.style1{padding-top:5px;padding-right:6px;} geschrieben werden. Sie haben vielleicht das Gefühl, dass es nicht so gut ist, es auf diese Weise zu schreiben, aber haben Sie jemals darüber nachgedacht? Die Methode definiert wiederholt den Stil. Darüber hinaus müssen Sie nicht herausfinden, wie hoch die ursprünglichen Werte für die untere und linke Polsterung sind! Wenn sich der vorherige Stil P in Zukunft ändert, ändert sich auch der Stil von p.style1, den Sie definiert haben.

24、网站越大，CSS样式越多，开始做前，请做好充分的准备和策划，包括命名规则。页面区块划分，内部样式分类等。

25、几个常用到的CSS样式：
1）中文字两端对齐：

text-align:justify;text-justify:inter-ideograph;

2）固定宽度汉字截断：

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

(不过只能处理文字在一行上的截断，不能处理多行。)（IE5以上）FF不能，它只隐藏。
3）固定宽度汉字（词）折行：

table-layout:fixed; word-break:break-all;

（IE5以上）FF不能。
4）61f67b2f528b9e0d9c17c529fb8b7f77文字839e87a4727ed0f54f182d54be97bbaf用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到，而国内的少又少。
5）图片设为半透明：

.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}

在IE6及IE5测试通过，FF未通过，这是因为这个样式是IE私有的东西；
6）Flash透明：

选中swf,打开原代码窗口，在eb50c9ec568c9b96871b9e94a1ff3fd1前输入e68169da9b5fc79dddaec591ce5a232e 以上是针对IE的代码。
针对FIREFOX 给d8e2720730be5ddc9c2a3782839e8eb6 标签也增加类似参数wmode=”transparent”
7）在做网页时常用到把鼠标放在图片上会出现图片变亮的效果，可以用图片替换的技巧，也可以用如下的滤镜：

.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }

Das obige ist der detaillierte Inhalt vonPraktische Tipps für CSS zur Verbesserung des Frontend-Webseitenlayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!