第一個注意點:選取器的使用(標籤、class、id)
三種選取器中id(#)的優先順序最高,根據id名篩選出唯一元素;
如下輸入:
#menu{ width:1200px; height:45px; background:#90F}<p id="menu"></p>
其次是class(.)的優先順序較高,根據id名篩選出唯一元素;
如下輸入:
.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>
第二個注意點:外邊距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 } <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>
另外,內邊距padding:如果加了內邊距,該元素會相應的變大,則需要在相應的高度屬性中進行調整;
如下輸入:
<p style="width:100px; height:80px; background-color:#90C; float:left; padding:20px 0px 0px 0px"></p>(這裡height由100px調整為80px,加padding效果)
第三個注意點:分層z-index的使用條件
使用分層z-index時,要配合位置屬性來調整;如果缺少屬性位置的設定,則沒有顯示效果。
如下輸入:
<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>