布局导航栏
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了布局导航栏相关的知识，希望对你有一定的参考价值。
CSS
#nationer{
margin: 0 auto;
padding: 0 auto;
}
.nav{
/* 导航栏固定时默认为盒子大小，不符合设计理念
解决的问题就是导航栏宽度设置为100% 盒子到延伸到整个页面*/
width: 100%;
top: 0%;
left: 0%;
/* 盒子位于最顶端 */
position: fixed;
/* border: 2px solid green; */
}
.nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
/* 内容溢出抉择-hidden表示剪切掉 */
/* visible默认值。内容不会被修剪，会呈现在元素框之外。 */
background-color: #333;
}
.ul-first{
background-color: #4CAF50;
}
.nav ul li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav ul li{
float: left;
}
.nav ul li a:hover{
background-color: #111;
}
button{
height: 49px;
}
.dropdown {
/* 为了方便做button的css样式 */
position: relative;
display: inline-block;
/* border: 1.9px solid; */
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 15px;
border: none;
/* 鼠标放在一个元素范围内时所用的光标显示 */
cursor: pointer;
/* 边框圆角设置 */
border-radius: 0px;
}
/* 经过这个dropdown时变成深色，两种写发但是这个效果在这里是类似的 */
/* 鼠标经过 dropdown时 （父级下的）.dropbtn时变*/
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
/* .dropbtn:hover {
background-color: #3e8e41;
} */
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
/* min-width 属性设置元素的最小宽度。
如果一个元素没有设置最小宽度(min-width)，
这时当浏览器缩小到一定程度时，元素中的布局可能会发生变化，
如果想要保持不变可以给元素（如div)设置最小宽度属性 */
min-width: 160px;
/* 给盒子添加一个边框阴影
box-shadow 向框添加一个或多个阴影 */
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* border: 2px solid; */
}
.dropdown-content a {
background-color:#333;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content{
display: block;
}
.dropdown-content a:hover {
background-color: #111
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="12-导航栏.css" type="text/css">
<title>导航栏</title>
</head>
<body>
<div id="nationer">
<div class="nav">
<ul>
<li><a href="#" style=" background-color: #4CAF50;">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
<!-- 这里的div为啥不换行！！！，问老师 -->
<!-- 为啥这里的内容剪切会导致不相符的内容消失 -->
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="//www.runoob.com">菜鸟教程 1</a>
<a href="//www.runoob.com">菜鸟教程 2</a>
<a href="//www.runoob.com">菜鸟教程 3</a>
</div>
</div>
</ul>
</div>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
<p>勇敢牛牛，不怕困难</p>
</div>
</body>
</html>
以上是关于布局导航栏的主要内容，如果未能解决你的问题，请参考以下文章