CSS手册CSS3手册Edu网闻
欢迎来到thinkcss查找CSS资料与学习DIV CSS布局技术!
您的位置:ThinkCSS首页 > DIV+CSS模块 >

DIV CSS布局 新闻列表 新闻标题类模板 ThinkCSS模块

DIV CSS布局 新闻列表 新闻标题类模板 ThinkCSS模块,html网页新闻列表UL LI布局模块图文学习与下载。

新闻列表类布局,网页局部新闻标题列表CSS DIV布局篇,新闻列表页面布局在ThinkCSS网其它有对应实例模块,而在网页局部中的,开头第一个标题不同于其它标题列表。

这里我们来实现以下网页截图中其中红色小区域布局。


要DIV+CSS布局的小局部效果截图

一、小模块局部分析   -   TOP

首先看到蓝色标题,与下面黑色标题不同,首先是css字体颜色、然后字体大小也不相同。

通常这种为了兼容各大平台浏览器兼容,一般首个标题“蓝色标题”采用h3h2标签布局,对其设置class引入外部CSS对其设置相应css字体大小css字体颜色等css样式。

而下面的颜色统一、字体大小统一列表类型布局,通常我们采用ul li进行布局。

而ul li标签默认是有圆点但是兼容不好,所以首先去掉ul li的默认样式,这里推荐使用thinkcss初始化模板

二、CSS模块实例   -   TOP

小局部就不逐一详细教大家写代码并解释。这里thinkcss直接给出HTML代码和CSS代码,再对给出关键代码进行介绍解释。

1、小局部对应CSS代码

  1. a{color:#333333;text-decoration:none; }  
  2. a:hover{color:#BD0A01; text-decoration:underline} 
  3. .exp-box{ margin:0 auto; width:310px} 
  4. h3.tit-no1{ font-size:16px; height:30px; overflow:hidden; line-height:30px} 
  5. h3.tit-no1 a{color:#0A4B9D;font-family:"Microsoft YaHei";} 
  6. h3.tit-no1 a:hover{color:#BD0A01} 
  7. ul.newslist li{height:24px; line-height:24px; overflow:hidden; text-align:left} 

模块实例关键CSS代码解释:

  1. a{color:#333333;text-decoration:none; }  
  2. a:hover{color:#BD0A01; text-decoration:underline} 

设置超链接字体颜色和CSS字体下划线效果

  1. .exp-box{ margin:0 auto; width:310px} 

设置一个盒子居中,并且设置固定宽度

  1. h3.tit-no1{ font-size:16px; height:30px; overflow:hidden; line-height:30px} 

设置h3 class=tit-no1的字体大小,高度、行高、 overflow:hidden隐藏超出内容

  1. h3.tit-no1 a{color:#0A4B9D;font-family:"Microsoft YaHei";} 
  2. h3.tit-no1 a:hover{color:#BD0A01} 

设置对应h3字体颜色,和鼠标选中悬停字体颜色

  1. ul.newslist li{height:24px; line-height:24px; overflow:hidden; text-align:left} 

设置一个ul class=newslist对应li高度、行高、内容靠左、隐藏超出内容

2、小局部对应HTML内body内代码

  1. <div class="exp-box"> 
  2. <h3 class="tit-no1"><a href="#">【测试】Pokemon Go火了 任天堂也活了</a></h3> 
  3. <ul class="newslist"> 
  4. <li>·<a href="#">iPhone 7就长这样了 但配色方面有更多选择的</a></li> 
  5. <li>·<a href="#">三星Note 7真机曝光:6英寸大小配双曲面屏</a></li> 
  6. <li>·<a href="#">HTC要发Desire 10 又是一台廉价版HTC 10?</a></li> 
  7. <li>·<a href="#">魅族MX6再曝光:这下真机和实拍样张都有了</a></li> 
  8. <li>·<a href="#">ThinkCSS测试任天堂“起死回生”之路</a></li> 
  9. <li>·<a href="#">ThinkCSS测试</a> | <a href="#">奔驰概念电动车将在9月亮相</a></li> 
  10. </ul> 
  11. </div> 

3、完整CSS代码初始化+小局部对应的CSS代码

  1. @charset "utf-8"; 
  2. /* ThinkCSS - www.thinkcss.com */ 
  3. body, div, ul, li, h2, h3 {margin:0; padding:0;font-style: normal;font:14px/22px "\5B8B\4F53"} 
  4. ol, ul ,li{list-style: none} 
  5. img {border: 0} 
  6. body{color:#333333;background:#FFF; text-align:center;} 
  7.  
  8. a{color:#333333;text-decoration:none; }  
  9. a:hover{color:#BD0A01; text-decoration:underline} 
  10. .exp-box{ margin:0 auto; width:310px} 
  11. h3.tit-no1{ font-size:16px; height:30px; overflow:hidden; line-height:30px} 
  12. h3.tit-no1 a{color:#0A4B9D;font-family:"Microsoft YaHei";} 
  13. h3.tit-no1 a:hover{color:#BD0A01} 
  14.  
  15. ul.newslist li{height:24px; line-height:24px; overflow:hidden; text-align:left} 

完整CSS代码,包括对初始化模板原始CSS更改去掉本模块不适用多余CSS代码,修改适合本实例CSS样式

4、效果截图


css+div新闻列表小局部效果截图

5、新闻标题列表布局小模块在线演示

查看案例

6、新闻标题列表布局小模块打包下载

三、html网页新闻列表局部布局总结   -   TOP

这里使用了h3与ul li列表标签进行布局这个小模块,特别注意是注意对文字字体大小、字体颜色、h3和li高度进行控制设置。一般看到这样列表布局第一想都到使用ul li列表标签布局。

如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/template/m934.shtml

我要分享到:

CSS基础教程 CSS Based Tutorial

HTML基础教程 HTML Based Tutorial

CSS教程文章修订日期:2016-07-13 00:02 www.thinkcss.com ThinkCSS。