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
}
創新互聯www.cdcxhl.cn，專業提供香港、美國云服務器，動態BGP最優骨干路由自動選擇，持續穩定高效的網絡助力業務部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統配攻擊溯源，準確進行流量調度，確保服務器高可用性。佳節活動現已開啟，新人活動云服務器買多久送多久。
網站欄目：CSS完成一個文章網頁的布局教程-創新互聯
文章網址：http://m.newbst.com/article0/dcdeoo.html
成都網站建設公司_創新互聯，為您提供網站營銷、搜索引擎優化、ChatGPT、外貿建站、品牌網站建設、網頁設計公司
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 自助建站和定制網站都是付費的差別在那里呢? 2023-03-05
- 高端定制網站高端在哪里？ 2017-01-06
- 定制網站的優勢是什么？ 2014-04-20
- 恩平模板建站與定制網站開發哪個好？ 2021-01-03
- 網站模版與定制網站建設的區別有哪些？ 2022-06-15
- 成都高端定制網站建設公司哪家好？ 2016-09-23
- 為什么要選擇定制網站,定制網站好處在哪里？ 2016-11-08
- 網頁設計公司為教育定制網站的作用 2016-10-22
- 定制網站建設相較于其他網站有何優勢？_成都網站建設創新互聯科技 2021-12-15
- 臨沂定制網站制作：模板建站和定制網站該如何選？ 2021-10-16
- 濱城模板和定制網站建設有什么區別？ 2020-12-19
- 定制網站對企業有哪些意義？ 2021-10-21