一个简单的锚点的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定位到具体位置</title>
<style type="text/css">
/*CSS reset*/
body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
capation,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before, q:after{content:‘ ‘}
abbr,acronym{border:0;}
.positionDiv{width: 70%; margin: 0 auto; height: 400px; border: 1px solid #000;}
#div1{background-color: red;}
#div2{background-color: green;}
#div3{background-color: blue;}
#div4{background-color: yellow;}
#div5{background-color: orange;}
#content{width: 70%; margin-top: 20px; overflow: auto;}
#menu{ position:fixed; border: 1px solid #000; width: 15%; top:20px; right: 50px;}
#menu ul li{list-style: none; padding: 10px; text-align: center; border: 1px solid #000;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#div1">div1</a></li>
<li><a href="#div2">div2</a></li>
<li><a href="#div3">div3</a></li>
<li><a href="#div4">div4</a></li>
<li><a href="#div5">div5</a></li>
</ul>
</div>
<div id="content">
<div id="div1" class="positionDiv">
<span>div1</span>
</div>
<div id="div2" class="positionDiv">
<span>div2</span>
</div>
<div id="div3" class="positionDiv">
<span>div3</span>
</div>
<div id="div4" class="positionDiv">
<span>div4</span>
</div>
<div id="div5" class="positionDiv">
<span>div5</span>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</html>
锚点的使用和总结
时间： 2024-08-25 06:16:35