欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS模块 >

DIVCSS5模块 上标题下简介列表DIV CSS布局

类似上下结构的上标题下简介列表DIV CSS布局实例模块

大标题+简单简介列表模块CSS布局,布局讲解、图文+代码介绍,在线演示,打包下载该模块完整源代码

上标题下简介上下结构列表CSS布局
上标题下简介上下结构列表CSS布局效果截图

布局这样的模块,标题一般只占一行,标题文字过多自动换行的文字将自动隐藏处理,简介内容字数控制来显示最多两排,通常程序员会考虑调用最多多少个文字字数。

一、DIVCSS模块布局分析   -   TOP

从局部模块分析很容易找到规律,每列都是标题+简介方式布局,下边出现下边框线效果。找到这样规律一般我们不用DIV布局这样列表局部,一般采用ul li列表标签来布局这样有规律列表。

在布局这样局部模块时,从分析上看到标题文字比较大、简介文字比较小,通常标题我们使用h3布局,简介我们就使用div布局即可。

二、CSS局部布局准备   -   TOP

初始化模板准备:为了兼容各大浏览器仍然使用DIVCSS5提供初始化模板,在此基础上进行此模块的布局。以免不兼容各大浏览器。

在提供初始化模板基础上进行基础修改,以适应本局部模块CSS布局。

因为本局部DIV+CSS制作模块案例没有涉及图片或背景图片,所以不需要准备切出图片素材。

三、局部布局关键HTML+CSS代码与效果截图   -   TOP

1、关键HTML代码

  1. <ul class="list"> 
  2.     <li> 
  3.         <h3><a href="#" target="_blank">大卖场转战便利店零售巨头再寻转型</a></h3> 
  4.         <div>就是为了配合未来在华扩张发展,并整合供国市场已开始尝试便利店业态经营,
    成熟后以特许经营模式进行全国扩张...
    </div> 
  5.     </li> 
  6.      
  7.     <li> 
  8.         <h3><a href="#" target="_blank">大卖场转战便利店零售巨头再寻转型 长点标题也不会换行占位</a></h3> 
  9.         <div>就是为了配合未来在华扩张发展,并整合供国市场已开始尝试便利店业态经营,
    成熟后以特许经营模式进行全国扩张...
    </div> 
  10.     </li> 
  11.     <li> 
  12.         <h3><a href="#" target="_blank">大卖场转战便利店零售巨头再寻转型</a></h3> 
  13.         <div>就是为了配合未来在华扩张发展,并整合供国市场已开始尝试便利店业态经营,
    成熟后以特许经营模式进行全国扩张...
    </div> 
  14.     </li> 
  15.     <li> 
  16.         <h3><a href="#" target="_blank">大卖场转战便利店零售巨头再寻转型</a></h3> 
  17.         <div>就是为了配合未来在华扩张发展,并整合供国市场已开始尝试便利店业态经营,
    成熟后以特许经营模式进行全国扩张...
    </div> 
  18.     </li> 
  19. </ul> 

以上用到文字内容为互联网任意复制来的一些文字做测试占位。

关键注意ul li使用布局实现本案例实例模块。

2、关键CSS代码

  1. ul.list{ width:356px; margin:0 auto; padding:10px 0} 
  2. ul.list li{ padding:4px 0 8px 0; text-align:left; border-bottom:1px solid #EBEBEB} 
  3. ul.list li h3{ height:40px; line-height:40px; font-weight:bold; 
    overflow:hidden; font-size:16px} 
  4. ul.list li div{ height:44px; overflow:hidden} 

因为在每个li里分别只出现一次h3和div,所以直接对h3和div设置CSS样式,没有新CSS命名class,从而节约代码。

在对h3和div分别使用overflow:hidden说明,使用此css样式,是为了避免文字过多,超出限制高度自动换行,所以这里使用overflow:hidden CSS隐藏超出内容的作用。

3、浏览器测试浏览效果截图

DIV+CSS布局 上标题下简介CSS布局效果截图
上标题下简介CSS布局效果截图

四、在线演示与打包下载   -   TOP

1、在线演示

查看案例

2、打包下载完整HTML源代码(CSS文件+HTML文件

五、本CSS模块布局小结   -   TOP

遇到有规律类似列表布局的,一般要想到使用UL LI列表布局,而本CSS DIV局部模块布局中,li里又分为上下结构,上为标题、下为简介,因为每个li里只有1个标题和一个简介局部,所以就直接用h3和div布局标题和简介,不需要加class命名从而节约代码。

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2014-12-08 11:18 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。