CSS完成一個文章網頁的布局教程

我們先分析一下整個網頁的結構，整體內容采用的是一個兩列布局，導航無限延長的背景，并且添加了分割符號

素材：

第一步： 去掉默認的HTML間距。
*{padding:0;margin:0;}
Ps(我們可以在后期進行修改,根據網頁中使用的HTML元素的個數如body,h2,div等)
第二步：按效果圖頭部灰色背景但是無限延長
HTML代碼：
<div class="top">
 <div id="top">   
    <p>css教程網站歡迎您！</p>
    </div>
</div>
兩個DIV嵌套，<div class="top">這個需要100%添加背景，而內側<div id="top"> 實現居中布局就可以了
.top{width:100%;background:#f5f5f5;height:35px;}
解釋：寬度100%,添加背景顏色，設定高度，這樣在縮放網頁，始終可以看到灰色的背景
#top {width:970px;margin:0 auto;}
解釋：網頁寬度970像素，使id=top的div元素進行居中margin:0 auto;
#top p{font-size:13px;line-height:35px;}
解釋：改變文字大小，就一行宣傳文字，通過行高（和高度一樣時間）實現垂直居中line-height:35px;
第三步：logo的實現，采用典型的以圖換字的方式，有利于SEO
HTML代碼：
<div id="header">
 <h2>
    <a href="#">css教程</a>
    </h2>
</div>
CSS編碼：
#header h2 a{
 background:url(p_w_picpaths/logo.png) no-repeat 0 50%;
 display:block;
 width:215px;height:60px;
 text-indent:-9999px;
 }
添加背景圖片，由于是A行內元素，所以轉成display:block;再進行寬高指定。最后讓文字縮進。使用大的負值，從屏幕移除文字
第四步：導航的實現,導航需要有一個無限延長的背景，而且導航中間有|線隔開
Html代碼:
<div class="nav">
<div id="nav">
<ul>
<li ><a >網站首頁</a>|</li>
   <li><a href="#">CSS基礎</a>|</li>
   <li><a href="#">CSS基礎</a>|</li>
   <li><a href="#">CSS基礎</a>|</li>
   <li><a href="#">CSS基礎</a>|</li>
               <li><a href="#">CSS基礎</a>|</li> 
                <li><a href="#">CSS基礎</a>|</li>
                    <li><a href="#">CSS基礎</a></li>
   
   
  </ul>
</div>
</div>
CSS代碼：
首先還是給外側DIV添加100%的寬度以及背景顏色
.nav{width:100%;height:50px;background:#1a539c;}
導航采用的是li，所以去掉默認的圓點
ul li{list-style:none;}
進行導航的CSS編碼
#nav ul li{float:left;line-height:50px;color:#133d72;text-align:center;}
解釋：float:left;讓導航在一行顯示，;line-height:50px;垂直居中，設置文字顏色color:#133d72;，只要針對豎線的。
再讓導航中的A元素具備塊元素，有利于我們在鼠標懸停時添加背景顏色
#nav ul li a{color:#fff;font-size:13px;display:block;width:114px;text-decoration:none;float:left;}
鼠標懸停CSS代碼：
#nav ul li a:hover{background:#133d72;text-decoration:underline;}

主題內容為兩列布局
<div id="main">
 <div class="left">
</div>
    <div class="right">
    </div>
</div>
先把兩列布局實現了，在去寫里面的內容。PS（先給內容做個標記）如下
<!--通過備注，布局的左側內容開始-->
<div class="left">
</div>
<!--通過備注，布局的左側內容結束-->
首先給外側id="main"的div使其居中。計算左右的寬度(根據盒模型)，添加浮動屬性
CSS代碼；
#main .left{width:473px;margin-right:20px;float:left;}
#main .right{width:473px;float:left;}
確定完左右后，內容是一樣的效果 ，距離頂部有間隔，有邊線。把內容統一添加一個class為container 的DIV,對其添加樣式
#main  .container{border:1px solid #ddd;margin-top:10px;} 欄目名稱使用h4
<h4><a href="#">asp.net基礎</a></h4> CSS代碼:
 #main  .container h4{
 background:url(p_w_picpaths/lbj.jpg) repeat-x;height:31px;
 text-indent:20px;
 }
#main  .container h4 a{
 color:#133d72;font-size:15px;
 line-height:31px;
 } 欄目簡介統一的使用敘述清單，
<dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">asp.net基礎欄目</dd>
            <dd>文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介</dd>
</dl> 敘述清單特別適用于有圖，有標題，有簡介這樣的網頁表現形式。網頁中上方式圖片下方是標題使用敘述清單更簡單
CSS代碼：
#main  .container dl{
 padding:10px;
 border-bottom:1px dashed #ccc;height:78px;
 }
解釋：讓dl整體距離邊框留一定間距（padding:10px;）。添加一個距下方的虛線（border-bottom:1px dashed #ccc;），并設定高度。
#main  .container dl dt{
 float:left;margin-right:10px;} 
解釋：進行浮動
#main  .container dl dd.biaoti{
 font-size:14px;line-height:25px;
 } 
解釋：為 dd添加一個class，由于該class是給dd使用的，直接寫成dd.biaoti，一定注意不要帶空格，空格的選擇符表示包含的意思。
#main  .container dl dd{
 line-height:22px;font-size:13px;
 } 下方典型是一個新聞列表形式。
