成果演示
http://148.70.92.46/H5/html&css/anchor/anchor1.html
如图所示:
使用了定位和锚点链接的方式,html结构如下所示:
<div class="box">
<div class="all">
<div class="big">
<img id="a01" src="images/banner_01.jpg" >
<img id="a02" src="images/banner_02.jpg" >
<img id="a03" src="images/banner_03.jpg" >
<img id="a04" src="images/banner_04.jpg" >
<img id="a05" src="images/banner_05.jpg" >
</div>
<div class="sm">
<ul>
<li><a href="#a01"></a></li>
<li><a href="#a02"> </a></li>
<li><a href="#a03"></a></li>
<li><a href="#a04"></a></li>
<li><a href="#a05"></a></li>
</ul>
</div>
</div>
</div>
- 锚点链接, 是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。
- 命名锚点的作用:在同一页面内的不同位置进行跳转。
- 制作锚标记:
- 给元素定义命名锚记名 语法:
<标记 id="命名锚记名"> </标记>
- 命名锚记连接 语法:
<a href="#命名锚记名称"></a>
css代码如下:
*{
margin: 0;
padding: 0;
}
.box{
width: 1500px;
}
.all{
height: 450px;
width: 800px;
margin: 20px auto;
position: relative;
}
.big{
height: 450px;
width: 800px;
overflow: hidden;
}
.big img{
display: ;
height: 450px;
width: 800px;
}
.sm ul{
height: 40px;
list-style: none;
position: absolute;
right: 10px;
bottom: 10px;
}
.sm li{
float: left;
margin-left: 20px;
}
.sm a{
height: 20px;
width: 20px;
background-color: #828282;
border: #101010 8px solid;
border-radius: 50%;
}
.sm a:hover{
background-color: #101010;
border: #808080 8px solid;
border-radius: 50%;
}
.sm a{
display: block;
}