你会使用css锚点么

2020-10-13 191647 教程大全

/2020/10/293e4dff

CSS锚点使用有两种方法,我建议使用下面这种:

(推荐教程:CSS教程)

<a href='#one'>到达第一个锚点</a>
    <a href='#two'>到达第二个锚点</a>
    <div id='one'>我是第一个锚点</div>
    <div id='two'>我是第一个锚点</div>

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

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

<a href='#one'>到达第一个锚点</a>
    <a href='#two'>到达第二个锚点</a>
    <div id='one' style='margin:top:-100px;padding-top:100px'>
    <div >我是第一个需要滚动的内容</div>
   <div id='two' style='margin:top:-100px;padding-top:100px'>
    <div >我是第二个需要滚动的内容</div>

这样就可以达到滚动后距离顶部200px的效果。而不影响原页面的样式。

以上就是你会使用css锚点么的详细内容,更多请关注北冥有鱼编程技术建站教程其它相关文章!

css和@import有什么区别

css和@import有什么区别?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、用法(1)link:<linkrel="stylesheet"type="text/css"href="css文件路径"/>(2)@import:方法一(html中添加):&lt...

css怎么设置元素位置不变

这篇文章给大家分享的是有关css怎么设置元素位置不变的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。css设置元素位置不变的方法:首先创建一个HTML示例文件;然后定义一个“#ads”的id样式,并设置高度宽度;最后通过“position:fixed”以及right、bottom将元素定位在指定位置即可。我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置,无论如何...

怎么用CSS steps()函数实现随机翻牌效果

这篇文章主要介绍“怎么用CSSsteps()函数实现随机翻牌效果”,在日常操作中,相信很多人在怎么用CSSsteps()函数实现随机翻牌效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用CSSsteps()函数实现随机翻牌效果”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!翻牌是大家很熟悉的一个互动效果,通常在抽奖活动中出现。那么不借助JavaScript是...

如何引入CSS的方式

小编给大家分享一下如何引入CSS的方式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!(1)内嵌式通过<style></style>来书写CSS代码。只能应用于当前网页,不能被其它网页共享。注意:<style>标记可以放在网页的任何地方,但一般放在<head>。(2)外联式通...

怎么用CSS滤镜实现颜色渐变翻转效果

本篇内容介绍了“怎么用CSS滤镜实现颜色渐变翻转效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一下是利用CSS滤镜效果实现渐变翻转的代码,有需要的朋友可以参考下。代码如下:<span><!DOCTYPEhtml><htmllang="en"&gt...

css如何设置td元素的文本靠上显示

这篇文章将为大家详细讲解有关css如何设置td元素的文本靠上显示,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在css中,可以利用“vertical-align”属性设置td元素的文本靠上显示,该属性用于设置元素的垂直对齐方式,当属性的值为“text-top”时,会使文本靠上显示,语法为“td{vertical-align:text-top;}”。本教程操作环...

css的td宽度怎么定义与设置

这篇文章主要介绍“css的td宽度怎么定义与设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css的td宽度怎么定义与设置”文章能帮助大家解决问题。csstd宽度控制定义与设置使用CSS对html表格td设置宽度样式方法介绍,首先我们知道宽度样式单词为“width”,通常对td设置宽度,一般是对多组<td></td>标签里某一组设...

css中目标伪类有什么用

这篇文章主要介绍了css中目标伪类有什么用,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。在css中,目标伪类是“:target”,语法格式“E:target{css样式}”,它表示选择匹配E的所有元素,且匹配元素被相关URL指向;该选择器是动态选择器,只有当存在URL指向该匹配元素时,样式效果才能够有效。在css中,目标伪类选择器是“:...