R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R

      <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??橹贤急?下名称DIVCSS5学习网局部布局

              上下结构之上图标下名称布局案例DIVCSS5学习网小局部,列表型图文布局应用??槠?。

              上图标下名称??椴季中Ч? style=
              上图标下名称??椴季中Ч?/p>

              一、CSS制作小局部??榉治?   -   TOP

              1、图标不同需要分别切出对应图片素材
              2、每个均上下结构
              3、类似列表布局
              4、每列(个)宽度高度均占相同

              从以上分析一般这种布局我们采用ul li布局,对li放不同图标+文字(上图下文布局),同时也可以对li里的a超链接设置不同的class,将不同图标设置为a背景实现(背景+文字)。

              这里DIVCSS5就选择第二种,对不同li里的a设置不同的class,通过设置不同的图标作为背景。

              二、DIVCSS5小局部??椴季肿急?   -   TOP

              1、初始化模板准备
              为了兼容各大浏览器仍然使用DIVCSS5提供CSS+DIV初始化模板,在此基础上进行此??榈牟季?。以免不兼容各大浏览器。
              在提供初始化模板基础上进行基础修改,以适应本局部CSS??椴季?。

              2、图片素材
              本实例??槊挥衅渌急晖计夭?,只有一个图片内容,只需要切出使用即可,保存到images图片文件夹里即可。

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

              1、关键CSS代码:

              1. ul.listico{ margin:0 auto; width:308px; border:1px solid #EEEEEE; overflow:hidden} 
              2. ul.listico li{ float:left; width:40px; padding:12px 20px 10px 17px} 
              3. ul.listico li a{ display:block; padding-top:34px; height:32px; line-height:32px} 
              4. ul.listico li a.ico1{ background:url(ico-1.gif) no-repeat center 0} 
              5. ul.listico li a.ico2{ background:url(ico-2.gif) no-repeat center 0} 
              6. ul.listico li a.ico3{ background:url(ico-3.gif) no-repeat center 0} 
              7. ul.listico li a.ico4{ background:url(ico-4.gif) no-repeat center 0} 
              8. ul.listico li a.ico5{ background:url(ico-5.gif) no-repeat center 0} 
              9. ul.listico li a.ico6{ background:url(ico-6.gif) no-repeat center 0} 
              10. ul.listico li a.ico7{ background:url(ico-7.gif) no-repeat center 0} 
              11. ul.listico li a.ico8{ background:url(ico-8.gif) no-repeat center 0} 

              使用ul li列表布局,对li设置一定宽度及使用css padding设置上下左右间距,再对a设置display:block(作用:让对a设置的CSS宽度 高度生效,同时其它地方使用可作为独占一行和隐藏后的显示作用),再对a设置不同class,分别设置对应图标作为背景,通过padding-top让文字靠下显示。

              2、关键HTML代码

              1. <ul class="listico"> 
              2.     <li><a href="#" target="_blank" class="ico1">话费</a></li> 
              3.     <li><a href="#" target="_blank" class="ico2">机票</a></li> 
              4.     <li><a href="#" target="_blank" class="ico3">彩票</a></li> 
              5.     <li><a href="#" target="_blank" class="ico4">游戏</a></li> 
              6.     <li><a href="#" target="_blank" class="ico5">旅行</a></li> 
              7.     <li><a href="#" target="_blank" class="ico6">电影票</a></li> 
              8.     <li><a href="#" target="_blank" class="ico7">理财</a></li> 
              9.     <li><a href="#" target="_blank" class="ico8">水电费</a></li> 
              10. </ul> 

              使用html ul li标签布局。

              3、DIVCSS5学习网案例在浏览器效果截图

              css div图标与内容(上下结构)布局浏览器浏览效果截图
              图标与内容(上下结构)布局浏览器浏览效果截图

              四、CSS小局部??樵谙哐菔居胪暾募氪虬略?   -   TOP

              1、在线演示

              查看案例

              2、打包下载(完整图标素材、HTML文件、CSS文件

              五、小结   -   TOP

              本局部案例,首先找到规律点,每个均为图标+文字方式,明显有规律的列表型布局,所以选择UL LI列表布局,每个li里的图标不同,可以直接将图标做html li里使用img标签引入,但这里使用背景方式将图标作为背景使用,这样如果图标鼠标经过悬停时图标有替换变化也方便设置。

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

              我要分享到:

              必备CSS教程 Essential CSS Tutorials

              必备HTML基础教程 Essential HTML Tutorials

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