锚点的用法

锚点都是通过链接标签<a></a> href 属性实现

两种应用场景：a. 同一页面内跳转；b. 跳转其他页面某个区域

// 1. 同页面内跳转
// 给每个div添加 id 属性，然后将每个链接标签的href属性分别按顺序与每个div的 id 值相对应。【注意：href属性后的ID号必须有“#”，否则无效。】


<head>
<title>锚点的使用</title>
<style type="text/css">
body{
    font-family:"微软雅黑";
    height:2000px;
}
.nav{
    margin:50px auto 0;
    text-align:center;
    background-color:#cfcfcf;
    line-height:40px;
}
.nav a{
    display:inline-block;
    padding:5px 10px;
    font-size:16px;
    text-decoration:none;
    color:#fff;
    text-shadow:1px 1px 5px #04acef;
}
.nav a:hover{
    background:#04acef;
}
div{
    height:130px;
    line-height:130px;
    box-shadow:1px 1px 10px #ccc;
    font-size:30px;
    text-align:center;
}
</style>
</head>
<body>
    <p class="nav">
        <a href="#1">第一个</a>
        <a href="#2">第二个</a>
        <a href="#3">第三个</a>
        <a href="#4">第四个</a>
        <a href="#5">第五个</a>
    </p>
    <div id="1">1</div>
    <div id="2">2</div>
    <div id="3">3</div>
    <div id="4">4</div>
    <div id="5">5</div>
</body>

点击对应菜单，跳转列表对应位置

 

// 2. 跳转其他页面
// 假设当前文件夹中有a.html 和 b.html  两个文档（文档内容中如上，也有对应的id 属性值）
// 实现点击分别跳转到对应的这两个文档页面中的指定位置（页面会跳转到a.html中的ID=1的div所在的区域）


<body>
    <p class="nav">
        <a href="a.html#1">第一个</a>
        <a href="b.html#2">第二个</a>\
    </p>

    <div id="1">1</div>
    <div id="2">2</div>
</body>

 

posted on 2023-09-04 17:55  一名小学生呀  阅读(41)  评论(0)  编辑  收藏  举报

导航