首頁 > web前端 > html教學 > 利用锚点制作简单索引效果【CSSdemo】_html/css_WEB-ITnose

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

WBOY
發布: 2016-06-24 11:36:53
原創
1200 人瀏覽過

【功能说明】

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

 

【HTML代码说明】

  【1】【主体框架】

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

  【2】【详细信息列举】

//A信息,设置id为a,意思是将该锚点命名为a<li class="in" id="a">    //标题    <h2 class="in-tit">A</h2>    //内容    <div class="in-txt">A.1</div>    <div class="in-txt">A.2</div>    <div class="in-txt">A.3</div>    <div class="in-txt">A.4</div>    <div class="in-txt">A.5</div></li><li class="in" id="b">    <h2 class="in-tit">B</h2>    <div class="in-txt">B.1</div>    <div class="in-txt">B.2</div>    <div class="in-txt">B.3</div>    <div class="in-txt">B.4</div>    <div class="in-txt">B.5</div></li>
登入後複製

【CSS重点代码说明】

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

 

【效果展示】

 

【源码查看】

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板