【功能说明】
点击按钮时,页面跳转到对应区域
【HTML代码说明】
【1】【主体框架】
<div class="box" id="box"> /*最外边再套一层div,是为了隐藏滚动条*/
<div class="listWrapOut"> /*将详细信息框外边再套一层div,是为了限制展示区的高度*/
<div class="listWrap"> /*详细信息框*/
<ul class="list">
</ul>
</div>
</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"> //标题
<h3 class="in-tit">A</h3> //内容
<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">
<h3 class="in-tit">B</h3>
<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重点代码说明】
//设置宽度比子级宽度窄20px,及设置overflow:hidden达到隐藏滚动条并可以滚动的效果.listWrapOut{
width: 480px;
overflow: hidden;
}//使显示出高度为280px,背景颜色为#ccc.listWrap{
overflow:auto;
height: 280px;
background-color: #ccc;
width: 500px;
}//通过设置计算后的高度值,使详细信息框里的每个锚点将链接时,都可以正好到达信息框的顶部.list{
height: 1080px;
}
【效果展示】
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。