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

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

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

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

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

一、DIVCSS模块布局分析   -   TOP

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

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

二、CSS局部布局准备   -   TOP

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

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

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

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

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 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{ 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}
ul.list{ 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布局效果截图

 

本CSS模块布局小结   -   TOP

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