html - 修复导航栏从导航跳转到部分页面时隐藏内容
问题描述
例如,当我单击导航时,我Home
会到达,Home
但它从导航后面开始,我希望它从导航下方开始。我已经尝试过身体padding-top
,但没有任何反应。IDK如何解决这个问题。
这是代码:
html,
body,
#pages {
font-family: Arial, Helvetica;
line-height: 1.25;
padding: 0;
margin: 0;
background-color: #0d0d0d;
color: #e6e6e6;
}
/* Global */
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
.container1 {
width: 100%;
margin: auto;
overflow: hidden;
}
#First a {
border-left: 2px solid #808080;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
#Last a {
border-right: 2px solid #808080;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
/* Header */
header {
overflow: hidden;
background-color: #e6e6e6;
color: #0d0d0d;
padding-top: 10px;
margin: 0;
min-height: 70px;
border-bottom: #808080 5px solid;
position: fixed;
width: 100%;
top: 0px;
}
header a {
font-weight: bold;
text-decoration: none;
font-size: 20px;
color: #e6e6e6;
margin: 0px;
padding: 10px;
background-color: #0d0d0d;
border-top: 2px solid #808080;
border-bottom: 2px solid #808080;
}
header a:hover {
color: #0d0d0d;
background-color: #e6e6e6;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline-block;
padding: 5px 0px 10px 0px;
}
header .logo {
float: left;
}
header .logo h1 {
margin-top: 10px;
}
header nav {
float: right;
margin-top: 15px
}
/* Text Boxy */
#pages {
float: left;
margin-top: 100px;
overflow: hidden;
}
.textBox {
border-radius: 5px;
border: 3px solid #e6e6e6;
margin-bottom: 50px;
margin-top: 100px;
}
.textArea {
padding: 0 10px;
}
footer {
background-color: #e6e6e6;
color: #0d0d0d;
text-align: center;
padding-bottom: 1px;
margin: 0;
}
#footer {
border-top: 5px #808080 solid;
}
<header>
<div class="container">
<div class="logo">
<h1>Airsoft Košťany</h1>
</div>
<nav>
<ul>
<li id="First"><a href="#Home">Home</a></li>
<li><a href="#Team">Team</a></li>
<li><a href="#Edit">Edit</a></li>
<li id="Last"><a href="#Kontakt">Kontakt</a></li>
</ul>
</nav>
</div>
<!-- End Container-->
</header>
<section id="pages">
<div class="container">
<div class="textBox" id="Home">
<div class="textArea">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
<br>
<br>
</div>
</div>
<div class="textBox" id="Team">
<div class="textArea">
<h3>Team</h3>
<p>Dalibor Trampota</p>
<img src="">
<p>Hodnost: Zakladatel <br> Role: Sniper <br> PlayStyle: Utočný sniper<br> Výbava: MB4403D Sniper Rifle</p>
<br>
<br>
<p>Vašek Franta Václav</p>
<img src="">
<p>Hodnost: <br> Role: Assault <br> PlayStyle: <br> Výbava: AK74-S</p>
<br>
<br>
</div>
</div>
<div class="textBox" id="Edit">
<div class="textArea">
<h3>Edit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
<br>
<br>
</div>
</div>
<div class="textBox" id="Kontakt">
<div class="textArea">
<h3>Kontakt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
<br>
<br>
</div>
</div>
<div class="textBox" id="Page4">
<div class="textArea">
<h3>Edit4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
<br>
<br>
</div>
</div>
</div>
<!-- End Container-->
</section>
<div class="container1">
<footer>
<div id="footer">
<p><b>Název Sem, Copyright ©, 2018</b></p>
</div>
</footer>
</div>
我想用 onlyhtml
和css
not修复它javascript
,谢谢。
解决方案
这是一篇很棒的文章,描述了如何做到这一点。为此,您必须使用伪元素 ( ::before
) 并创建负边距和您希望的高度,以使其在导航下可见。
#Home::before {
display: block;
content: " ";
margin-top: -45px;
height: 45px;
visibility: hidden;
pointer-events: none;
}
你必须为所有id
想要内部导航的 s执行此操作,例如 - Home
、Team
、Edit
、Kontakt
等。
这是完整的代码:
html,
body,
#pages {
font-family: Arial, Helvetica;
line-height: 1.25;
padding: 0;
margin: 0;
background-color: #0d0d0d;
color: #e6e6e6;
}
/* Global */
.container {
width: 85%;
margin: auto;
overflow: hidden;
}
.container1 {
width: 100%;
margin: auto;
overflow: hidden;
}
#First a {
border-left: 2px solid #808080;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
#Last a {
border-right: 2px solid #808080;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
}
/* Header */
header {
overflow: hidden;
background-color: #e6e6e6;
color: #0d0d0d;
padding-top: 10px;
margin: 0;
min-height: 70px;
border-bottom: #808080 5px solid;
position: fixed;
width: 100%;
top: 0px;
}
header a {
font-weight: bold;
text-decoration: none;
font-size: 20px;
color: #e6e6e6;
margin: 0px;
padding: 10px;
background-color: #0d0d0d;
border-top: 2px solid #808080;
border-bottom: 2px solid #808080;
}
header a:hover {
color: #0d0d0d;
background-color: #e6e6e6;
}
header ul {
margin: 0;
padding: 0;
}
header li {
float: left;
display: inline-block;
padding: 5px 0px 10px 0px;
}
header .logo {
float: left;
}
header .logo h1 {
margin-top: 10px;
}
header nav {
float: right;
margin-top: 15px
}
/* Text Boxy */
#pages {
float: left;
margin-top: 100px;
overflow: hidden;
}
#Home::before {
display: block;
content: " ";
margin-top: -45px;
height: 45px;
visibility: hidden;
pointer-events: none;
}
#Team::before {
display: block;
content: " ";
margin-top: -45px;
height: 45px;
visibility: hidden;
pointer-events: none;
}
#Edit::before {
display: block;
content: " ";
margin-top: -45px;
height: 45px;
visibility: hidden;
pointer-events: none;
}
#Kontakt::before {
display: block;
content: " ";
margin-top: -45px;
height: 45px;
visibility: hidden;
pointer-events: none;
}
.textArea {
border-radius: 5px;
border: 3px solid #e6e6e6;
margin-bottom: 50px;
margin-top: 100px;
padding: 0 10px;
}
footer {
background-color: #e6e6e6;
color: #0d0d0d;
text-align: center;
padding-bottom: 1px;
margin: 0;
}
#footer {
border-top: 5px #808080 solid;
}
<header>
<div class="container">
<div class="logo">
<h1>Airsoft Košťany</h1>
</div>
<nav>
<ul>
<li id="First"><a href="#Home">Home</a></li>
<li><a href="#Team">Team</a></li>
<li><a href="#Edit">Edit</a></li>
<li id="Last"><a href="#Kontakt">Kontakt</a></li>
</ul>
</nav>
</div>
<!-- End Container-->
</header>
<section id="pages">
<div class="container">
<div class="textBox" id="Home">
<div class="textArea">
<h3>Home</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
<br>
<br>
</div>
</div>
<div class="textBox" id="Team">
<div class="textArea">
<h3>Team</h3>
<p>Dalibor Trampota</p>
<img src="">
<p>Hodnost: Zakladatel <br> Role: Sniper <br> PlayStyle: Utočný sniper<br> Výbava: MB4403D Sniper Rifle</p>
<br>
<br>
<p>Vašek Franta Václav</p>
<img src="">
<p>Hodnost: <br> Role: Assault <br> PlayStyle: <br> Výbava: AK74-S</p>
<br>
<br>
</div>
</div>
<div class="textBox" id="Edit">
<div class="textArea">
<h3>Edit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
<br>
<br>
</div>
</div>
<div class="textBox" id="Kontakt">
<div class="textArea">
<h3>Kontakt</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
<br>
<br>
</div>
</div>
<div class="textBox" id="Page4">
<div class="textArea">
<h3>Edit4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales, lacus nec posuere laoreet, erat enim lacinia ipsum, sit amet auctor tellus nibh non purus. Fusce nec eros pellentesque, hendrerit justo at, pulvinar sem. Aliquam velit tortor,
tristique quis consequat ut, dictum vel tellus. Morbi eu facilisis justo. Morbi lobortis placerat nunc, eget facilisis enim facilisis eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus at
laoreet magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper ut odio non sagittis. Aenean in mi ut turpis elementum facilisis. Vestibulum at tortor ut odio efficitur aliquet. Ut pretium pharetra odio quis finibus.</p>
<br>
<br>
</div>
</div>
</div>
<!-- End Container-->
</section>
<div class="container1">
<footer>
<div id="footer">
<p><b>Název Sem, Copyright ©, 2018</b></p>
</div>
</footer>
</div>
Amd 这是 jsfiddle:http: //jsfiddle.net/drq9hm70/6/
推荐阅读
- python - TensorFlow:为什么 tf.Dataset.map() 只处理我数据集中的第一个示例?
- python - 组合字符串列表,提高性能
- angular - NativeScript 自动完成来自远程服务器的数据
- sql - 如何根据重复值在sql中使用row Num()
- python - 如何修复 Python 不打印我的所有字符串
- node.js - 为什么即使更新确实发生了 findOneAndUpdate 也不返回文档?
- qt - QML 中数组的最大大小是多少?
- python - 元素可见但 webdriver 找不到
- excel - 使用 LOOP/IFERROR/INDEX/MATCH 类型不匹配
- python - 用于情感分析的初学者 Python:AttributeError: 'list' object has no attribute