文章/答案/技术大牛

发布

问定位导航栏，使其固定
EN

Stack Overflow用户

提问于 2016-02-06 02:01:32

回答 1查看 57关注 0票数 0

    <!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上查看

position

html

css

navigation

回答 1

Stack Overflow用户

发布于 2016-02-06 07:28:35

最好将您想要静态的所有内容包装在一个新的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属性，它就可以放入place

了

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35230627

复制

相似问题

问定位导航栏，使其固定
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问定位导航栏，使其固定EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问定位导航栏，使其固定
EN