DIV+CSS是網(wǎng)站建設的主要設計形式，掌握并不難，達到同樣效果，代碼寫得越少越好，這完全是靠個人敲代碼敲出來經(jīng)驗。秀站網(wǎng)前面寫過一篇骨灰級極簡主義代碼優(yōu)化，簡單介紹了極簡代碼的基本設計要素。下面舉例最少的代碼實現(xiàn)清除浮動，最常用的是主導航。給出兩種清除浮動形式如下：

<style>
 .clear{clear:both;display:block;width:0;height:0;margin:0;border:0}
 .clearfix:after{clear:both;display:block;content:"\20"}
.fl{float:left}
.fr{float:right}
nav ul li{float:left;}
nav ul li a{padding:0 10px;line-height:40px;font-size:14px;color:#555}
nav ul li a:hover{color:#c00}
</style>
<header class="clearfix" id="top"><!--清除浮動形式1-->
 <img src="images/logo.png" alt="網(wǎng)站logo" class="fl"/>
 <nav class="fr">
  <ul class="menu">
   <li><a href="#">欄目1</a></li>
   <li><a href="#">欄目2</a></li>
   <li><a href="#">欄目3</a></li>
   <p class="clear"></p><!--清除浮動形式2-->
  </ul>
 </nav>
</header>

       第一種用到的是偽類選擇器 :after，意思是：在被選元素的內(nèi)容后面插入內(nèi)容，一般格式：

.clearfix:after{clear:both;display:block;content:"內(nèi)容;}

       另一種對應的是:before，意思是：在被選元素的內(nèi)容前面插入內(nèi)容。格式和 :after一樣，IE6、IE7不支持。

必須掌握的其他CSS選擇器

* ：通用選擇器（IE6+，F(xiàn)irefox，Chrome，Safari，Opera）

       選擇的是全部元素，在做兼容性、字體時非常好用。

*{margin:0;padding:0;font-family:"Microsoft Yahei"}

       用于子選擇器，下面是id為main下的所有元素都添加了font-size:14px。

#main *{font-size:14px}

#id：id選擇器（IE6+，F(xiàn)irefox，Chrome，Safari，Opera）

#top{background:#eee}

.class：類選擇器（IE6+，F(xiàn)irefox，Chrome，Safari，Opera）

.clear{clear:both}

x y：默認標簽選擇器（IE6+，F(xiàn)irefox，Chrome，Safari，Opera）

ul li{float:left}
ul li a{color:#c00}

       如果是類選擇器結合默認標簽可以這樣寫

.menu a{display:block}

x:visited，x:link，x:hover：偽類選擇器（IE7+，F(xiàn)irefox，Chrome，Safari，Opera）

a:link{color:#c00;}
a:visited{color:#555}
a:hover{decoration:underline}/*在IE6下，只能用于a標簽*/

x + y ：毗鄰元素選擇器（IE7+，F(xiàn)irefox，Chrome，Safari，Opera）

ul + p{color:#c00}

x > y：子元素選擇器（IE7+，F(xiàn)irefox，Chrome，Safari，Opera）

#top > ul li{border:1px solid #eee}

       用在欄目下的子欄目的例子，這選擇器影響到的是欄目1的<li>標簽，而影響不到該欄目下的子欄目的<li>標簽，如果樣式寫成

#top ul li{border:1px solid #eee}

       則影響到#top下的全部<li>標簽。

<header id="top">
 <ul>
  <li>
   <a href="#">欄目1</a>
   <ul>
    <li><a href="#">子欄目1</a></li>
    <li><a href="#">子欄目2</a></li>
   </ul>
  </li>
 </ul>
</header>

x:nth-child(n)，x:nth-last-child(n)：匹配元素中從頭數(shù)第幾個標簽，后面是倒序匹配（IE9+，F(xiàn)irefox 3.5，Chrome，Safari，Opera）

li:nth-child(3){color:#c00}/*匹配的是第三個li標簽*/
li:nth-last-child(3){color:#c00}/*匹配的是倒數(shù)第三個li標簽*/

       以上是最常用的選擇器，其他選擇器幾乎用不到，感興趣的可以網(wǎng)上自己搜一下。