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:

#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.

.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>

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):

.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

<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!