CSS锚点

CSS锚点使用有两种方法:

    <a href='#one'>到达第一个锚点</a>

    <a href='#two'>到达第二个锚点</a>

    <div id='one' name="one">我是第一个锚点</div>

    <div id='two' name="two">我是第一个锚点</div>

 这样当我们点击A链接时, 对应的DOM节点就会滚动到窗口顶部。

 但有时我们的需求并不是让它滚动到窗口顶部。 可能要他距离顶部有一定的距离。这时候可以由以下方法解决。

  <a href='#one'>到达第一个锚点</a>

    <a href='#two'>到达第二个锚点</a>

    <div id='one' name="one" style='margin-top:-100px;padding-top:100px'></div>

    <div >我是第一个需要滚动的内容</div>

   <div id='two' name="two" style='margin-top:-100px;padding-top:100px'></div>

    <div >我是第二个需要滚动的内容</div>

  这样就可以达到滚动后距离顶部200px的效果。而不影响原页面的样式
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML点是指一个页面中的特殊链接,它可以跳转到页面内的任意位置,而不是跳转到另一个页面。点是通过在HTML中设置ID属性来实现的。CSS点则是通过CSS样式来设置点的样式和行为。 首先,你需要在HTML中设置一个点,可以使用以下代码: ```html <a id="myAnchor">这是我的点</a> ``` 在上面的代码中,我们使用了一个`<a>`标签,并设置了一个`id`属性为`myAnchor`。这个`id`属性可以是任何你想要的名称,但它必须是唯一的。 接下来,你需要在页面中设置一个链接,让它可以跳转到这个点。可以使用以下代码: ```html <a href="#myAnchor">跳转到我的点</a> ``` 在上面的代码中,我们使用了一个`<a>`标签,并设置了一个`href`属性为`#myAnchor`。这个`#myAnchor`表示我们要跳转到页面中的ID为`myAnchor`的元素。 现在,我们来讲一下CSS点的使用。 CSS点可以让我们自定义点的样式和行为。我们可以使用以下CSS代码来设置点的样式: ```css a:link { color: blue; text-decoration: none; } a:hover { color: red; text-decoration: underline; } ``` 在上面的代码中,我们设置了两个CSS选择器。第一个选择器`a:link`表示当链接未被访问时的样式,我们设置了链接的颜色为蓝色,并且去掉了下划线。第二个选择器`a:hover`表示当鼠标悬停在链接上时的样式,我们设置了链接的颜色为红色,并且添加了下划线。 通过设置CSS点,我们可以让我们的链接看起来更加美观和易于使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值