图标按钮、淘宝分类栏目在线制作、免费网页按钮设计素材 第1页 - 朝夕网
当前位置： >
在线图标按钮模板和素材
1-20/152 记录1/8 页首页上一页1转到页跳至
为你的网站导航换一套漂亮的按钮图片吗?为你的论坛版面加上几个漂亮的图标吗?现在访问朝夕网,一些列按钮和图标制作模板,包含常见的水晶按钮制作,个性按钮图标设计,快速链接简单制作素材,以后制作网页按钮不再困难.我们都知道普通按钮没有任何美感,现在图片化的按钮会非常漂亮的
Copyright & 2014 www.zhaoxi.net. All Rights Reserved后使用快捷导航没有帐号？
只需一步，快速开始
查看: 1803|回复: 4
淘宝的便民服务的图标的效果是如何能做到的
UID17379在线时间 小时积分599帖子离线17043 天注册时间
高级会员, 积分 599, 距离下一级还需 401 积分
&div class=&conve-bd&&
&div class=&conve-bd-wrap&&
&div id=&J_conveBd& class=&conve-bd-inner conve-pc&&
&a data-name=&phone& class=&mod J_mod& href=&/?ks-menu=cz& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&p&话费&/p&
&span class=&mod-arrow&&
&span&&/span&
&a data-name=&game& class=&mod J_mod& href=&& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&p&游戏&/p&
&span class=&mod-arrow&&
&span&&/span&
&a data-name=&trip& class=&mod J_mod& href=&& data-spm-anchor-id=&1.& style=&position:&&
&i class=&iconfont&&&/i&
&p&旅行&/p&
&span class=&mod-arrow&&
&span&&/span&
&a data-name=&baoxian& class=&mod J_mod mod-hover& href=& /& data-spm-anchor-id=&1.& style=&position:&&
&i class=&iconfont&&&/i&
&p&保险&/p&
&span class=&mod-arrow&&
&span&&/span&
&a class=&mod J_mod& href=&/?t=1&ad_id=&am_id=b41fb5276&cm_id=&pm_id=& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&p&彩票&/p&
&a class=&mod J_mod& href=&& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&p&电影票&/p&
&a class=&mod J_mod& href=&/shop_list.htm& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&a class=&mod J_mod& href=&& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&a class=&mod J_mod& href=& /& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&a class=&mod J_mod& href=&/& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&a class=&mod J_mod& href=&/market/sdmjf2011.php& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&a title=&敬待更多便民服务& target=&_self& class=&mod mod-default J_mod& href=&javascript:;& data-spm-anchor-id=&1.&&
&i class=&iconfont&&&/i&
&提示：您可以先修改部分代码再运行
看了代码好奇怪，那些并不是图片的图标，而是一个怪字符，
如果要做成这样的效果，要如何做才能做到呢
本帖子中包含更多资源
才可以下载或查看，没有帐号？
UID176496在线时间 小时积分8489帖子离线17043 天注册时间
本帖最后由 faeng220 于
21:02 编辑
关键点是于CSS中声明的 &字体&.
@font-face{
font-family:global-
src:url(/tb/icon-font/1.1.2/iconfont.eot);
src:url(/tb/icon-font/1.1.2/iconfont.eot?#iefix) format(&embedded-opentype&)
url(/tb/icon-font/1.1.2/iconfont.woff) format(&woff&)
url(/tb/icon-font/1.1.2/iconfont.ttf) format(&truetype&)
url(/tb/icon-font/1.1.2/iconfont.svg#uxiconfont) format(&svg&)
}& &
复制代码下面的代码如果点&运行代码&之后打开没效果,可以关掉打开的窗口,再点一次&运行代码&.
&!DOCTYPE html&
&meta charset=&gbk&&
&link rel=&stylesheet& href=&/??tb/global/2.2.18/global-min.css,tb/tb-fp/1.4.20/style-min.css?t=&&
&div id=&J_Wrap& class=&wrap wrap-fixed&&
&div class=&screen-bd row-full&&
&div id=&J_BdMain& class=&cont&&
&div id=&J_BdMain& class=&main&&
&div id=&J_HdMainR& class=&main-r&&
&div class=&main-r-bd&&
&div class=&conve& id=&J_conve& data-spm=&&&
&div class=&conve-hd&&
&h3&便民服务&/h3&
&span class=&conve-hd-p&&
&span class=&conve-hd-arrow&&
&span class=&conve-hd-arrow-i&&
&span&&/span&
&span class=&conve-hd-s iconfont&&&#355&/span&
&div class=&conve-bd&&
&div class=&conve-bd-wrap&&
&div class=&conve-bd-inner& id=&J_conveBd&&
&a href=&/?ks-menu=cz& class=&mod J_mod& data-name=&phone&&
&i class=&iconfont&&&#61505&/i&
&p&话费&/p&
&span class=&mod-arrow&&
&span&&/span&
&a href=&& class=&mod J_mod& data-name=&game&&
&i class=&iconfont&&&#61506&/i&
&p&游戏&/p&
&span class=&mod-arrow&&
&span&&/span&
&a href=&& class=&mod J_mod& data-name=&trip&&
&i class=&iconfont&&&#61507&/i&
&p&旅行&/p&
&span class=&mod-arrow&&
&span&&/span&
&a href=& /& class=&mod J_mod& data-name=&baoxian&&
&i class=&iconfont&&&#61508&/i&
&p&保险&/p&
&span class=&mod-arrow&&
&span&&/span&
&a href=&/?t=1&ad_id=&am_id=b41fb5276&cm_id=&pm_id=& class=&mod J_mod&&
&i class=&iconfont&&&#61509&/i&
&p&彩票&/p&
&a href=&& class=&mod J_mod&&
&i class=&iconfont&&&#61581&/i&
&p&电影票&/p&
&a href=&/shop_list.htm& class=&mod J_mod&&
&i class=&iconfont&&&#61511&/i&
&a href=&& class=&mod J_mod&&
&i class=&iconfont&&&#61515&/i&
&a href=& /& class=&mod J_mod&&
&i class=&iconfont&&&#61513&/i&
&a href=&/& class=&mod J_mod&&
&i class=&iconfont&&&#61514&/i&
&a href=&/market/sdmjf2011.php& class=&mod J_mod&&
&i class=&iconfont&&&#61512&/i&
&a href=&javascript:;& class=&mod mod-default J_mod& target=&_self& title=&敬待更多便民服务&&
&i class=&iconfont&&&#358&/i&
&提示：您可以先修改部分代码再运行
UID657579在线时间 小时积分2009帖子离线17043 天注册时间
银牌会员, 积分 2009, 距离下一级还需 991 积分
看了一下，效果很漂亮，个人认为是这样的：你所说的那个怪字符就相当于二维码，根据怪字符它可以读取对应的图片，作用大概就是防盗防火，好管理，有特色吧，呵呵~
UID406317在线时间 小时积分1896帖子离线17043 天注册时间
银牌会员, 积分 1896, 距离下一级还需 1104 积分
这个应该是个全角空格，用来撑开容器，奥妙猜想应该在data-name上面
UID598773在线时间 小时积分1098帖子离线17043 天注册时间
银牌会员, 积分 1098, 距离下一级还需 1902 积分
这个是字体图标，需要设计的，其实本质上也是文字的一种，可以改变颜色和大小
Powered by