代理加盟 2019全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 站長學院 > 建站教程 >

CSS3畫返回箭頭,菜單,搜索放大鏡

來源:未知 發布時間:2019-03-30熱度:我要評論
在網站SEO優化中,小圖標處理方式主要有三種: ①整合到一張圖作為背景圖,通過CSS樣式background-position顯示出來; ②用字體圖標font-icon,幾乎所有你想要的圖標直接拿來用; ③用CSS3直接畫,但只能畫一些簡單的幾何圖形,對瀏覽器有一定要求。 這幾種方式都不影...

織夢模板免費下載,無需注冊無需充值

       在網站SEO優化中,小圖標處理方式主要有三種:

①整合到一張圖作為背景圖,通過CSS樣式background-position顯示出來;

②用字體圖標font-icon,幾乎所有你想要的圖標直接拿來用;

③用CSS3直接畫,但只能畫一些簡單的幾何圖形,對瀏覽器有一定要求。

       這幾種方式都不影響優化,兼容性最好的當然是第一種,有些IE6有些還不支持圖片png格式;

       最洋氣的是第二種,如果不想外引用字體,可以直接寫到公共CSS樣式表內,兼容性較好(本人測試百度瀏覽器不支持);

       第三種對瀏覽器有一定要求,下面介紹用CSS畫幾個圖形,移動端優化中用得比較多的:返回箭頭,菜單,搜索放大鏡。效果請看本博客,用手機瀏覽或把PC瀏覽器寬度控制在780px內。

完整代碼如下:

<!doctype html>
<html>
<head>
<title>CSS3返回箭頭/菜單/搜索放大鏡 - 秀站網秀站網</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>

本文地址:http://www.yxrxyy.live/news/1372.html

責任編輯:秀站網

    發表評論

    評論列表(條)

      北京28是什么彩票