大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

利用锚点制作简单索引效果

【功能说明】

创新互联是一家集网站建设,红安企业网站建设,红安品牌网站建设,网站定制,红安网站建设报价,网络营销,网络优化,红安网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

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

 

【HTML代码说明】

   【1】【主体框架】

利用锚点制作简单索引效果

    /*最外边再套一层div,是为了隐藏滚动条*/
             /*将详细信息框外边再套一层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重点代码说明】

利用锚点制作简单索引效果

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

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

利用锚点制作简单索引效果

 

【效果展示】


本文名称:利用锚点制作简单索引效果
网站网址:http://dzwzjz.com/article/ghjooo.html