Einige Details, die beim Layout von div+css beachtet werden sollten

　Der erste zu beachtende Punkt: die Verwendung von Selektoren (Label, Klasse, ID)

Unter den drei Selektoren hat ID (#) die höchste Priorität, Filter basierend auf ID Benennen Sie das eindeutige Element aus;

Geben Sie Folgendes ein:

Die zweite ist Klasse (.), die eine höhere Priorität hat und wird basierend auf dem ID-Namen herausgefiltert. Das eindeutige Element wird wie folgt eingegeben:

#menu{ width:1200px; height:45px; background:#90F}
<p id="menu"></p>

The Die Etikettenpriorität ist am schlechtesten und wird entsprechend dem Etikettennamen ausgewählt.

Eingabe wie folgt:

.text{ width:200px; height:45px; text-align:center; line-height:45px; vertical-align:middle}
<p class="text"></p>

　

p{text-align:center; vertical-align:middle; line-height:100px}
<p>微软雅黑</p>

Der zweite Hinweis: Rand, Polsterung und Die Verwendung von Floating Float

Die Verwendung von Außenrand und Innenrandpolsterung wird relativ zum Rand angepasst. Die vier Ränder werden im Uhrzeigersinn entsprechend oben, rechts angepasst , unten und links;

Besondere Verwendung: Der äußere Rand wird im Allgemeinen in Verbindung mit dem Fließschwimmer verwendet. Der Fließschwimmer gibt eine Richtung für das betätigte Objekt an (von links nach links, von rechts nach links). rechts) und das bediente Objekt wird in dieser Richtung angeordnet Wie folgt (Erstellung der Navigationsleiste):

Zusätzlich Polsterung: Wenn Polsterung hinzugefügt wird, wird das Element wird entsprechend größer und muss im entsprechenden Höhenattribut sein. Nehmen Sie Anpassungen vor:

.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
      }
　　<p id="menu">
　　　　<p class="text">首页</p>    　　　　
　　　　<p class="text">产品介绍</p>    　　　　
　　　　<p class="text">产品图片</p>    　　　　
　　　　<p class="text">产品参数</p>    　　　　
　　　　<p class="text">关于服务</p>    　　　　
　　　　<p class="text">联系我们</p>　　
　　</p>

　

Der dritte Hinweis: Bedingungen für die Verwendung hierarchischer Z- Index

Hierarchisch verwenden Der Z-Index muss in Verbindung mit dem Positionsattribut angepasst werden, wenn die Einstellung des Attributs Position fehlt, gibt es keinen Anzeigeeffekt.

<p style="width:100px; height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px"></p>（这里height由100px调整为80px，加padding效果）

Geben Sie wie folgt ein:

Das obige ist der detaillierte Inhalt vonEinige Details, die beim Layout von div+css beachtet werden sollten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!