CSS完成一個文章網(wǎng)頁的布局教程-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為安遠(yuǎn)企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計、成都做網(wǎng)站，安遠(yuǎn)網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

素材：

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

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

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

第一步： 去掉默認(rèn)的HTML間距。
*{padding:0;margin:0;}
Ps(我們可以在后期進(jìn)行修改,根據(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元素進(jìn)行居中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;再進(jìn)行寬高指定。最后讓文字縮進(jìn)。使用大的負(fù)值，從屏幕移除文字
第四步：導(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，所以去掉默認(rèn)的圓點
ul li{list-style:none;}
進(jìn)行導(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元素具備塊元素，有利于我們在鼠標(biāo)懸停時添加背景顏色
#nav ul li a{color:#fff;font-size:13px;display:block;width:114px;text-decoration:none;float:left;}
鼠標(biāo)懸停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)容做個標(biāo)記）如下
<!--通過備注，布局的左側(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> 敘述清單特別適用于有圖，有標(biāo)題，有簡介這樣的網(wǎng)頁表現(xiàn)形式。網(wǎng)頁中上方式圖片下方是標(biāo)題使用敘述清單更簡單
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;}
解釋：進(jìn)行浮動
#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="#">新聞標(biāo)新聞標(biāo)題新聞標(biāo)標(biāo)題題</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;
}
新聞標(biāo)題和日期應(yīng)該同行顯示，并且日期相應(yīng)應(yīng)該對齊,相應(yīng)的我們要讓a轉(zhuǎn)成塊元素，方便我們設(shè)置寬度，帶來的問題就是日期換行了，所以添加個float。我們還可以為鏈接添加背景小圖標(biāo)。當(dāng)鼠標(biāo)懸停時可以更換背景圖標(biāo)。
#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="#">新聞標(biāo)新聞標(biāo)題新聞標(biāo)題新聞標(biāo)標(biāo)題題</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="#">新聞標(biāo)新聞標(biāo)題新聞標(biāo)題新聞標(biāo)標(biāo)題題</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="#">新聞標(biāo)新聞標(biāo)題新聞標(biāo)題新聞標(biāo)標(biāo)題題</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="#">新聞標(biāo)新聞標(biāo)題新聞標(biāo)題新聞標(biāo)標(biāo)題題</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
 }

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

網(wǎng)站欄目：CSS完成一個文章網(wǎng)頁的布局教程-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://www.muchs.cn/article0/dcdeoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、搜索引擎優(yōu)化、ChatGPT、外貿(mào)建站、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計