上图标 下名称DIV CSS局部布局

HTML8模块之上图标 下名称DIV CSS局部布局

上下结构之上图标下名称布局案例CSS小局部，列表型图文布局应用模块篇。

上图标下名称模块布局效果图

一、CSS制作小局部模块分析

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

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

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

二、HTML8小局部模块布局准备

1、初始化模板准备
为了兼容各大浏览器仍然使用HTML8提供CSS+DIV初始化模板，在此基础上进行此模块的布局。以免不兼容各大浏览器。
在提供初始化模板基础上进行基础修改，以适应本局部CSS模块布局。

2、图片素材
本实例模块没有其它图标图片素材，只有一个图片内容，只需要切出使用即可，保存到images图片文件夹里即可。

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

1、关键CSS代码：

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

<ul class="listico"> 
    <li><a href="#" target="_blank" class="ico1">话费</a></li> 
    <li><a href="#" target="_blank" class="ico2">机票</a></li> 
    <li><a href="#" target="_blank" class="ico3">彩票</a></li> 
    <li><a href="#" target="_blank" class="ico4">游戏</a></li> 
    <li><a href="#" target="_blank" class="ico5">旅行</a></li> 
    <li><a href="#" target="_blank" class="ico6">电影票</a></li> 
    <li><a href="#" target="_blank" class="ico7">理财</a></li> 
    <li><a href="#" target="_blank" class="ico8">水电费</a></li> 
</ul> 

使用html ul li标签布局。

3、CSS布局案例在浏览器效果截图

图标与内容（上下结构）布局浏览器浏览效果截图

四、CSS小局部模块在线演示与完整文件代码打包下载

1、在线演示

查看案例

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

五、小结

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