9159金沙游艺场-奥门金沙游艺场-[欢迎您]

9159金沙游艺场为您呈现最新的面貌!,目前注册送体验金,欢迎您将成为影视娱乐行业新的风向标,是亚洲的优质娱乐先锋。

利用锚点制作简单索引效果【9159金沙游艺场】

日期:2020-01-04编辑作者:办公软件

利用锚点制作简单索引效果【CSSdemo】,索引效果cssdemo

【功能说明】

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

 

【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">
    //标题
    <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重点代码说明】

//设置宽度比子级宽度窄20px,及设置overflow:hidden达到隐藏滚动条并可以滚动的效果
.listWrapOut{
    width: 480px;
    overflow: hidden;
}
//使显示出高度为280px,背景颜色为#ccc
.listWrap{
    overflow:auto;
    height: 280px;
    background-color: #ccc;    
    width: 500px;

}
//通过设置计算后的高度值,使详细信息框里的每个锚点将链接时,都可以正好到达信息框的顶部
.list{
    height: 1080px;
}

 

【效果展示】

 

【源码查看】

 

【功能说明】 点击按钮时,页面跳转到对应区域 【HTML代码说明】 【1】【主体框架...

本文由9159金沙游艺场-奥门金沙游艺场-[欢迎您]发布于办公软件,转载请注明出处:利用锚点制作简单索引效果【9159金沙游艺场】

关键词:

CentOS检查某软件包是否已安装

CentOS检查某软件包是否已设置 1、rpm包安装的,能够用rpm -qa看见,假如要寻觅某软件包是否安装,用 rpm-qa | grep "软件...

详细>>

CentOS7.0安装JDK1.8.0_31

CentOS7.0安装JDK1.8.0_31 1.检查一下系统中的jdk版本 [java]view plaincopy $java-version java version "1.7.0_" OpenJDK Runtime Environment (Ic...

详细>>

Centos7搭建本地仓库9159金沙游艺场

Centos7搭建本地仓库 centos7上搭建了本地仓库,记录过程如下: 1,下载centos7的iso文件,我下载的为:CentOS-7.0-1406-x86...

详细>>

python学习笔记九9159金沙游艺场

python学习笔记九:异常,python学习笔记九: 一、语法 #!/usr/bin/pythonfilename='hello'#try except finally demotry: open('abc.txt') prin...

详细>>