雪碧图引用

步骤：
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:形状的连接地址