将“导航栏”固定到页面顶部 [英] Fixing Nav Bar to top of page
本文介绍了将“导航栏”固定到页面顶部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在重新设计网站，我在CSS3中创建了一个导航栏。我想永久修复该栏，在页面的顶部，这样，当滚动它将永远是正确的在你的顶部。这里是到目前为止的代码：
I'm in the process of redesigning a website and I've created a nav bar in CSS3. I would like to permanently fix that bar to the top of the page so that when scrolling it would always be right in front of you at the top. Here is the code so far:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content:'';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*---------- BODY --------------------------------*/
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
a {
text-decoration: none;
}
/*---------- Wrapper --------------------*/
nav {
width: 100%;
height: 80px;
background: #222;
}
ul {
text-align: right;
}
ul li {
font: 13px Verdana, 'Lucida Grande';
cursor: pointer;
-webkit-transition: padding .05s linear;
-moz-transition: padding .05s linear;
-ms-transition: padding .05s linear;
-o-transition: padding .05s linear;
transition: padding .05s linear;
}
ul li.drop {
position: relative;
}
ul > li {
display: inline-block;
}
ul li a {
line-height:80px;
padding: 0 10px;
height: 80px;
color: #777;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
ul li a:hover {
color: #eee;
}
.dropOut .triangle {
width: 0;
height: 0;
position: absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain {
width: 160px;
position: absolute;
z-index: 2;
left: 50%;
margin-left: -80px;
/* half of width */
top: -400px;
}
.dropOut {
width: 160px;
background: white;
float: left;
position: relative;
margin-top: 0px;
opacity: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
-ms-transition: all .1s ease-out;
-o-transition: all .1s ease-out;
transition: all .1s ease-out;
}
.dropOut ul {
float: left;
padding: 10px 0;
}
.dropOut ul li {
text-align: left;
float: left;
width: 125px;
padding: 12px 0 10px 15px;
margin: 0px 10px;
color: #777;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background .1s ease-out;
-moz-transition: background .1s ease-out;
-ms-transition: background .1s ease-out;
-o-transition: background .1s ease-out;
transition: background .1s ease-out;
}
.dropOut ul li:hover {
background: #f6f6f6;
}
ul li:hover a {
color: white;
}
ul li:hover .dropdownContain {
top: 65px;
}
ul li:hover .underline {
border-bottom-color: #777;
}
ul li:hover .dropOut {
opacity: 1;
margin-top: 8px;
}
我也想知道如何修复导航栏中的链接bold in CSS3？我尝试使用字体权重，但是似乎没有工作，所以我不得不进入HTML和单独加粗每个链接。
Also I was wondering how do you fix the links in the nav bar to be bold in CSS3? I tried using font-weight but that didn't seem to work and so I had to go into the HTML and bold each link individually. Any other suggestions on the nav bar would be greatly appreciated but not expected.
以下是HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="nav.css">
</head>
<body>
<nav>
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><a href="#"><strong>About</strong></a></li>
<li class="drop">
<a href="#"><strong>Contact</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>FAQs</strong></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><strong>Custom Drums</strong></a></li>
<li class="drop">
<a href="#"><strong>Drum Shows</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>PA Show</strong></li>
</ul>
</div>
</div>
</li>
<li class="drop">
<a href="#"><strong>Parts</strong></a>
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li><strong>Snare</strong></li>
<li><strong>Bass and Tom</strong></li>
<li><strong>Heads</strong></li>
</ul>
</div>
</div>
</li>
<li><a href="#"><strong>Services</strong></a></li>
<li><a href="#">Links</a></li>
</ul>
</nav>
</body>
</html>
推荐答案
应该 position：fixed
如果你希望它保持在顶部给它 top：0; left：0
if you want it to stay at the top give it top:0;left:0
这篇关于将“导航栏”固定到页面顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
