导航条实现：
1、图像映射img/map/area
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img/map/area锚点练习</title>
<style>
body{
margin: 0;
padding:0;
}
#top{
height: 160px;
line-height: 160px;
text-align: center;
background-color: skyblue;
color: #f90;
font-size: 66px;
}
.common{
height: 300px;
line-height: 300px;
font-size: 46px;
text-align: center;
margin-top: 0;
}
img{
display: block;
position: fixed;
top: 20px;
right: 20px;
}
#info1{
background-color: pink;
}
#info2{
background-color: #f23;
}
#info3{
background-color: #a23;
}
#info4{
background-color: #a13;
}
#info5{
background-color: #ab3;
}
#info6{
background-color: #af3;
}
#info7{
background-color: #f92;
}
#info8{
background-color: #f43;
}
#info9{
background-color: #a93;
}
#info10{
background-color: #abf;
}
</style>
</head>
<body>
<div >天猫家装节</div>
<img src="navbar.png" alt="" usemap="#map_name">
<map name="map_name" >
<area shape="rect" coords="0,50,120,90" href="#info1" title="5折抄底">
<area shape="rect" coords="0,90,120,130" href="#info2" alt="疯狂秒杀">
<area shape="rect" coords="0,130,120,170" href="#info3" alt="电视家影">
<area shape="rect" coords="0,170,120,210" href="#info4" alt="冰箱.洗衣机">
<area shape="rect" coords="0,210,120,250" href="#info5" alt="空调">
<area shape="rect" coords="0,250,120,290" href="#info6" alt="厨房电器">
<area shape="rect" coords="0,290,120,330" href="#info7" alt="生活个护">
<area shape="rect" coords="0,330,120,370" href="#info8" alt="烟灶.热水器">
<area shape="rect" coords="0,370,120,410" href="#info9" alt="热销品牌区">
<area shape="rect" coords="0,410,120,450" href="#info10" alt="精彩推荐区">
<area shape="circle" coords="60,490,30" href="#top" alt="返回顶部">
</map>
<div >5折抄底</div>
<div >疯狂秒杀</div>
<div >电视家影</div>
<div >冰箱.洗衣机</div>
<div >空调</div>
<div >厨房电器</div>
<div >生活个护</div>
<div >烟灶.热水器</div>
<div >热销品牌区</div>
<div >精彩推荐区</div>
</body>
</html>