定位導航欄，使其固定

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link href="main.css" rel="stylesheet"/> 
<title>Vasilios Lambos</title> 
</head> 

<body> 
<div class="header"> 
<a class="logo" href="home.html"><img src="VL-Logo.png"></a> 
</div> 
<nav role="navigation"> 
<div class="Nav"> 
    <a href="home.html">Home</a></li> 
    <a href="portfolio.html">Portfolio</a></li> 
    <a href="process.html">Process</a></li> 
    <a href="#">Contact</a></li> 

</div> 
</nav> 
<div class="jumbotron"> 
<h1>Vaslios Lambos</h1> 
<p>Industrial and Interaction Designer</p> 

</div> 

<div class="info"> 
<div class="container"> 
<h3>Overview</h3> 
<p> ### </p> 

</div> 

</div> 
<div class="footer"> 
<h3>Soft & Hard skills</h3> 
<ul> 
    <li>Adobe Suite</li> 
    <li>Axure RP</li> 
    <li>HTML/CSS/Javascript</li> 

</ul> 

</div> 


</body> 
</html> 

@charset "UTF-8"; 

@font-face { 
font-family: Verdana, Geneva, sans-serif; 
} 

body { 
font-family:Verdana, Geneva, sans-serif; 
background-color: #FFF; 
margin:auto; 
/*border:2px solid red;*/ 
} 

div.header { 
float:right; 
} 


div.Nav a{ 
background-color: #FFF; 
color: #000; 
font-size: 11px; 
font-weight: bold; 
margin: 0px; 
padding:32px; 
text-transform:uppercase; 
text-decoration:none; 
/*border-radius: 4px 4px 4px 4px;*/ 
} 


div.Nav a:hover { 
background-color: orange; 
} 

div.jumbotron{ 
position:relative; 
top:30px; 
background-color: #000; 
color:white; 
text-align:center; 
padding:20px; 
height:400px; 
} 

div.info { 
background-color: #FFF; 
color:black; 
padding:20px; 
height:400px; 
} 
div.footer{ 
background-color:#000; 
color:white; 
height:400px; 
clear:both; 
padding:20px; 
}

我想讓導航欄固定在站點上，所以當您上下滾動時，它會停留在一個位置。我也計劃在Photoshop中展示圖像，設計工作和界面，並將它們放在Axure中。定位導航欄，使其固定

我的網站與該代碼更新，可以在vasilioslambos.com可以看出

來源

2016-02-05 Billy Lambos

你可以把代碼小提琴或文本，而不是圖像？ – Krii

請包括代碼，而不是代碼的截圖。這有助於我們爲您提供幫助，因爲我們可以輕鬆地複製代碼以自行嘗試，並幫助搜索引擎正確指出問題。 –

謝謝你的發表！你能更新你的帖子來顯示一個問題嗎？我發現標籤消失了，但你現在想要達到的目標是什麼？ – cdslijngard

最好能包住你想在一個新的div即靜態一切

<body> 
<div id="fixed"> 
<div class="header"> 
<a class="logo" href="home.html"><img src="VL-Logo.png"></a> 
</div> 
<nav role="navigation"> 
<div class="Nav"> 
    <a href="home.html">Home</a></li> 
    <a href="portfolio.html">Portfolio</a></li> 
    <a href="process.html">Process</a></li> 
    <a href="#">Contact</a></li> 

</div> 
</nav> 
</div>

CSS

#fixed{position:fixed; 
top:0; 
width:100%; 
z-index:9999;/*High z-index so nothing can hide it*/ 
background:rgb(255,255,255); 
padding:5px 0; 
} 
*{margin:0;padding:0;}

並更改此設置

div.Nav a{ 
background-color: #FFF; 
color: #000; 
font-size: 11px; 
font-weight: bold; 
margin: 0px; 
padding:5px 32px;/* dont need 32px on the top, left, bottom, right*/ 
text-transform:uppercase; 
text-decoration:none; 
/*border-radius: 4px 4px 4px 4px;*/ 
}

這會影響jumbotron，所以你最好不要經常使用你所有部分的position屬性。如果我的html代碼不能自動對齊，我只會將它用作覆蓋。

吱吱從超大屏幕刪除position屬性，它會融入地方

來源

2016-02-05 23:28:35 MattPW

我很困惑，你能否進一步解釋。我對div.jumbotron有很高的評價。謝謝 –

對不起，答案是一個不同的問題。 – MattPW

當我添加div和css的導航欄被擊倒的地方，圖像丟失了它的位置 –

定位導航欄，使其固定

回答

相關問題