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 href="http://www.divcss8.com">网站首页</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完成一个文章网页的布局教程-创新互联
文章网址：https://www.cdcxhl.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