Html 封面效果

Html 封面效果,html,css,effect,Html,Css,Effect,在这个网站上,我想让标题(slide.js)固定下来,就像背景一样,这样当你滚动时,“我是谁”就会出现。我该怎么办 此外,我设法修复了推特和电子邮件链接,但当它滚动时,我似乎无法让“我是谁”覆盖它。 我该怎么办 如果视图源代码不够,代码就在GitHub上 提前感谢您的帮助 要解决您的问题,您必须从导航元素中删除“style=边距顶部:-250px”: <nav style="margin-top: -250"> to <nav> 左侧:0和顶部:0是为了使元素在固定

在这个网站上,我想让标题(slide.js)固定下来,就像背景一样,这样当你滚动时,“我是谁”就会出现。我该怎么办

此外,我设法修复了推特和电子邮件链接,但当它滚动时,我似乎无法让“我是谁”覆盖它。 我该怎么办

如果视图源代码不够,代码就在GitHub上


提前感谢您的帮助

要解决您的问题,您必须从导航元素中删除“style=边距顶部:-250px”:

<nav style="margin-top: -250">

to

<nav>
左侧:0和顶部:0是为了使元素在固定位置时不会在firefox中消失

这就是我们在html标记中放入内联css代码时遇到的问题。除非我们直接修改.html文件或使用!重要黑客(不推荐)

e)

额外:若要将链接居中放置在页面的顶部中心,请使用以下选择器替换相同的块,即可完成操作:

nav {
    position:fixed;
    width:100%;
    left:0;
    top:0 
}

nav ul {
    display: block;
    line-height: -20;
    vertical-align: center;
    width:inherit; 
    text-align:center;
}
nav ul li {
        list-style: none;
        margin: 30px 30px 50px; 
        margin: 1.875rem 1.875rem 3.125rem;
        font-family: "Lato", Arial, sans-serif;
        font-size: .8125em;
        font-weight: 400;
        text-transform: uppercase;
        display:inline-block; 
}

我希望有帮助:)。欢呼。

我试过,它使标题固定了,但在顶部,而不是在页面前面的中间,推特和电子邮件的链接也消失了。(你可以在这里看到)好的,我按照你说的做了,但是现在当你滚动标题时,链接没有“覆盖”,而是在“我是谁”部分的顶部。另外,我如何使导航链接(Twitter和电子邮件)位于中间位置而不是左对齐?抱歉,我无法理解您想要实现什么,请您向我提供更明确的解释,同时请使用当前问题更新您的guthub存储库,以便我能更详细地了解您想要什么,这会有很大帮助:)。我希望当你向下滚动时,“我是谁”部分位于标题的顶部。现在,由于某种原因,当你向下滚动时,标题(slide.js)停留在“我是谁”部分的顶部,与我想要的相反。我已经更新了GitHub存储库。只需在.title类中添加属性“z-index:0”,然后在.who类中添加“position:relative”和“z-index:1”,这将告诉您标题的z轴位置低于who部分,从而使标题始终隐藏。请注意,可以在“z-index”部分中添加任何值属性并获得与通常相同的结果。title元素的值低于.who部分。太棒了,它工作了!现在最后一件事-我如何让链接(“Twitter”和“电子邮件”)位于页面的中心,就在标题下?谢谢你的帮助!
nav {
    position:fixed;
    width:100%;
    left:0;
    top:0 
}

nav ul {
    display: block;
    line-height: -20;
    vertical-align: center;
    width:inherit; 
    text-align:center;
}
nav ul li {
        list-style: none;
        margin: 30px 30px 50px; 
        margin: 1.875rem 1.875rem 3.125rem;
        font-family: "Lato", Arial, sans-serif;
        font-size: .8125em;
        font-weight: 400;
        text-transform: uppercase;
        display:inline-block; 
}