网站建设
 
设为首页 收藏本站 
用户ID/邮箱: 密 码:
客户中心 Customer service 您目前的位置:首 页 > 客户中心 > DIV+CSS 



DIV+CSS,网站建设DIV+CSS:常见的小图标制作几种方法

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

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

方法一:也是比较简单的一种方法。用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>

效果如图:

方法三:目前最主流的方式 使用字体图标来处理,使用非常简单,控制方便。

现在有很多的字体图标库,这里以阿里巴巴图标库为例,选择你需要的,放入购物车,
下载代码。引入文件iconfont.css 文件。挑一种加载方式,so easy 。


上一条: 网站刷流量的好与坏
下一条: 图片垂直居中显示
相关文章
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
前端页面隐藏元素
URL怎么优化
URL优化方法
css中的三种基本定位机制
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
推广经验分享
其它
网站建设资源
常见问题
网站知识
快速导航 Fast Navigation
网站建设投诉建议
投诉建议
网站建设客户服中心
客服中心
网站建设付款中心
付款方式
网站优化中心
网站优化
网站建设套餐
网站建设

网站价值

轻松一刻
站长工具
站长工具

积分兑换
网站首页关于我们业务范围新闻资讯成功案例客服中心联系我们深圳网站建设网站优化付款帐户
文档下载:网站建设服务协议 | 网站建设报价 | 网站备案资料 | 网页设计软件 | PhotoShop(图片处理) | FTP网页上传/下传软件
深圳网站建设公司专业提供各种营销型网页设计\网站优化服务... 【老字号】、重庆、广州、东莞、深圳网站建设
网页设计登陆 | 网站建设 | 网页设计 | 网站优化 | 网站地图 | 专业的深圳网站建设,深圳网站优化,网页设计,网站建设开发团队
COPYRIGHT(C) 2005-2018 亚网互联·中国 版权所有 ALL RIGHTS RESERVED  ( 粤ICP备15005241号 ) 来访IP:54.162.224.176
深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦1529-1531 室     E-Mail:sales@yanet.cn   web@yanet.cn  
公司电话:0755-89812581(8线)   4006-800535
深圳市博士通科技有限公司