Tipps zum CSS-Webseitenlayout

Tipps für das Front-End-Webseitenlayout:

(Empfohlenes Video-Tutorial: css-Video-Tutorial)

1. Das ul-Tag hat standardmäßig einen Füllwert in Mozilla, aber im IE hat nur margin einen Wert .

2. Derselbe Klassenselektor kann wiederholt in einem Dokument erscheinen, aber der ID-Selektor kann nur einmal erscheinen; verwenden Sie Klasse und ID, um gleichzeitig eine Bezeichnung in CSS zu definieren, reicht der ID-Selektor aus it. Die Definition ist gültig, da das Gewicht 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: Es ist normal, dass das gleiche Label-Attribut im IE auf A gesetzt ist, in Mozilla muss es jedoch auf A gesetzt werden . Es kann nur dann normal angezeigt werden, wenn es zu B wird oder die beiden auf den Kopf gestellt werden.

Vorübergehende Lösung:

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

4. Wenn eine Gruppe verschachtelter Tags einen gewissen Abstand erfordert, dann belassen Sie es beim Randattribut des Tags im Inneren, anstatt den Abstand des Tags außerhalb zu definieren

5. Es wird empfohlen, dies zu tun Verwenden Sie „background-image“ anstelle von „list-style-image“ für das Symbol vor dem li-Tag.

6. IE kann den Unterschied zwischen einer Erbschaftsbeziehung und einer Vater-Sohn-Beziehung nicht unterscheiden.

7. Vergessen Sie beim Hinzufügen von Selektoren zu Ihren Tags nicht, den Selektoren in CSS Kommentare hinzuzufügen. Sie werden wissen, warum Sie dies tun, wenn Sie Ihr CSS später ändern.

8. Wenn Sie ein dunkles Hintergrundbild und einen hellen Texteffekt für ein Etikett festlegen. Es wird empfohlen, zu diesem Zeitpunkt eine dunklere 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 für Bilder, die nichts mit dem Inhalt zu tun haben.

11 Die Definitionsfarbe kann abgekürzt werden #8899FF=#. 89F

12. In einigen Aspekten schneidet die Tabelle viel besser ab als andere Tags. Bitte verwenden Sie es dort, wo eine Spaltenausrichtung erforderlich ist.

13. 3f1c4e4b6b16bbbd69b2ee476dc4f83a hat nicht das Sprachattribut

sollte so geschrieben werden:

<script type=”text/JavaScript”>

14 Der Titel ist der Text des Titels.
Manchmal muss im Titel nicht unbedingt Text angezeigt werden, daher: 4a249f0d628e2318394fd9b75b4636b1Titelinhalt473f0a7621bec819994bb5020d29372a wird in 4a249f0d628e2318394fd9b75b4636b145a2772a6b6107b401db3c9b82c049c2Titelinhalt54bdf357c58b8a65c66d7c19c8e4d114473f0a7621bec819994bb5020d29372a

15 geändert. Perfekt Die Einzelpixel-Umrisstabelle (kann den Test in IE5, IE6, IE7 und FF1.0.4 und höher bestehen)

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

16 Wenn das Etikett eine absolute Positionierung verwendet, können negative Randwerte eine Rolle spielen 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 zu Textduplizierungsproblemen kommen kann durch Kommentare im IE Sie können den Kommentar ändern in:

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

20 So verwenden Sie CSS zum Aufrufen externer Schriftarten
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 So zentrieren Sie den Text in einem Textfeld in einem Formular vertikal ?

Wenn die Kombination aus Linienhöhe und Höhe 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, die bei der Definition des A-Labels zu beachten sind:

Wenn wir a{color:red;} definieren, stellt es die Stile der vier Zustände von A dar. Wenn wir einen Zustand definieren möchten, in dem die Maus platziert wird, definieren Sie einfach a:hover. Die anderen drei Zustände 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 mit p{padding: 1px 2px 3px 4px} definiert ist, wird im Folgeprojekt ein weiterer Stil mit einem oberen Abstand von 5px und einem unteren Abstand von 6px hinzugefügt. 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. Je größer die Website, desto mehr CSS-Stile gibt es. Bevor Sie beginnen, treffen Sie bitte umfassende Vorbereitungen und Pläne, einschließlich Namensregeln. Seitenblockaufteilung, interne Stilklassifizierung usw.

25. Mehrere häufig verwendete CSS-Stile:

1) Ausrichtung chinesischer Zeichen an beiden Enden:

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

2) Abschneiden chinesischer Zeichen mit fester Breite:

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

(Es kann jedoch nur das Abschneiden von Text an einem Ende verarbeitet werden (IE5 und höher) FF kann nicht, es wird nur ausgeblendet.

3) Zeilenumbruch für chinesische Zeichen (Wörter) mit fester Breite:

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

(IE5 und höher) FF nicht.

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); 
}

图文教程推荐：CSS教程

Das obige ist der detaillierte Inhalt vonTipps zum CSS-Webseitenlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!