雪碧圖引用

步驟：
1.給尺寸 寬、高
2.引用背景圖片位置：background-image:url（""）
3.給位置：background-position：x軸和y軸的距離起點00的位置

4：若是是行內標籤，應該把display設置爲inline-block。

 

div>i {

display: inline-block;

width: 49px;

height: 49px;

background: url("./images/shutter_prevBtn.png");

position: absolute;

top: 170px;

background-position：0 -40px;

}

 

 

 

讓文本垂直居中：設置行高=高。

 

點擊圖片的某一部分，能夠跳轉到其餘頁面。

<a href="">
<img usemap="#a" src=" 「」 alt=" "/>
</a>
<map name="a" id="a">
<area shape="圖形形狀" coords="圖形位置" href="跳轉地址" alt="圖片的關鍵詞"/>

 

<!--爲了解決兼容性,map須要同時添加name和id屬性.-->

shape:矩形rectangle     圓形circle             多邊形poly
coords:形狀的位置
矩形:(左上角X軸座標,左上角Y軸座標,右下角X軸座標,右下角Y軸座標)
圓形:(圓心點X軸,圓心點Y軸,半徑)
href:形狀的連接地址