<ul>
<li><a href="#">新聞標新聞標題新聞標標題題</a><span>2015-5-1</span></li>
……         
</ul> 我們首先為新聞列表添加背景顏色和內邊距
#main  .container ul{
 padding:10px;background:#fbfbfb;
}
控制li的高度及添加下邊線：
#main  .container ul li{
 height:28px;line-height:28px;
 border-bottom:1px solid #f1f1f1; 
 font-size:13px;
}
新聞標題和日期應該同行顯示，并且日期相應應該對齊,相應的我們要讓a轉成塊元素，方便我們設置寬度，帶來的問題就是日期換行了，所以添加個float。我們還可以為鏈接添加背景小圖標。當鼠標懸停時可以更換背景圖標。
#main  .container ul li a{
 width:380px;display:block;float:left; 
 color:#333;padding-left:13px;
 background: url(p_w_picpaths/ss.png) no-repeat 0 50%;
} 

#main  .container ul li a:hover{
 background: url(p_w_picpaths/ss2.png) no-repeat 0 50%;color:#133d72
}
凡是使用.container這個class的div都具有統一的效果。
最后給大家一個完整的HTML代碼：
<div class="top">
 <div id="top">   
    <p>css教程吧歡迎您！</p>
    </div>
</div>
<div id="header">
 <h2>
    <a href="#">css教程</a>
    </h2>

</div>
<div class="nav">
<div id="nav">
<ul>
<li ><a href="#">網站首頁</a>|</li>
   <li><a href="#">CSS基礎</a>|</li>
   <li><a href="#">CSS基礎</a>|</li>
   <li><a href="#">CSS基礎</a>|</li>
   <li><a href="#">CSS基礎</a>|</li>
               <li><a href="#">CSS基礎</a>|</li> 
                <li><a href="#">CSS基礎</a>|</li>
                    <li><a href="#">CSS基礎</a></li>
   
   
  </ul>

</div>
</div>
<div id="banner">
banner
</div>
<div id="main">
 <div class="left">
       <div class="container">
     <h4><a href="#">CSS基礎</a></h4>
        <dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">Css基礎欄目</dd>
            <dd>文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介</dd>
        </dl>
        <ul>
         <li><a href="#">新聞標新聞標題新聞標題新聞標標題題</a><span>2015-5-1</span></li>
           ……
        </ul>
        </div>
         <div class="container">
     <h4><a href="#">CSS技巧</a></h4>
         <dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">asp.net基礎欄目</dd>
            <dd>文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介</dd>
        </dl>
        <ul>
         <li><a href="#">新聞標新聞標題新聞標題新聞標標題題</a><span>2015-5-1</span></li>
           ……
        </ul>
        </div>
    </div>
    <div class="right">
   <div class="container">
     <h4><a href="#">CSS3基礎</a></h4>
        <dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">asp.net基礎欄目</dd>
            <dd>文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介</dd>
        </dl>
        <ul>
         <li><a href="#">新聞標新聞標題新聞標題新聞標標題題</a><span>2015-5-1</span></li>
           ……
        </ul>
        </div>
          <div class="container">
     <h4><a href="#">CSS基礎</a></h4>
        <dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">asp.net基礎欄目</dd>
            <dd>文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介</dd>
        </dl>
        <ul>
        <li><a href="#">新聞標新聞標題新聞標題新聞標標題題</a><span>2015-5-1</span></li>
           ……
        </ul>
        </div>
    </div>
</div>
CSS代碼：
*{padding:0;margin:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.top{width:100%;background:#f5f5f5;height:35px;}

#top,#header,#nav,#banner,#main{width:970px;margin:0 auto;}
#top p{font-size:13px;line-height:35px;}
#header h2 a{
 background:url(p_w_picpaths/logo.png) no-repeat 0 50%;
 display:block;
 width:215px;height:60px;
 text-indent:-9999px;
 }
.nav{width:100%;height:50px;background:#1a539c;}
ul li{list-style:none;}

#nav ul li{float:left;line-height:50px;color:#133d72;text-align:center;}
#nav ul li a{color:#fff;font-size:14px;display:block;width:114px;text-decoration:none;float:left;}
#nav ul li a:hover{background:#133d72;text-decoration:underline;}
#banner{height:50px;}

#main .left{width:473px;margin-right:20px;float:left;}
#main .right{width:473px;float:left;}
#main  .container{border:1px solid #ddd;margin-top:10px;}
#main  .container h4{
 background:url(p_w_picpaths/lbj.jpg) repeat-x;height:31px;
 text-indent:20px;
 }
#main  .container h4 a{
 color:#133d72;font-size:15px;
 line-height:31px;
 }
#main  .container dl{
 padding:10px;
 border-bottom:1px dashed #ccc;height:78px;
 }
#main  .container dl dt{
 float:left;margin-right:10px;} 
#main  .container dl dd.biaoti{
 font-size:14px;line-height:25px;
 } 
#main  .container dl dd{
 line-height:22px;font-size:13px;
 }
#main  .container ul{
 padding:10px;background:#fbfbfb;
 } 
#main  .container ul li{
 height:28px;line-height:28px;
 border-bottom:1px solid #f1f1f1;
 
 font-size:13px;
 } 
#main  .container ul li a{
 width:380px;display:block;float:left; 
 color:#333;padding-left:13px;
 background: url(p_w_picpaths/ss.png) no-repeat 0 50%;
} 
#main  .container ul li a:hover{
 background: url(p_w_picpaths/ss2.png) no-repeat 0 50%;color:#133d72
 }