当前位置:Gxlcms > html代码 > 利用锚点制作简单索引效果【CSSdemo】_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:34人阅读

【功能说明】

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

【HTML代码说明】

  【1】【主体框架】

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

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

    【效果展示】

    【源码查看】

    人气教程排行