固定导航下的HTML内容

如何将我的内容放在我的导航下？每当我在里面放一些文字时，它就会落在绿色的背景之后，并被导航覆盖。请请帮助我如何把我的文字导航固定导航下的HTML内容

<html> 
 
<style> 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    background-color: #1E9600; 
 
\t position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
\t height:75px; 
 
} 
 

 

 
li { 
 
    float: left; 
 
\t height:75px; 
 
\t border-right: 5px solid red; 
 
} 
 
li:last-child { 
 
    border-right: none; 
 
} 
 
li a { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 

 
li a:hover:not(.active) { 
 
    background-color: yellow; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
} 
 
</style>e> 
 

 

 
</style> 
 
<head> 
 
<title> E-Benta </title> 
 

 
<ul> 
 
<li><a href="Home.html"> <img src="logo.png"> </img> </a> 
 
<li><a href ="Home.html">Home </a></li> 
 
<li><a href ="Products.html">Products </a> 
 
<li><a href ="about.html">About us </a> 
 
<li><a href ="contact.html">Contact us </a> 
 
</ul> 
 
</head> 
 
<spacer>testing </spacer> 
 

 
</body> 
 

 
</html>

来源

2016-11-18 theodore

下如果您添加到您的验证码

spacer { 
    display: block; 
    margin-top: 75px; 
}

一切都会好的。只需添加大于固定菜单高度的边界顶部。

检查片段在这里：http://codepen.io/Dzongkha/pen/PbbvLZ

来源

2016-11-18 11:13:02

感谢兄弟，无论如何，你应该考虑我应该把我的主页上的内容？ – theodore

对不起，我无法就您网页上的内容提供建议，但我希望我的回答能帮助您解决您的问题=） –

它的工作原理，感谢您的帮助！ – theodore

你需要留在顶部空间（多达头）。您可以使用保证金顶部。

内嵌代码会

<spacer style="margin-top:90px;float: left;">testing </spacer>

您可以为创建类，并分配到侧墙为好。

<html> 
 
<style> 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
    background-color: #1E9600; 
 
\t position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
\t height:75px; 
 
} 
 

 

 
li { 
 
    float: left; 
 
\t height:75px; 
 
\t border-right: 5px solid red; 
 
} 
 
li:last-child { 
 
    border-right: none; 
 
} 
 
li a { 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 

 
li a:hover:not(.active) { 
 
    background-color: yellow; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
} 
 
</style>e> 
 

 

 
</style> 
 
<head> 
 
<title> E-Benta </title> 
 

 
<ul> 
 
<li><a href="Home.html"> <img src="logo.png"> </img> </a> 
 
<li><a href ="Home.html">Home </a></li> 
 
<li><a href ="Products.html">Products </a> 
 
<li><a href ="about.html">About us </a> 
 
<li><a href ="contact.html">Contact us </a> 
 
</ul> 
 
</head> 
 
<spacer style="margin-top:90px;float: left;">testing </spacer> 
 

 
</body> 
 

 
</html>

来源

2016-11-18 11:15:55

正如我在这里看到你的代码的HTML结构是不妥当的，应该是这样

`<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Document</title> 

     <!-- YOUR CSS <style> or <link> tag GOES HERE --> 

    </head> 
    <body> 

     <!-- YOUR CONTENT ELEMENT SHOULD BE HERE --> 

    </body> 
</html>`

body{ 
 
margin-top:60px; /* IF Navigation is fixed top you have to put margin top to body as header hight */ 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 60px; 
 
    } 
 
    li { 
 
    float: left; 
 
    border-right: 5px solid #ddd; 
 
    } 
 
    li:last-child { 
 
    border-right: none; 
 
    } 
 
    li a { 
 
    display: block; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 22px 15px; 
 
    text-decoration: none; 
 
    } 
 
    li a:hover:not(.active) { 
 
    background-color: #fff; 
 
    color:#333; 
 
    } 
 
    .active { 
 
    background-color: #4CAF50; 
 
    } 
 

 
/*MAIN CONTENT CSS HERE*/ 
 
.main-content-here{ 
 
    padding:15px; 
 
}

<ul> 
 
    <li><a href="Home.html"><img src="logo.png" /></a></li> 
 
    <li><a href="Home.html">Home </a></li> 
 
    <li><a href="Products.html">Products </a></li> 
 
    <li><a href="about.html">About us </a></li> 
 
    <li><a href="contact.html">Contact us </a></li> 
 
</ul> 
 
<div class="main-content-here"> 
 
    <spacer>testing</spacer> 
 
</div>

和最后

练习完美!!!! :)

来源

2016-11-18 14:18:58 Draval

固定导航下的HTML内容

回答

相关问题