gpt4 book ai didi

html - 固定标题重叠

转载 作者:行者123 更新时间:2023-11-28 12:15:11 25 4
gpt4 key购买 nike

我正在尝试为我正在制作的网站设置一个固定的标题,并且内容位于标题下方。我想在标题下绘制内容,而无需用户向上滚动。如果可能的话,我希望用户不会在内容上方看到任何空白。

这是我到目前为止所做的http://jsfiddle.net/5QWZW/ .

    <!DOCTYPE html>
<html lang="en">
<head>
<title>Elemental Fury</title>
<meta charset="utf-8" name="discription" content="Best game evar!!">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="main.css" type="text/css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<center>
<nav>
<table class="navTable">
<tr>
<td align="center" class="navItem"><a href="#Fire"><img class="navImage" src="Images/Fire.jpg" alt="Fire"></a></td>
<td align="center" class="navItem"><a href="#Air"><img class="navImage" src="Images/Air.jpg" alt="Air"></a></td>
<td align="center" class="navItem"><a href="#Earth"><img class="navImage" src="Images/Earth.jpg" alt="Earth"></a></td>
<td align="center" class="navItem"><a href="#Water"><img class="navImage" src="Images/Water.jpg" alt="Water"></a></td>
</tr>
</table>
</nav>
<section>
<h1 class="title">Fancy logo</h1>
<div id="Fire" class="Page">
<h1>Fire</h1>
<img src="Images/archer%20fire.jpg"/>
<img src="Images/mage%20fire.jpg"/>
<img src="Images/soldier%20fire.jpg" />
</div>
<div id="Water" class="Page">
<h1>Water</h1>
<img src="Images/archer%20water.jpg"/>
<img src="Images/mage%20water.jpg"/>
<img src="Images/soldier%20water.jpg"/>
</div>
<div id="Air" class="Page">
<h1>Air</h1>
<img src="Images/archer%20air.jpg"/>
<img src="Images/mage%20air.jpg"/>
<img src="Images/soldier%20air.jpg"/>
</div>
<div id="Earth" class="Page">
<h1>Earth</h1>
<img src="Images/archer%20earth.jpg"/>
<img src="Images/mage%20earth.jpg"/>
<img src="Images/soldier%20earth.jpg"/>
</div>
</section>
<footer>
<a href="#Rules">Rules</a>
</footer>
</center>
</body>
</html>

还有CSS

    nav{
height: 106px;
width: 100%;
background-color: #ddd;
padding: 0px;
border: 0px;
top: 0px;
left: 0px;
box-shadow: 6px 6px 5px #d0d0d0;
position: fixed;
z-index: 2;
}
.navItem{
width: 2%;
}
.navImage{
height: 100px;
width: 100px;
}
.navImage:hover{
box-shadow: 10px 5px 5px #888888;
}
.Page{
display: none;
position: absolute;
top: 400px;
}
section{
margin-top: 400px;
}
.Page:target{
display: block;
position: relative;
top: 40px;
}

我在本地保存的图像,所以我不得不用换行符代替。只有在点击页面顶部的导航链接之一时才会出现问题。

最佳答案

向每个锚定的 div 添加等于标题高度的填充。

以你的例子为例:

.Page { padding-top:106px; }

Fiddle

关于html - 固定标题重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23963112/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com