CSS完成一个文章网页的布局教程-创新互联

   

css教程网站欢迎您！

   

实现居中布局就可以了
.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代码：

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代码:

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;}

主题内容为两列布局

先把两列布局实现了，在去写里面的内容。PS（先给内容做个标记）如下



首先给外侧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

asp.net基础

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;
 } 栏目简介统一的使用叙述清单，

         

           

asp.net基础栏目

           

文字简介文字简介文字简介文字简介文字简介文字简介文字简介文字简介

叙述清单特别适用于有图，有标题，有简介这样的网页表现形式。网页中上方式图片下方是标题使用叙述清单更简单
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;
 } 下方典型是一个新闻列表形式。

• 新闻标新闻标题新闻标标题题2015-5-1

……

我们首先为新闻列表添加背景颜色和内边距
#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代码：

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://cxhlcq.com/article/dcdeoo.html