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

我们先分析一下整个网页的结构,整体内容采用的是一个两列布局,导航无限延长的背景,并且添加了分割符号CSS完成一个文章网页的布局教程

成都创新互联公司长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为安远企业提供专业的成都网站设计、成都做网站安远网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

素材:

CSS完成一个文章网页的布局教程

CSS完成一个文章网页的布局教程

CSS完成一个文章网页的布局教程

第一步: 去掉默认的HTML间距。
*{padding:0;margin:0;}
Ps(我们可以在后期进行修改,根据网页中使用的HTML元素的个数如body,h2,div等)
第二步:按效果图头部灰色背景但是无限延长
HTML代码:


 

   

css教程网站欢迎您!


   


两个DIV嵌套,
这个需要100%添加背景,而内侧
实现居中布局就可以了
.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;
 } 下方典型是一个新闻列表形式。
我们首先为新闻列表添加背景颜色和内边距
#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教程吧欢迎您!


   






 

      

     

CSS基础


       

         

           
Css基础栏目

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

       

       
       

        

     

CSS技巧


        

         

           
asp.net基础栏目

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

       

       
       

   

   

  

     

CSS3基础


       

         

           
asp.net基础栏目

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

       

       
       

         

     

CSS基础


       

         

           
asp.net基础栏目

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

       

       
       

   


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