CSS完成一個文章網(wǎng)頁的布局教程

我們先分析一下整個網(wǎng)頁的結(jié)構(gòu)，整體內(nèi)容采用的是一個兩列布局，導(dǎo)航無限延長的背景，并且添加了分割符號

素材：

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

主題內(nèi)容為兩列布局
<div id="main">
 <div class="left">
</div>
    <div class="right">
    </div>
</div>
先把兩列布局實現(xiàn)了，在去寫里面的內(nèi)容。PS（先給內(nèi)容做個標記）如下
<!--通過備注，布局的左側(cè)內(nèi)容開始-->
<div class="left">
</div>
<!--通過備注，布局的左側(cè)內(nèi)容結(jié)束-->
首先給外側(cè)id="main"的div使其居中。計算左右的寬度(根據(jù)盒模型)，添加浮動屬性
CSS代碼；
#main .left{width:473px;margin-right:20px;float:left;}
#main .right{width:473px;float:left;}
確定完左右后，內(nèi)容是一樣的效果 ，距離頂部有間隔，有邊線。把內(nèi)容統(tǒng)一添加一個class為container 的DIV,對其添加樣式
#main  .container{border:1px solid #ddd;margin-top:10px;} 欄目名稱使用h4
<h4><a href="#">asp.net基礎(chǔ)</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;
 } 欄目簡介統(tǒng)一的使用敘述清單，
<dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">asp.net基礎(chǔ)欄目</dd>
            <dd>文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介</dd>
</dl> 敘述清單特別適用于有圖，有標題，有簡介這樣的網(wǎng)頁表現(xiàn)形式。網(wǎng)頁中上方式圖片下方是標題使用敘述清單更簡單
CSS代碼：
#main  .container dl{
 padding:10px;
 border-bottom:1px dashed #ccc;height:78px;
 }
解釋：讓dl整體距離邊框留一定間距（padding:10px;）。添加一個距下方的虛線（border-bottom:1px dashed #ccc;），并設(shè)定高度。
#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> 我們首先為新聞列表添加背景顏色和內(nèi)邊距
#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;
}
新聞標題和日期應(yīng)該同行顯示，并且日期相應(yīng)應(yīng)該對齊,相應(yīng)的我們要讓a轉(zhuǎn)成塊元素，方便我們設(shè)置寬度，帶來的問題就是日期換行了，所以添加個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都具有統(tǒng)一的效果。
最后給大家一個完整的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="#">網(wǎng)站首頁</a>|</li>
   <li><a href="#">CSS基礎(chǔ)</a>|</li>
   <li><a href="#">CSS基礎(chǔ)</a>|</li>
   <li><a href="#">CSS基礎(chǔ)</a>|</li>
   <li><a href="#">CSS基礎(chǔ)</a>|</li>
               <li><a href="#">CSS基礎(chǔ)</a>|</li> 
                <li><a href="#">CSS基礎(chǔ)</a>|</li>
                    <li><a href="#">CSS基礎(chǔ)</a></li>
   
   
  </ul>

</div>
</div>
<div id="banner">
banner
</div>
<div id="main">
 <div class="left">
       <div class="container">
     <h4><a href="#">CSS基礎(chǔ)</a></h4>
        <dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">Css基礎(chǔ)欄目</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基礎(chǔ)欄目</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基礎(chǔ)</a></h4>
        <dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">asp.net基礎(chǔ)欄目</dd>
            <dd>文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介文字簡介</dd>
        </dl>
        <ul>
         <li><a href="#">新聞標新聞標題新聞標題新聞標標題題</a><span>2015-5-1</span></li>
           ……
        </ul>
        </div>
          <div class="container">
     <h4><a href="#">CSS基礎(chǔ)</a></h4>
        <dl>
         <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">asp.net基礎(chǔ)欄目</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
 }