首页 > 代码库 > CSS完成一个文章网页的布局教程
CSS完成一个文章网页的布局教程
我们先分析一下整个网页的结构，整体内容采用的是一个两列布局，导航无限延长的背景，并且添加了分割符号
素材：
第一步： 去掉默认的HTML间距。
*{padding:0;margin:0;}
Ps(我们可以在后期进行修改,根据网页中使用的HTML元素的个数如body,h1,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">
<h1>
<a href="http://www.mamicode.com/#">css教程</a>
</h1>
</div>
CSS编码：
#header h1 a{
background:url(images/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 href="http://www.divcss8.com">网站首页</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">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;} 栏目名称使用h3
<h3><a href="http://www.mamicode.com/#">asp.net基础</a></h3> CSS代码:
#main .container h3{
background:url(images/lbj.jpg) repeat-x;height:31px;
text-indent:20px;
}
#main .container h3 a{
color:#133d72;font-size:15px;
line-height:31px;
} 栏目简介统一的使用叙述清单，
<dl>
<dt><img src="http://www.mamicode.com/images/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="http://www.mamicode.com/#">新闻标新闻标题新闻标标题题</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(images/ss.png) no-repeat 0 50%;
}
#main .container ul li a:hover{
background: url(images/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">
<h1>
<a href="http://www.mamicode.com/#">css教程</a>
</h1>
</div>
<div class="nav">
<div id="nav">
<ul>
<li ><a href="http://www.mamicode.com/#">网站首页</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a>|</li>
<li><a href="http://www.mamicode.com/#">CSS基础</a></li>
</ul>
</div>
</div>
<div id="banner">
banner
</div>
<div id="main">
<div class="left">
<div class="container">
<h3><a href="http://www.mamicode.com/#">CSS基础</a></h3>
<dl>
<dt><img src="http://www.mamicode.com/images/0011.jpg"/></dt>
<dd class="biaoti">Css基础栏目</dd>
<dd>文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介</dd>
</dl>
<ul>
<li><a href="http://www.mamicode.com/#">新闻标新闻标题新闻标题新闻标标题题</a><span>2015-5-1</span></li>
……
</ul>
</div>
<div class="container">
<h3><a href="http://www.mamicode.com/#">CSS技巧</a></h3>
<dl>
<dt><img src="http://www.mamicode.com/images/0011.jpg"/></dt>
<dd class="biaoti">asp.net基础栏目</dd>
<dd>文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介</dd>
</dl>
<ul>
<li><a href="http://www.mamicode.com/#">新闻标新闻标题新闻标题新闻标标题题</a><span>2015-5-1</span></li>
……
</ul>
</div>
</div>
<div class="right">
<div class="container">
<h3><a href="http://www.mamicode.com/#">CSS3基础</a></h3>
<dl>
<dt><img src="http://www.mamicode.com/images/0011.jpg"/></dt>
<dd class="biaoti">asp.net基础栏目</dd>
<dd>文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介</dd>
</dl>
<ul>
<li><a href="http://www.mamicode.com/#">新闻标新闻标题新闻标题新闻标标题题</a><span>2015-5-1</span></li>
……
</ul>
</div>
<div class="container">
<h3><a href="http://www.mamicode.com/#">CSS基础</a></h3>
<dl>
<dt><img src="http://www.mamicode.com/images/0011.jpg"/></dt>
<dd class="biaoti">asp.net基础栏目</dd>
<dd>文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介</dd>
</dl>
<ul>
<li><a href="http://www.mamicode.com/#">新闻标新闻标题新闻标题新闻标标题题</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 h1 a{
background:url(images/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 h3{
background:url(images/lbj.jpg) repeat-x;height:31px;
text-indent:20px;
}
#main .container h3 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(images/ss.png) no-repeat 0 50%;
}
#main .container ul li a:hover{
background: url(images/ss2.png) no-repeat 0 50%;color:#133d72
}
CSS完成一个文章网页的布局教程