Quelques détails auxquels il convient de prêter attention dans la mise en page de div+css

　Le premier point à noter : l'utilisation des sélecteurs (label, classe, id)

Parmi les trois sélecteurs, l'id (#) a la plus haute priorité, filtre basé sur l'id nommez l'élément unique

Entrez comme suit :

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

La seconde est la classe (.) qui a une priorité plus élevée et est filtré en fonction du nom d'identification de l'élément unique

saisi comme suit :

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

Le la priorité de l'étiquette est la pire, sélectionnée en fonction du nom de l'étiquette Élément

saisi comme suit :

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

　 La seconde remarque : marge, rembourrage et utilisation du flotteur flottant

L'utilisation de la marge extérieure et du rembourrage de la marge intérieure sont ajustées par rapport à la bordure. Les quatre bordures sont ajustées dans le sens des aiguilles d'une montre en fonction de en haut, à droite. , en bas et à gauche;

Utilisation particulière : la marge extérieure est généralement utilisée en conjonction avec le flotteur de flux. Le flotteur de flux spécifie une direction pour l'objet exploité (la gauche coule vers la gauche, la droite coule vers la gauche). à droite), et l'objet opéré est disposé dans cette direction

Comme suit (réalisation de la barre de navigation) :

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

De plus, padding : Si padding est ajouté, l'élément deviendra plus grand en conséquence, et il doit être dans l'attribut de hauteur correspondant. Effectuez des ajustements

Entrez comme suit :

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

　 La troisième note : conditions d'utilisation du z- hiérarchique ; index

Utiliser hiérarchique L'index z doit être ajusté en conjonction avec l'attribut de position ; si le paramètre de position de l'attribut est manquant, il n'y aura aucun effet d'affichage.

Entrez comme suit :

<p style="width:300px; height:300px; background-color:#0F0; position:relative; z-index:5px"></p>
<p style="width:300px; height:300px; background-color:#009; position:relative; z-index:2px; margin:-50px 0px 0px 50px"></p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!