欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > DIV+CSS模块 >

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

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

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

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

一、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、CSS布局案例在浏览器效果截图

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

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

1、在线演示

查看案例

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

五、小结   -   TOP

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

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

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

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