利用锚点制作简单索引效果【CSSdemo】_html/css_WEB-ITnose

【功能说明】

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

【HTML代码说明】

　　【1】【主体框架】

    //将详细信息框外边再套一层div,是为了限制展示区的高度，并避免出现滚动条    
        //详细信息框        

    //控制框    
        //设置href为#a，意思是点击该标签页面将跳转到名称为a的锚点上        A        B        C        D        E    

　　【2】【详细信息列举】

//A信息，设置id为a,意思是将该锚点命名为a

//标题

A

//内容

A.1

A.2

A.3

A.4

A.5

B

B.1

B.2

B.3

B.4

B.5

【CSS重点代码说明】

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

【效果展示】

【源码查看】