用锚点链接实现内容或图片的页内切换

成果演示

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>

• 锚点链接, 是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。
• 命名锚点的作用：在同一页面内的不同位置进行跳转。
• 制作锚标记：

1. 给元素定义命名锚记名 语法：<标记 id="命名锚记名">
2. 命名锚记连接 语法：

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;
			}

此为使用图片作为目录的用法