首頁 > web前端 > css教學 > 詳細解說CSS錨點的使用(新手)

詳細解說CSS錨點的使用(新手)

烟雨青岚
發布: 2020-07-14 12:04:47
轉載
3183 人瀏覽過

詳細解說CSS錨點的使用(新手)

CSS錨點使用有兩種方法,我建議使用下面這種:

  <a href=&#39;#one&#39;>到达第一个锚点</a>
登入後複製
登入後複製
    <a href=&#39;#two&#39;>到达第二个锚点</a>
登入後複製
登入後複製
    <p id=&#39;one&#39;>我是第一个锚点</p>
登入後複製
    <p id=&#39;two&#39;>我是第一个锚点</p>
登入後複製

這樣當我們點擊A連結時,對應的DOM節點就會捲動到視窗頂端。

但有時我們的需求並不是讓它滾動到視窗頂部。可能要他距離頂部有一定的距離。這時候可以由以下方法來解決。

  <a href=&#39;#one&#39;>到达第一个锚点</a>
登入後複製
登入後複製
    <a href=&#39;#two&#39;>到达第二个锚点</a>
登入後複製
登入後複製
    <p id=&#39;one&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
登入後複製
 <p >我是第一个需要滚动的内容</p>
登入後複製
   <p id=&#39;two&#39; style=&#39;margin:top:-100px;padding-top:100px&#39;>
登入後複製
    <p >我是第二个需要滚动的内容</p>
登入後複製

這樣就可以達到滾動後距離頂部200px的效果。而不影響原頁面的樣式

感謝大家的閱讀,希望大家收益多多。

本文轉自:https://blog.csdn.net/baidu_32519511/article/details/52668834

推薦教學:《CSS教學》//m.sbmmt.com/css -tutorial.html

以上是詳細解說CSS錨點的使用(新手)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板