常见的小图标制作几种方法

2022-06-28 分类：网站建设

在我们制作网页时，例如导航等，会遇到很多的一些小图标，这里以京东的小三角
（如下图）举例，来介绍常用的一些方法。

方法一：也是比较简单的一种方法。用background 来做，
一般用一个行内标签如 i ，s 等先转换显示方式 display：block；，然后设置宽高。

如果不是单一的图片，而是精灵图，则应该设置background-position 属性

方法二：我认为是一种比较有技巧性的方法，老版jd就这么玩的。

具体来说就是用两个标签父标签控制图标的位置，子标签里是一个菱形依靠定位来展示大小
和方向，父标签第二作用是依靠overflow：hidden；截掉子标签超出的部分。是不是很巧妙。

代码如下：

 1   <style> 
 2         .box{ 
 3             display: block; 
 4             width: 200px; 
 5             height: 20px; 
 6             background: gold; 
 7             overflow: hidden; 
 8             position: relative; 
 9             top: 100px; 
10             left: 200px; 
11             /*控制小三角的位置*/ 
12         } 
13         .ico{ 
14             font-style: normal; 
15             /*解决菱形倾斜*/ 
16             text-decoration: none; 
17             position: absolute; 
18             top: -8px; 
19             /*控制三角的大小和方向*/ 
20         } 
21     </style> 
22 </head> 
23 <body> 
24     <i class="box"> 
25         <s class="ico">◇</s> 
26     </i> 
27 </body>

网站题目：常见的小图标制作几种方法
路径分享：https://www.cdcxhl.com/news4/172654.html

成都网站建设公司_创新互联，为您提供小程序开发、网站制作、外贸网站建设、网站设计公司、网页设计公司、域名注册

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容