在我们进行网页布局的时候经常会遇到以下的情况
一排或多排文字上/下/左/右会有对应的小图标或图片,比如下图,
下面是我已经做好的一张精灵图
然后在less中写出样式
其中 background-image:是引入你做好的精灵图,找到相应路径,把图片引进来就行
background-size: 是图片尺寸的意思,也就是调节图片大小,一般都会把它的属性设为 cover
background-position:是背景图片定位,就是把图片定到你想要的位置,后面跟单位像素值来调节,第一个代表x轴方向(水平方向),第二个代表y轴方向(垂直方向)
剩下就是调整background-position的数值了,需要分别把每个li元素下面的i标签都重新调整一下,因为每个图的宽度都不一样,要顾及到整个盒子的宽度问题,要能放的下这些图,所以每个i标签的宽度也需要重新调整一下
这样的话可以算是做好了,看下做好的效果是什么样子
怎么样,是不是效果还不错,如果觉得还行的话就点个赞呗!!!
本人学识有限 文章多有不足
若有错误 请大方指出 以免误导他人 谢谢!!!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)