页面上一些小icon的制作方法及技术选择

我们经常切片的时候，看到一些小图标,都有些心头小烦。当然我们一般为了兼容多款浏览器。选择保守的切图拼成雪碧图。然后通过background-position去定位到你想要用的图标.

随着我们一步步摒弃兼容性差的浏览器。我们也可以通过不同的技术手段去实现小图标。接下来。我将总结我曾用过的各种方法。实现页面小图标的方法

1. 切下小图标然后拼成位置合理的雪碧图；

通过background-position样式来定位到你想要用的方法。这是最常用的方法；

劣势：当初在wap版运用该方法时遇到了问题。每个小图标呈现在页面上总是有部分其他图标卡在页面上。如下图

这是chrome浏览器开发工具所呈现的效果，不细看是看不出来的。但只在iphone4下观看，会发现图标严重没对齐。

思考方向：我认真排查html及css的问题。最后我自己重新写demo,运用淘宝的移动端运用的技术flexible.js，得到解决。

总结：之所以造成这种原因，是因为我们的页面模板中设置根字体的大小精度不够，对于紧凑的背景图定位就会放大这个问题。

当然临时解决方案，就暂时就所有小图标拆开来引用。

优势：这种背景图定位方法，在web端运用是非常好的。页面加载，只需要下载一张背景图片就好。对优化页面加载性能是很好的。

2. 通过html+css实现一些图标

当我们拿到如下图的设计稿：

对于右边的大于符号图标,我们真心懒得切图。当然我们的确可以通过 html+css来实现

html:
<span>></span>css:
span{font-size:20px;font-family: "宋体"；
}

　实现效果还是挺好的：

分析：这种方案在web端是可实现的，但是移动端是无法实现，手机版本太多了，浏览器种类也太多。估计每款手机都不太能渲染出我们要的宋体。

总结：根据自身项目的开发平台和需求，我们可以选择这种方法制作图标

3.css3属性实现

我们依旧参照上图设计稿制作出一个箭头

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>narrow</title>
</head>
<style>div{width: 50px;height: 50px;border:1px solid #fff;border-right:1px solid #333;border-bottom:1px solid #333;transform:rotateZ(-45deg);margin-top:50px;}
</style>
<body><div></div>
</body>
</html>

实现效果：

总结：一看就知道。ie8及以下浏览器是不能支持css3属性的。这个运用还是要看需求方对浏览器的要求了

4. 插入特殊字符实现图标

还是参照以上的设计稿--制作箭头

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>narrow</title>
</head>
<style>body{background: pink}div.narrow{width: 50px;height: 50px;border:1px solid transparent;border-right:1px solid #333;border-bottom:1px solid #333;transform:rotateZ(-45deg);margin-top:50px;}.box{position: relative;width:200px;height: 200px;}.box div{font-size:100px;position: absolute;left:0;top:0;}.box div.black{left:2px;top:0;z-index: 8}.box div.white{z-index: 9}
</style>
<body><div class="narrow"></div><div class="box"><div class="white">◆</div><div class="black">◇</div></div>
</body>
</html>

实现效果：

图上标题4就是通过特殊字符实现的。

总结：一直觉得前端工作相比后端开发，总是多了很多想象力。每个人写出来的页面总是有自己的特色。可能这就是我为什么成为前端工程师并一直坚持下去的魅力所在吧

5.icon-font实现页面图标，不用加载一张图片。

待续：....................

转载于:https://www.cnblogs.com/xiaoxingyiyi/p/5458204.html

页面上一些小icon的制作方法及技术选择相关推荐

php 导出csv文件bom,php 读取 csv 文件后, uft8bom 导致在页面上显示出现问题的解决方法...
php 读取 csv 文件后, uft8bom 导致在页面上显示出现问题的解决方法 date.csv: "ID""NAME""EMAIL" ...
微信小程序的制作方法步骤和流程
从运营的角度讲制作,不是从程序的角度讲开发,所以简单明晰,通俗易懂,小白也能按照流程完成制作. 微信小程序制作步骤及流程 1.确定好微信小程序的的定位和目的如行业,功能,内容,目标用户,目标市场,意 ...
在登陆页面上创造紧迫感的7种方法
你最近是否建立了一个精心设计的登陆页,但却在为获得那些重要的点击和转化率而苦恼?不要担心,你不是第一个面临这个问题的企业,也不会是最后一个.如果你想采取行动,在你的登陆页上创造一种强烈的紧迫感是必不可 ...
如何在JSP页面上找到相应Servlet类及其方法
一.点击jsp页面上的超链接后怎么找到对应的servlet? 首先超链接是一个类似url的东西,在web.xml中有一个标签<url-pattern>,其实它俩也的确是对应关系,然后< ...
csv乱码 ftp_php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
date.csv:"ID" "NAME" "EMAIL" "1" "小明" "xm@163 ...
ArcGIS的ArcToolbox执行任务时没反应或图层上有小锁的解决方法
用破解的ArcGIS经常会遇到执行某个任务,ArcGIS却没有任何反应.然而别人用的同样的破解包,却可以执行. 这是因为安装的ArcGIS的后台处理被开启了,所以ArcGIS中看不到执行任务. 图层上 ...
Win7系统下共享文件夹后共享文件夹上的小锁图标取消方法
故障现象: 共享后的文件夹图标左下角显示锁,取消共享后依然存在(如图所示) 问题分析: Window7中小锁其实是开启简单共享后,文件本身访问权限受限的标识.添加所有用户权限后可以消失. 解决方法: ...
制作一个amp页面-谷歌移动加速器AMP网页制作方法
这篇博客将给大家带来一系列技术性的东西,大家看好了哦,本篇给大家说点什么呢-amp,这个东西是谷歌搞出的针对移动优化的,和百度mip是一样的东西,关于哪家的好呢,这个还真不好评说,海豚的建议是amp和 ...
html5 div 拱桥形状制作,新型上承式拱桥的制作方法
本实用新型属于一种拱桥体系,具体涉及了一种新型上承式拱桥. 背景技术: 拱桥以承受轴向压力为主的拱圈或拱肋作为主要承重构件的桥梁,拱结构由拱圈(拱肋)及其支座组成.中国的拱桥始建于东汉中后期,已有一千 ...

页面上一些小icon的制作方法及技术选择

页面上一些小icon的制作方法及技术选择相关推荐

最新文章

热门文章