當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

公共图标库

發布時間：2024/1/1 编程问答 40 豆豆

生活随笔收集整理的這篇文章主要介紹了公共图标库小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.公共字體圖標的使用

1. 1www.icomoon.io

? ? 在官網上下載所需的素材，將文件夾放在html文件夾同一個目錄中，在style 里面引入聲明字體， @font-face 屬性，在下載文件夾中找到 demo.html ,再在里面找到對應位置的小方塊，復制粘貼到所需的位置(注意html 文件夾中顯示的為空格)，所需的位置用一個標簽如span標簽等括起來，標簽中引入@font-face屬性中定義的字體font-family,? 還可定義color,font-size;

由美工設計好的圖標格式為svg,我們需要轉換為頁面能使用的字體文件。在icomoon.co 中import icon, 選擇 created.svg 重新下載

若想追加其他圖標，import icon ，選擇之前下載的文件夾中的 .json 文件。

1.2.阿里 www.icofont.cn

2.京東網頁

2.1 初始化一些樣式，考慮到兼容性及H5 normalize.css

2.2 京東圖標：在www.jd.com/favicon.ico? 可得到ico 的圖標文件。放在根目錄下(為了兼容性)，可根據域名直接得到。

jd? jd/image jd/css jd/font(放置下載的圖標)? ?jd/index.html? jd/favicon.ico

在html 中引入? <link ref="shortcut icon" href="favicon.ico"? ?type="image/x-icon"/>

2.3? 京東頭部漂浮廣告。“一元秒殺”，“大牌狂歡”。

布局：一個div盒子里面包含張背景圖片，兩個廣告漂浮。結構如下：

?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<li>
?? ??? ??? ??? ??? ??? ?<a class="joy_right" href="#" ><img src="image/headURL.png" alt="" /></a>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li>
?? ??? ??? ??? ??? ??? ?<a class="joy_left" href="#" ><img src="image/headURL2.png" alt=""></a>
?? ??? ??? ??? ??? ?</li>? ? ?
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ?</div>

2.4 若父盒子中的子盒子高度大于父盒子，超出范圍，子盒子中設置 overflow:hidden;

2.5 logo部分

一般為了網站優化，加快搜索，結構如下：

第一種：
?? ??? ?<div class="header">
?? ??? ??? ?<div class="w inner">
?? ??? ??? ??? ?<div class="logo">
?? ??? ??? ??? ??? ?<h1>
?? ??? ??? ??? ??? ??? ?<a href="#" title="京東網">京東</a>
?? ??? ??? ??? ??? ?</h1>?? ?
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ?</div>
?? ??? ?</div>

注意：h1 有個外邊距，會與class="logo" 產生一定距離。因此，清樣式。

.logo h1 {

margin:0;

}

.logo {
?? ?width: 190px;
?? ?height: 170px;
?? ?position: absolute;
?? ?background-color: blue;
?? ?top: -31px;
?? ?left: 0;
}

.logo a{
?? ?width: 190px;
?? ?height: 170px;
?? ?background: url(../image/logo.gif) no-repeat;
?? ?background: url(../image/headBG.jpg) no-repeat;

?? ?/* 把行內元素轉化為行內塊元素，才可以顯示背景圖片*/
?? ? display: block;

? ?overflow:hidden; /*文字出去后就不會出現再父盒子了*/
}

第二種，把圖片放入鏈接a 當中；

?? ??? ?<div class="header">
?? ??? ??? ?<div class="w inner">
?? ??? ??? ??? ?<div class="logo">
?? ??? ??? ??? ??? ?<h1>
?? ??? ??? ??? ??? ??? ?<a href="#"><img src="image/logo.gif"></a>
?? ??? ??? ??? ??? ?</h1>?? ?
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?
?? ??? ??? ?</div>
?? ??? ?</div>
.logo {
?? ?width: 190px;
?? ?height: 170px;
?? ?position: absolute;
?? ?background-color: blue;
?? ?top: -31px;
?? ?left: 0;
}

logo 里面的權重比其他的都要高。因此a 鏈接網站優化加快搜索會加入“京東”? 里面的字不能刪，第一種方式更好，否則a加入文字后，顯示圖片會換行。

設置text-indent:-9999px; 向右首行縮進；

a 里面加title 屬性，網站優化。當鼠標移入，顯示標題名。 image 屬性里面也有title.

2.6 網站優化三大標簽優化（SEO）

先出現的文字，權重最高。

2.7 搜索框?

在button 里面添加字體圖標，可用?i 標簽嵌套，最后的框很可能變大，因此將 “input button ”都定義為float 即可。

2.8 熱詞

如何在一個盒子中，子盒子浮動了，其他的子盒子也最好浮動，要不然結構會出錯。

2.9 購物車上角標

通過給數字加圓角（border-radius）,數字用定位處理。

總結

以上是生活随笔為你收集整理的公共图标库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

图标库