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

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

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

素材：

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

第一步：去掉默認(rèn)的HTML間距。
*{padding:0;margin:0;}
Ps(我們可以在后期進(jìn)行修改,根據(jù)網(wǎng)頁(yè)中使用的HTML元素的個(gè)數(shù)如body,h2,div等)
第二步：按效果圖頭部灰色背景但是無(wú)限延長(zhǎng)
HTML代碼：
<div class="top">
<div id="top">
    <p>css教程網(wǎng)站歡迎您！</p>
    </div>
</div>
兩個(gè)DIV嵌套，<div class="top">這個(gè)需要100%添加背景，而內(nèi)側(cè)<div id="top"> 實(shí)現(xiàn)居中布局就可以了
.top{width:100%;background:#f5f5f5;height:35px;}
解釋：寬度100%,添加背景顏色，設(shè)定高度，這樣在縮放網(wǎng)頁(yè)，始終可以看到灰色的背景
#top {width:970px;margin:0 auto;}
解釋：網(wǎng)頁(yè)寬度970像素，使id=top的div元素進(jìn)行居中margin:0 auto;
#top p{font-size:13px;line-height:35px;}
解釋：改變文字大小，就一行宣傳文字，通過(guò)行高（和高度一樣時(shí)間）實(shí)現(xiàn)垂直居中l(wèi)ine-height:35px;
第三步：logo的實(shí)現(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)航的實(shí)現(xiàn),導(dǎo)航需要有一個(gè)無(wú)限延長(zhǎng)的背景，而且導(dǎo)航中間有|線隔開
Html代碼:
<div class="nav">
<div id="nav">
<ul>
<li ><a >網(wǎng)站首頁(yè)</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)的圓點(diǎ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;，只要針對(duì)豎線的。
再讓導(dǎo)航中的A元素具備塊元素，有利于我們?cè)谑髽?biāo)懸停時(shí)添加背景顏色
#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>
先把兩列布局實(shí)現(xiàn)了，在去寫里面的內(nèi)容。PS（先給內(nèi)容做個(gè)標(biāo)記）如下

<div class="left">
</div>

首先給外側(cè)id="main"的div使其居中。計(jì)算左右的寬度(根據(jù)盒模型)，添加浮動(dòng)屬性
CSS代碼；
#main .left{width:473px;margin-right:20px;float:left;}
#main .right{width:473px;float:left;}
確定完左右后，內(nèi)容是一樣的效果，距離頂部有間隔，有邊線。把內(nèi)容統(tǒng)一添加一個(gè)class為container 的DIV,對(duì)其添加樣式
#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;
} 欄目簡(jiǎn)介統(tǒng)一的使用敘述清單，
<dl>
        <dt><img src="p_w_picpaths/0011.jpg"/></dt>
            <dd class="biaoti">asp.net基礎(chǔ)欄目</dd>
            <dd>文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介</dd>
</dl> 敘述清單特別適用于有圖，有標(biāo)題，有簡(jiǎn)介這樣的網(wǎng)頁(yè)表現(xiàn)形式。網(wǎng)頁(yè)中上方式圖片下方是標(biāo)題使用敘述清單更簡(jiǎn)單
CSS代碼：
#main .container dl{
padding:10px;
border-bottom:1px dashed #ccc;height:78px;
}
解釋：讓dl整體距離邊框留一定間距（padding:10px;）。添加一個(gè)距下方的虛線（border-bottom:1px dashed #ccc;），并設(shè)定高度。
#main .container dl dt{
float:left;margin-right:10px;}
解釋：進(jìn)行浮動(dòng)
#main .container dl dd.biaoti{
font-size:14px;line-height:25px;
}
解釋：為 dd添加一個(gè)class，由于該class是給dd使用的，直接寫成dd.biaoti，一定注意不要帶空格，空格的選擇符表示包含的意思。
#main .container dl dd{
line-height:22px;font-size:13px;
} 下方典型是一個(gè)新聞列表形式。
<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)該對(duì)齊,相應(yīng)的我們要讓a轉(zhuǎn)成塊元素，方便我們?cè)O(shè)置寬度，帶來(lái)的問(wèn)題就是日期換行了，所以添加個(gè)float。我們還可以為鏈接添加背景小圖標(biāo)。當(dāng)鼠標(biāo)懸停時(shí)可以更換背景圖標(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這個(gè)class的div都具有統(tǒng)一的效果。
最后給大家一個(gè)完整的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)站首頁(yè)</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>文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介</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>文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介</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>文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介</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>文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介文字簡(jiǎn)介</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è)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證，機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

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

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

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

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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