首页 > web前端 > css教程 > 详细解说CSS锚点的使用(新手)

详细解说CSS锚点的使用(新手)

烟雨青岚
发布: 2020-07-14 12:04:47
转载
3189 人浏览过

详细解说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
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板