你的位置:首页 > 网页设计

[网页设计]利用锚点制作简单索引效果【CSSdemo】


【功能说明】

  点击按钮时,页面跳转到对应区域

 

【HTML代码说明】

  【1】【主体框架】

<div id="box">  //将详细信息框外边再套一层div,是为了限制展示区的高度,并避免出现滚动条  <div >    //详细信息框    <ul >    </ul>      </div>  //控制框  <nav >    //设置href为#a,意思是点击该标签页面将跳转到名称为a的锚点上    <a href="#a" >A</a>    <a href="#b" >B</a>    <a href="#c" >C</a>    <a href="#d" >D</a>    <a href="#e" >E</a>  </nav></div>

 

  【2】【详细信息列举】

//A信息,设置id为a,意思是将该锚点命名为a<li id="a">  //标题  <h2 >A</h2>  //内容  <div >A.1</div>  <div >A.2</div>  <div >A.3</div>  <div >A.4</div>  <div >A.5</div></li><li id="b">  <h2 >B</h2>  <div >B.1</div>  <div >B.2</div>  <div >B.3</div>  <div >B.4</div>  <div >B.5</div></li>

 

【CSS重点代码说明】

//使显示出高度为280px,背景颜色为#ccc,并且无滚动条.listWrap{  overflow:hidden;  height: 280px;  background-color: #ccc;    width: 500px;}//通过设置比较大的高度值,使详细信息框里的每个锚点将链接时,都可以到达信息框的顶部.list{  height: 2000px;}

 

【效果展示】

 

【源码查看】