Navbar使其成为中心页面 [英] Navbar make it center page
本文介绍了Navbar使其成为中心页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
hi
-
请你能帮我做导航栏中心网页
i的导航栏div,我用这个代码
宽度960像素和保证金:自动;但不工作
hi
--
please can you help me about to do navbar center webpage
i mean div for navbar, I use this code
width 960 px and margin: auto; but not working
<div class="navbar" id="myNavbar">
<a class="nav-logo" href="#"><img src="images/icon.png" width="32" height="32" alt=""></a>
<a class="nav-list" href="#news">News</a>
<a class="nav-list" href="#contact">Contact</a>
<a class="nav-list" href="#about">About</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
<a class="nav-list" id="nav-list-right" href="#downloads">Downloads</a>
</div>
.navbar {
overflow: hidden;
background-color: transparent;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #444;
text-align: center;
padding: 14px 16px;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 17px;
}
.navbar a:hover {
color: #999999;
}
.navbar .icon {
display: none;
}
.nav-list {
margin-top: 8px;
}
.nav-logo {
margin-left: 10px;
margin-top: 3px;
}
#nav-list-right {
float: right;
margin-right: 10px;
}
<script>
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
我尝试过:
我使用此代码
宽度960像素和保证金:自动;但没有工作
What I have tried:
I use this code
width 960 px and margin: auto; but not working
推荐答案
我忘了为手机添加
i forget to added for mobile
/************************** Responsive Web Design NAVBAR **/
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
#nav-list-right {
float: left;
}
.navbar {
background-color: #FAFAFA;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive .icon {
position: absolute;
right: 0;
bottom:0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
这篇关于Navbar使其成为中心页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文