固定導航下的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內容

回答

相關問題