CSS - 图标列表的写法

目录

主要是应用于前端界面开发中的图标列表显示。

1.制作图标文件

首先将CSS进行图标的分离和显示,导入图标文件。如图:

1.png

2.确定图标位置

根据图标长度和宽度来确定每个小图标位置。一般取横向为Y轴,纵向为X轴。原点位置为(0,0),如图:

2.png

3.CSS编辑

CSS文件中,写定背景图片和每个小图标的分割位置

!!!css
.bank-fudian-bank,
.bank-wzcb{
    background: url("../images/bank.png") no-repeat;
    width: 142px; height: 31px; overflow: hidden;
}
.bank-alipay{background-position: 0 0;}
.bank-icbc{background-position: -150px 0;}
.bank-ccb{background-position: -300px 0;}
.bank-abchina{background-position: 0 -40px;}
.bank-psbc{background-position: -150px -40px;}
.bank-bankcomm{background-position: -300px -40px;}
.bank-cmbchina{background-position: 0 -80px;}
.bank-boc{background-position: -150px -80px;}
.bank-cebbank{background-position: -300px -80px;}
.bank-ecitic{background-position: 0 -120px;}
.bank-spdb{background-position: -150px -120px;}
.bank-cmbc{background-position: -300px -120px;}

4.确定层的位置

确定显示层的位置。其中div的显示方式为overflow:hidden;ul的宽度和li的宽度,可确定一行会显示几个图标。如图:

!!!css
.banklist{overflow:hidden;}
.banklist ul{list-style:none; width:700px;}
.banklist li{float:left; width:160px;}

5.编辑HTML

页面HTML代码中,DIV和ul,li标签的引用和显示如图:

4.png

6.效果演示

3.png

文章最后编辑时间为:2015-11-09 18:15:02

标签: css html

声明:本博客如无特殊说明皆为原创,转载请注明来源:CSS - 图标列表的写法谢谢!

相关文章

精彩评论
  1. 创意礼品 创意礼品  Windows 7 x64 Edition Google Chrome 31.0.1650.63

    很厉害。

发表评论:

icon_question.pngicon_razz.pngicon_sad.pngicon_evil.pngicon_exclaim.pngicon_smile.pngicon_redface.pngicon_biggrin.pngicon_surprised.pngicon_eek.pngicon_confused.pngicon_cool.pngicon_lol.pngicon_mad.pngicon_twisted.pngicon_rolleyes.pngicon_wink.pngicon_idea.pngicon_arrow.pngicon_neutral.pngicon_cry.pngicon_mrgreen.png