定位导航栏，使其固定

<!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的导航栏被击倒的地方，图像丢失了它的位置 –

定位导航栏，使其固定

回答

相关问题