第8天：公共圖示庫
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盒子裡麵包含張背景圖片，兩個廣告漂浮。結構如下：
<div class="J_headbar">
<div class="w">
<!--a標籤為行內元素，若讓背景影象顯示，必須設定寬高-->
<a class="w" href="#">
<i></i>
</a>
<!--ul 大牌狂歡 1元秒殺哦廣告是懸浮在背景上，不佔位置，考慮用定位，若用浮動，只能在下一行 -->
<ul class="J_headul">
<!-- ul 絕對定位 單個大牌狂歡，1元秒殺連結用li 做得效果可用浮動float 來填充ul 給個外邊距隔開 ul可不用給寬高，因為他是浮動的-->
<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）
先出現的文字，權重最高。
<title></titile>
<meta name=“description” content="....." />
<meta name=“keywords” content="....." />
2.7 搜尋框
在button 裡面新增字型圖示，可用 i 標籤巢狀，最後的框很可能變大，因此將 “input button ”都定義為float 即可。
2.8 熱詞
如何在一個盒子中，子盒子浮動了，其他的子盒子也最好浮動，要不然結構會出錯。
2.9 購物車上角標
通過給數字加圓角（border-radius）,數字用定位處理。
