Bei der Verwendung von div+css sind einige Details zu beachten

　　第一个注意点：选择器的使用（标签、class、id）

三种选择器中id（#）的优先级最高，根据id名筛选出唯一元素；

如下输入：#menu{ width:1200px; height:45px; background:#90F}

　　　　　

其次是class（.）的优先级较高，根据id名筛选出唯一元素；

如下输入：.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}

　　　　　

标签优先级最差，根据标签名选中元素；

如下输入：div{text-align:center; vertical-align:middle; line-height:100px}

　　　　　

微软雅黑

　　第二个注意点：外边距margin、内边距padding和流float的使用

外边距margin和内边距padding的使用是相对于边框的调整，四边框按上右下左顺时针调整；

特殊使用：外边距margin一般配合流float来使用，流float给操作的对象规定一个方向（left向左流、right向右流），被操作对象按此按此方向进行布局

如下（导航栏的制作）：

　　　　.text{ width:200px; height:45px; float:left; text-align:center; line-height:45px; vertical-align:middle}
　　　　.text:hover{ background-color:#000; color:#F00; cursor:pointer}

　　

　　　　

首页

   　　　　

产品介绍

   　　　　

产品图片

   　　　　

产品参数

   　　　　

关于服务

   　　　　

联系我们

　　

另外，内边距padding：如果加了内边距，该元素会相应的变大，则需要在相应的高度属性中进行调整；

如下输入：

　　　　

height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px">

（这里height由100px调整为80px，加padding效果）

　　第三个注意点：分层z-index的使用条件

使用分层z-index时，要配合位置属性来调整；如果缺少属性位置的设置，则没有显示效果。

如下输入：

　　

　　

1. Verwenden Sie keine zu kleinen Bilder für Hintergrundkacheln.

Aus diesem Grund verwenden viele Leute 1px nicht, sie wissen es einfach. Das Kacheln eines Bildes mit einer Breite und Höhe von 1 Pixel auf eine Fläche von 200 Pixel erfordert 200 * 200 = 40.000 Mal und beansprucht Ressourcen.

2. Keine Grenzen.

Die empfohlene Schreibmethode ist border:none;, haha, das verwende ich ständig. border:0; definiert nur die Rahmenbreite als Null, aber der Rahmenstil und die Farbe werden weiterhin vom Browser analysiert und belegen Ressourcen.

3. Verwenden Sie den Platzhalter * mit Vorsicht.

Der sogenannte Platzhalter dient dazu, alle Tags in CSS zu initialisieren, unabhängig davon, ob sie verwendet werden, veraltet oder fortgeschritten sind, und werden gleich behandelt. Dies verbraucht viele Ressourcen. Es sollten optionale Initialisierungs-Tags vorhanden sein.

4. CSS-Hexadezimal-Farbcode-Abkürzung.

Als ich mich an Abkürzungen und Kleinbuchstaben gewöhnte, wurde mir klar, dass dies nicht die empfohlene Schreibweise war, um den Ressourcenaufwand für das Parsen zu reduzieren. Es erhöht aber auch die Dateigröße. Welches besser oder schlechter ist, muss sorgfältig geprüft werden.

5. Bringen Sie den Stil auf dem Kopf und die Schrift auf dem Fuß an. Nicht eingebettet, nur externe Links.

6. Verwenden Sie niemals CSS-Ausdrücke.

7. Verwenden Sie diese Option, um auf das Stylesheet zu verweisen, anstatt es über @import zu importieren.

8. Im Allgemeinen ist PNG kleiner als GIF, viel kleiner. Andererseits lohnt es sich zu optimieren, wie viel Farbe in GIFs verschwendet wird.

9. Skalieren Sie niemals Bilder in HTML, das andere sieht nicht gut aus.

10. Für Textschriften verwenden Sie am besten gerade Zahlen, 12px, 14px, 16px, der Effekt ist sehr gut. Sonderfall, 15px.

Das obige ist der detaillierte Inhalt vonBei der Verwendung von div+css sind einige Details zu beachten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!