a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a

      <noframes id="LVXRHZN"><address id="LVXRHZN"><nobr id="LVXRHZN"></nobr></address>

      <noframes id="LVXRHZN"><noframes id="LVXRHZN"><address id="LVXRHZN"><listing id="LVXRHZN"></listing></address>
      <sub id="LVXRHZN"></sub>

        <sub id="LVXRHZN"></sub>
        <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>

        <sub id="LVXRHZN"></sub>

        <address id="LVXRHZN"></address>

        <address id="LVXRHZN"></address>
        <noframes id="LVXRHZN">

          <noframes id="LVXRHZN">
          <sub id="LVXRHZN"></sub>
              <address id="LVXRHZN"><listing id="LVXRHZN"><menuitem id="LVXRHZN"></menuitem></listing></address>
            1. 820466150 2017-11-04
            2. 388113149 2017-11-04
            3. 740898148 2017-11-04
            4. 892683147 2017-11-04
            5. 540252146 2017-11-04
            6. 888745145 2017-11-04
            7. 981419144 2017-11-04
            8. 544637143 2017-11-04
            9. 454205142 2017-11-04
            10. 212476141 2017-11-04
            11. 39821140 2017-11-04
            12. 170835139 2017-11-03
            13. 37766138 2017-11-03
            14. 538854137 2017-11-03
            15. 926181136 2017-11-03
            16. 18188135 2017-11-03
            17. 420335134 2017-11-03
            18. 553276133 2017-11-03
            19. 4149132 2017-11-02
            20. 883561131 2017-11-02
            21. 891189130 2017-11-02
            22. 649552129 2017-11-02
            23. 950957128 2017-11-02
            24. 295914127 2017-11-02
            25. 781243126 2017-11-02
            26. 682892125 2017-11-02
            27. 829649124 2017-11-02
            28. 168426123 2017-11-01
            29. 406171122 2017-11-01
            30. 724134121 2017-11-01
            31. “砥砺奋进的五年”大型成就展
            32. “总书记的回信说到了我们心坎上”
            33. 德媒:拒绝“洋垃圾”——肮脏的游戏,中国不玩了
            34. 求实创造 为人师表
            35. 家长群里质疑老师收礼排座位 被班主任踢出家长群
            36. 两手抓两促进 打造坚强战斗堡垒
            37. 新论:党章,每个党员都需时刻铭记
            38. 谁击落了MH17?各方互相指责
            39. 互联网用户公众账号信息服务管理规定
            40. 台籍律师在大陆 就业+创业不是“梦”
            41. 法国总统说政治对话是保证叙利亚实现可持续和平的唯一办法
            42. 天胶“保险+期货”精准扶贫首批给付500万 惠及云南临沧400余建档贫困户
            43. [征集]资深网友看这里 新时代老人们希望何种"夕阳红"
            44. 近千家A股公司三季报业绩预喜
            45. 台媒吹台特种兵“斩首”能力一流:堪比海豹三角洲
            46. 欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
              您的位置:DIVCSS5学习网 > DIV+CSS???/a> >

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

              类似上下结构的上标题下简介列表DIVCSS5学习网布局实例???/p>

              大标题+简单简介列表???a href="http://www.tommstudio.com/">CSS布局,布局讲解、图文+代码介绍,在线演示,打包下载该??橥暾?a href="http://www.tommstudio.com/html/h26.shtml">源代码。

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

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

              一、DIVCSS??椴季址治?   -   TOP

              从局部??榉治龊苋菀渍业焦媛?,每列都是标题+简介方式布局,下边出现下边框线效果。找到这样规律一般我们不用DIV布局这样列表局部,一般采用ul li列表标签来布局这样有规律列表。

              在布局这样局部??槭?,从分析上看到标题文字比较大、简介文字比较小,通常标题我们使用h3布局,简介我们就使用DIVCSS5学习网布局即可。

              二、CSS局部布局准备   -   TOP

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

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

              因为本局部DIVCSS5学习网制作??榘咐挥猩婕巴计虮尘巴计?,所以不需要准备切出图片素材。

              三、局部布局关键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列表布局,而本DIVCSS5学习网局部??椴季种?,li里又分为上下结构,上为标题、下为简介,因为每个li里只有1个标题和一个简介局部,所以就直接用h3和div布局标题和简介,不需要加class命名从而节约代码。

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

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

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