1.公共字體圖標(biāo)的使用

1. 1www.icomoon.io

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

由美工設(shè)計(jì)好的圖標(biāo)格式 為svg,我們需要轉(zhuǎn)換為頁(yè)面能使用的字體文件。在icomoon.co 中import icon, 選擇 created.svg 重新下載

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

1.2.阿里 www.icofont.cn

2.京東網(wǎng)頁(yè)

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

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

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

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

2.3? 京東頭部漂浮廣告?！耙辉霘ⅰ?#xff0c;“大牌狂歡”。

布局：一個(gè)div盒子里面包含張背景圖片，兩個(gè)廣告漂浮。結(jié)構(gòu)如下：

<div class="J_headbar">
?? ??? ??? ?<div class="w">
?? ??? ??? ?<!--a標(biāo)簽為行內(nèi)元素，若讓背景圖像顯示，必須設(shè)定寬高-->
?? ??? ??? ??? ?<a class="w" href="#">
?? ??? ??? ??? ??? ?<i>?</i>
?? ??? ??? ??? ?</a>
?? ??? ??? ??? ?<!--ul ?大牌狂歡 1元秒殺哦廣告是懸浮在背景上，不占位置，考慮用定位，若用浮動(dòng)，只能在下一行 -->
?? ??? ??? ??? ?<ul class="J_headul">

?? ??? ??? ??? ??? ?<!-- ul 絕對(duì)定位? 單個(gè)大牌狂歡，1元秒殺鏈接用li 做得效果可用浮動(dòng)float 來(lái)填充ul 給個(gè)外邊距隔開(kāi) ul可不用給寬高，因?yàn)樗歉?dòng)的-->
?? ??? ??? ??? ??? ?<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 若父盒子中的子盒子高度大于父盒子，超出范圍，子盒子中設(shè)置 overflow:hidden;

2.5 logo部分

一般為了網(wǎng)站優(yōu)化，加快搜索，結(jié)構(gòu)如下：

<!-- 京東頭部 版心 -->

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

注意：h1 有個(gè)外邊距 ，會(huì)與class="logo" 產(chǎn)生一定距離。因此，清樣式。

.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;

?? ?/* 把行內(nèi)元素轉(zhuǎn)化為行內(nèi)塊元素，才可以顯示背景圖片*/
?? ? display: block;

? ?overflow:hidden; /*文字出去后就不會(huì)出現(xiàn)再父盒子了*/
}

第二種，把圖片放入鏈接a 當(dāng)中；

<!-- 京東頭部 版心 -->
?? ??? ?<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 里面的權(quán)重比其他的都要高。因此a 鏈接網(wǎng)站優(yōu)化加快搜索會(huì)加入“京東”? 里面的字不能刪，第一種方式更好，否則a加入文字后，顯示圖片會(huì)換行。

設(shè)置text-indent:-9999px; 向右首行縮進(jìn)；

a 里面加title 屬性，網(wǎng)站優(yōu)化。當(dāng)鼠標(biāo)移入，顯示標(biāo)題名。 image 屬性里面也有title.

2.6 網(wǎng)站優(yōu)化 三大標(biāo)簽優(yōu)化（SEO）

先出現(xiàn)的文字，權(quán)重最高。

<title></titile>

<meta name=“description” content="....." />

<meta name=“keywords” content="....." />

2.7 搜索框?

?

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

2.8 熱詞

如何在一個(gè)盒子中，子盒子浮動(dòng)了，其他的子盒子也最好浮動(dòng)，要不然結(jié)構(gòu)會(huì)出錯(cuò)。

2.9 購(gòu)物車上角標(biāo)

通過(guò)給數(shù)字加圓角（border-radius）,數(shù)字用定位處理。

?

?

總結(jié)

以上是生活随笔為你收集整理的公共图标库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。