前端html锚点定位实例

最新推荐文章于 2024-07-27 23:44:58 发布

曦月合一

最新推荐文章于 2024-07-27 23:44:58 发布

阅读量200

点赞数

分类专栏： javaScript html 文章标签：前端 html

本文链接：https://blog.csdn.net/qq_39951524/article/details/132853869

版权

javaScript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<meta charset="utf-8" />
<head>
    <style>
        .menu{
            position: fixed;
            top:0px;
            left:0px;
        }
        .menu a{
            padding: 10px;
            color: red;
        }
        #img_ceshi{
        	background-image: url(img/sebei/bg.png);
        width: 100%;
        height: 3000px;	
        }
    </style>
</head>
<html>
    <body>
        <div class="menu">
            <a href="#div1">区域1</a>
            <a href="#div2">区域2</a>
            <a href="#div3">区域3</a>
            <a href="#div4">区域4</a>
        </div>
        <div style="margin-top:40px" id="img_ceshi">
            <div  style="color: yellow; margin-top: 50px;">
                <h1 id="div1" style="padding-top: 50px;"><a href="https://www.baidu.com"> 区域1</a></h1>
               
            </div>
            <div  style="color: blanchedalmond; margin-top: 1050px;">
                <h1 id="div2" style="padding-top: 50px;"><a href="https://www.runoob.com/">区域2</a></h1>
               
            </div>
            <div  style="color: blue; margin-top: 550px;">
                <h1 id="div3" style="padding-top: 50px;"><a href="http://www.pwxvr.com/">区域3</a></h1>
               
            </div>
            <div  style="color: gray; margin-top: 550px;">
                <h1 id="div4" style="padding-top: 50px;"><a href="https://layui.dev/">区域4</a></h1>
            </div>
        </div>
        

    </body>
</html>