有關於錨點的程式碼實現

技術小阿哥發表於2017-11-28

有關於錨點的小實現：<div></div>中可以用id，也可以用name；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

css部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style type="text/css">
    body{
        font-family:arial;
        height:2000px;
    }
    .nav{
        margin:50px auto 0;
        text-align:center;
        background-color:#cfcfcf;
        line-height:40px;
    }
    .nav a{
        display:inline-black;
        padding:5px 10px;
        font-size:14px;
        text-decoration:none;
        color:#fff;
        text-shadow:1px 1px 5px #04acef;
    }
    .nav a:hover{
        background-color:#04acef;
    }
    div{
        line-height:130px;
        box-shadow:1px 1px 10px #ccc;
        font-size:30px;
        text-align:center;
    }
</style>

本文轉自 愛笑嘚蛋蛋 51CTO部落格，原文連結：http://blog.51cto.com/dd118/1678136，如需轉載請自行聯絡原作者


相關文章