署理加盟 2019全新署理方案 挣钱+省钱左右开弓,独立渠道,丰盛赢利!

您现在的方位: unibet网 > 站长学院 > 建站教程 >

CSS3画回来箭头,菜单,查找放大镜

来历:不知道 发布时刻:2019-03-30热度:我要谈论
在网站SEO优化中,小图标处理办法主要有三种: ①整合到一张图作为背景图,经过CSS款式background-position显现出来; ②用字体图标font-icon,简直一切你想要的图标直接拿来用; ③用CSS3直接画,但只能画一些简略的几何图形,对阅览器有必定要求。 这几种办法都不影...

unibet注册unibet淘宝店开业,好礼送不断

       在网站SEO优化中,小图标处理办法主要有三种:

①整合到一张图作为背景图,经过CSS款式background-position显现出来;

②用字体图标font-icon,简直一切你想要的图标直接拿来用;

③用CSS3直接画,但只能画一些简略的几何图形,对阅览器有必定要求。

       这几种办法都不影响优化,兼容性最好的当然是第一种,有些IE6有些还不支撑图片png格局;

       最洋气的是第二种,假如不想外引证字体,能够直接写到公共CSS款式表内,兼容性较好(自己测验百度阅览器不支撑);

       第三种对阅览器有必定要求,下面介绍用CSS画几个图形,移动端优化中用得比较多的:回来箭头,菜单,查找放大镜。作用请看本博客,用手机阅览或把PC阅览器宽度控制在780px内。

完好代码如下:

<!doctype html>
<html>
<head>
<title>CSS3回来箭头/菜单/查找放大镜 - unibet网unibet网</title>
<style>
.clear:after{clear:both}
i{display:block}
.back{
 float:left;
 width:20px;
 height:20px;
 border-top:4px solid #555;
 border-left:4px solid #555;
 -webkit-transform:rotate(-45deg);
 transform:rorate(-45deg);
 }
.menu{
 float:right;
 width:30px;
 height:5px;
 border-top:5px solid #555;
 border-bottom:5px solid #555;
 background-color:#555;
 padding:5px 0;
 background-clip:content-box;
}
.search{
 position: relative;
}
.search:before{
 content: ' ';
 position: absolute;
 width: 15px;
 height: 15px;
 border: 3px solid #666;
 border-radius: 30px;
 box-shadow: inset 1px 1px 10px rgba(0,0,0,.3); }
.search:after{
 content: ' ';
 position: absolute;
 width: 18px;
 height: 5px;
 background: #666;
 border-radius: 5px 0 0 5px;
 -webkit-transform: rotate(225deg);
 -moz-transform: rotate(225deg);
 -ms-transform: rotate(225deg);
 -o-transform: rotate(225deg);
 transform: rotate(225deg);
}
.search:before{
 top: 0;
 left: 30px;
}
.search:after{
 top:15px;
 left: 30px;
}
</style>
</head>
<body>
 <p class="top clear">
  <i class="back"></i>
  <i class="menu"></i>
  <i class="search"></i>
 </p>
</body>
</html>

本文地址:https://www.m88nob1.com/news/1372.html

    责任编辑:unibet网

    宣布谈论

    谈论列表(条)