固定導航欄

所以我有一個HTML頁面，併爲我的頭一個固定的形象，但我也想有一個固定的導航欄正下方在那裏我可以有鏈接到另一個頁面我的服務器固定導航欄

上的按鈕

這裏是我的代碼

<!DOCTYPE HTML PUBLIC> 
<title>Equinox Web Chatroom Server</title> 
<style type="text/css"> 
body{ 
margin:0; 
padding:header-<length> 0 0; 
} 
div#header{ 
position:absolute; 
top:0; 
left:0; 
width:500%; 
height:header-<length>; 
} 
@media screen{ 
body>div#header{ 
position:fixed; 
} 
} 
* html body{ 
overflow:hidden; 
} 
* html div#content{ 
height:100%; 
overflow:auto; 
} 
</style> 
<div 
id="header"><img src="http://192.168.0.143/images/header.png"  width="1700" height="46" alt="logo"<br> 
<p> 
    <table> 
    <tr> 
    <td bgcolor= "black"><a href="http://192.168.0.143" color="cyan"style="text-decoration: none">Server Index</a>&nbsp<a href="http://192.168.0.143/chat.html" style="text-decoration: none">Chat Room</a></td> 
    </tr> 
</table> 
</p><br> 
</div>

來源

2015-08-09 Nik Hendricks

這是你的學校項目嗎？ – Shehary

不，我真的很想學習這 –

那麼，模仿標題的CSS或將「navbar」添加到「標題」中有什麼問題？ –

如果要修復的地方元素相對於視口，然後將CSS position: fixed屬性是正確的道路要走。

這可能是你想做什麼：http://jsfiddle.net/hh1kuxyh/

當你上下滾動，你會發現標題和導航欄留在地方。

HTML

<div id="container"> 
    <div id="header"><h2>HEADER IMAGE</h2></div> 
    <div id="navbar"><span>NAVIGATION MENU</span></div> 
</div> 

<div id="main-content"> 
    <p>lots of text here</p> 
</div><!-- end #main-content -->

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

#container { 
    width: 98%; 
    height: 230px; 
    position: fixed; 
    top: 0; 
} 

#header { 
    height: 150px; 
    background-color: chartreuse; 
    text-align: center; 
} 

#header h2 { 
    padding-top: 25px; 
} 

#navbar { 
    height: 75px; 
    background-color: #aaa; 
    text-align: center; 
    border: 2px solid black; 
} 

#navbar span { 
    line-height: 75px; 
    font-weight: bold; 
} 

#main-content { 
    margin-top: 235px; 
}

如果你想在相對固定的地方元素到另一個元素，那麼你可能需要使用有點jQuery。 http://jsfiddle.net/8086p69z/8/

也看到我的兩個答案在這裏：

Position fixed within container element instead of the browser/viewport

最後，我想與您的代碼工作，但它包含了許多錯誤。例如，您的代碼塊缺少<html>，<body>和<head>元素。

請始終通過W3C Mark-Up Validation Service運行您的代碼以檢查錯誤和標準符合性。

希望這會有所幫助。祝你好運！

來源

2015-08-09 04:00:57

回答

相關問題