类似上下结构的上标题下简介列表DIV CSS布局实例模块
大标题+简单简介列表模块CSS布局，布局讲解、图文+代码介绍，在线演示，打包下载该模块完整源代码。
上标题下简介上下结构列表CSS布局效果截图
布局这样的模块，标题一般只占一行，标题文字过多自动换行的文字将自动隐藏处理，简介内容字数控制来显示最多两排，通常程序员会考虑调用最多多少个文字字数。
一、DIVCSS模块布局分析
从局部模块分析很容易找到规律，每列都是标题+简介方式布局，下边出现下边框线效果。找到这样规律一般我们不用DIV布局这样列表局部，一般采用ul li列表标签来布局这样有规律列表。
在布局这样局部模块时，从分析上看到标题文字比较大、简介文字比较小，通常标题我们使用h3布局，简介我们就使用div布局即可。
二、CSS局部布局准备
初始化模板准备：为了兼容各大浏览器仍然使用HTML8提供初始化模板，在此基础上进行此模块的布局。以免不兼容各大浏览器。
在提供初始化模板基础上进行基础修改，以适应本局部模块CSS布局。
因为本局部DIV+CSS制作模块案例没有涉及图片或背景图片，所以不需要准备切出图片素材。
三、局部布局关键HTML+CSS代码与效果截图
1、关键HTML代码
- <ul class="list">
- <li>
- <h3><a href="#" target="_blank">大卖场转战便利店零售巨头再寻转型</a></h3>
- <div>就是为了配合未来在华扩张发展，并整合供国市场已开始尝试便利店业态经营，
成熟后以特许经营模式进行全国扩张...</div>- </li>
- <li>
- <h3><a href="#" target="_blank">大卖场转战便利店零售巨头再寻转型 长点标题也不会换行占位</a></h3>
- <div>就是为了配合未来在华扩张发展，并整合供国市场已开始尝试便利店业态经营，
成熟后以特许经营模式进行全国扩张...</div>- </li>
- <li>
- <h3><a href="#" target="_blank">大卖场转战便利店零售巨头再寻转型</a></h3>
- <div>就是为了配合未来在华扩张发展，并整合供国市场已开始尝试便利店业态经营，
成熟后以特许经营模式进行全国扩张...</div>- </li>
- <li>
- <h3><a href="#" target="_blank">大卖场转战便利店零售巨头再寻转型</a></h3>
- <div>就是为了配合未来在华扩张发展，并整合供国市场已开始尝试便利店业态经营，
成熟后以特许经营模式进行全国扩张...</div>- </li>
- </ul>
以上用到文字内容为互联网任意复制来的一些文字做测试占位。
关键注意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布局效果截图
四、在线演示与打包下载
1、在线演示
五、本CSS模块布局小结
遇到有规律类似列表布局的，一般要想到使用UL LI列表布局，而本CSS DIV局部模块布局中，li里又分为上下结构，上为标题、下为简介，因为每个li里只有1个标题和一个简介局部，所以就直接用h3和div布局标题和简介，不需要加class命名从而节约代码。