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:
我正在重新设计一个网站,我在CSS3中创建了一个导航栏。我想永久性地将该栏固定到页面顶部,这样在滚动时它总是在你面前的顶部。这是到目前为止的代码:
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;
}
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.
另外我想知道如何修复导航栏中的链接在CSS3中加粗?我尝试使用font-weight,但似乎没有用,所以我不得不进入HTML并单独加粗每个链接。导航栏上的任何其他建议将非常感激,但不是预期的。
Here is the HTML code:
这是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>
3 个解决方案
#1
2
anything you want to stay on the page as you scroll should be position:fixed
滚动时要保留在页面上的任何内容都应该是位置:固定
if you want it to stay at the top give it top:0;left:0
如果你希望它保持在顶部给它顶部:0;左:0
#2
0
For fixing the Nav bar include this:
要修复导航栏,请执行以下操作:
nav
{
Position:fixed;
}
To make links to Bold, try these property values:
要建立Bold链接,请尝试以下属性值:
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
#3
0
You just need to use position:fixed and left:0px; top:0px to place at top left of screen
你只需要使用position:fixed和left:0px;顶部:0px放置在屏幕的左上角
see fiddle: http://jsfiddle.net/Jammycoder/LhjL5s4r/
看小提琴:http://jsfiddle.net/Jammycoder/LhjL5s4r/
#1
2
anything you want to stay on the page as you scroll should be position:fixed
滚动时要保留在页面上的任何内容都应该是位置:固定
if you want it to stay at the top give it top:0;left:0
如果你希望它保持在顶部给它顶部:0;左:0
#2
0
For fixing the Nav bar include this:
要修复导航栏,请执行以下操作:
nav
{
Position:fixed;
}
To make links to Bold, try these property values:
要建立Bold链接,请尝试以下属性值:
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
#3
0
You just need to use position:fixed and left:0px; top:0px to place at top left of screen
你只需要使用position:fixed和left:0px;顶部:0px放置在屏幕的左上角
see fiddle: http://jsfiddle.net/Jammycoder/LhjL5s4r/
看小提琴:http://jsfiddle.net/Jammycoder/LhjL5s4r/