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

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

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

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

一、DIVCSS模块布局分析   -   TOP

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

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

二、CSS局部布局准备   -   TOP

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

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

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

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

1、关键HTML代码

大卖场转战便利店零售巨头再寻转型

大卖场转战便利店零售巨头再寻转型 长点标题也不会换行占位

大卖场转战便利店零售巨头再寻转型

大卖场转战便利店零售巨头再寻转型

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

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

2、关键CSS代码

ul.list{ width:356px; margin:0 auto; padding:10px 0}

ul.list li{ padding:4px 0 8px 0; text-align:left; border-bottom:1px solid #EBEBEB}

ul.list li h3{ height:40px; line-height:40px; font-weight:bold;

overflow:hidden; font-size:16px}

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、浏览器测试浏览效果截图

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

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

1、在线演示

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

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

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