垂直导航栏
点到哪一个哪一个会换颜色
分析：
本质上就是一个列表。列表的每个元素都是一个链接
对于每一个链接，当点击他的时候，他的背景颜色就会发生改变
第一步：创建垂直列表项，这里仅仅使用了html的列表和链接
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#new">新闻</a></li>
<li><a href="#contact">练习</a></li>
<li><a href="#about">关于</a></li>
</ul>
第二步：修饰垂直列表项，删除列表的标志和消除边距
1.移除列表项前面的小标记。
2.消除浏览器默认的列表项的边距。
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
第三步：设置每个链接的背景和块大小，取消链接格式的下划线
a{
/*取消链接的下划线*/
text-decoration: none;
/*设置块大小*/
display: block;
width: 60px;
/*设置块背景*/
background-color: #7FFFD4;
}
第四步：实现链接的点击时改变颜色的功能，如果被点击也会有特殊效果
通过hover，active实现
li a:hover {
background-color: #555;
color: white;
}
li a:active
{
background-color: #4CAF50;
color: red;
}
第五步：把导航栏弄成可以扩展的导航栏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
/*取消页面的初始设置*/
border:0;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*#设置成为全局的高度*/
position: fixed;
background-color: #f1f1f1;
height: 100%;
overflow: auto;
width: 15%;
/*设置边框线*/
border:1px solid #000000;
}
li{
/*列表项设置边框线，下边框设置边框线*/
border-bottom: 1px solid #000000;
}
li:last-child{
/*最后一个列表项不设置边框*/
border-bottom: none;
}
li a{
/*取消链接的下划线*/
text-decoration: none;
/*设置块大小*/
display: block;
/*设置块背景*/
background-color: #7FFFD4;
font-size: 30px;
font-weight: bold;
}
li a:hover {
/*鼠标经过这个选项时改变颜色*/
background-color: #555;
color: white;
}
li a:active
{
/*鼠标点击时替换颜色*/
background-color: #4CAF50;
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#new">新闻</a></li>
<li><a href="#contact">练习</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
水平导航栏
分析：
1.只要规定所有的列表项浮动起来，横向排列。
2.设置导航栏的高度，宽度铺满屏幕就行了。j
3.设置边框宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
/*取消页面的初始设置*/
border:0;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
/*#设置成为全局的高度*/
position: fixed;
background-color: #f1f1f1;
height: 4%;
overflow: auto;
width: 100%;
/*设置边框线*/
border:1px solid #000000;
}
li{
display: inline-block;
height: 100%;
/*列表项设置边框线，下边框设置边框线*/
border-right: 1px solid #000000;
}
li:last-child{
/*最后一个列表项不设置边框*/
border-right: none;
}
li a{
/*取消链接的下划线*/
text-decoration: none;
/*设置块大小*/
height: 100%;
/*设置块背景*/
background-color: #7FFFD4;
font-size: 30px;
font-weight: bold;
}
li a:hover {
/*鼠标经过这个选项时改变颜色*/
background-color: #555;
color: white;
}
li a:active
{
/*鼠标点击时替换颜色*/
background-color: #4CAF50;
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#new">新闻</a></li>
<li><a href="#contact">练习</a></li>
<li><a href="#about">关于</a></li>
</ul>
</body>
</html>
下拉菜单
简单菜单下拉的实现思路
1.html部分
span里的东西是显示的部分，选项1，选项2是经过后显示的部分
<div class="dropdown">
<span>鼠标经过我这里</span>
<div class="dropdown_content">
<p>选项1</p>
<p>选项2</p>
</div>
</div>
2.css部分
（1）初始状态隐藏dropdown_content类的标签，让他脱离标准流，并且在上图层。
（2）鼠标经过时显示dropdown_content内容
<style>
*{
/*初始化浏览器默认的边距设置*/
margin: 0;
border: 0;
padding: 0;
}
.dropdown{
position: relative;
display: inline-block;
}
.dropdown_content{
/*初始状态下看不到展开的内容*/
display: none;
/*脱离标准流，显示的时候不会影响标准流，只会在标准流的上方*/
position: absolute;
z-index: 1;
/*设置背景和阴影*/
background-color: #7FFFD4;
box-shadow: 0px 1px 0px 1px #a1a1a1;
padding: 12px 16px;
}
.dropdown:hover .dropdown_content{
/*鼠标经过的时候display属性改变*/
display: block;
}
</style>
3.如果想要更好看的可以参照菜鸟教程，可以把所有的都换成按钮或者链接，并且设置背景和阴影等等。
http://www.runoob.com/try/try.php?filename=trycss_dropdown_button
综合
1.导航栏+下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
/*初始化浏览器默认的边距设置*/
margin: 0;
border: 0;
padding: 0;
}
ul {
list-style-type: none;
float: left;
/*#设置成为全局的高度*/
/*position: fixed;*/
/*注意此处必须把fixed取消*/
/*因为fixed会脱离标准流，正文内容会有一部分在导航栏下面，并且导航栏高度需要手动指定*/
/*因此默认就可以了*/
overflow: auto;
width: 100%;
background-color: #a1a1a1;
}
li{
float: left;
}
li .dropdown a{
/*取消链接的下划线*/
text-decoration: none;
/*设置块大小*/
height: 100%;
/*设置块背景*/
background-color: #7FFFD4;
font-size: 30px;
font-weight: bold;
/*设置边框线*/
border: 1px solid #000000;
}
li .dropdown a:hover {
/*鼠标经过这个选项时改变颜色*/
background-color: #555;
color: white;
}
li .dropdown a:active
{
/*鼠标点击时替换颜色*/
background-color: #4CAF50;
color: red;
}
/*每个下拉按钮的设置*/
.dropdown{
display: inline-block;
}
.dropdown_content{
/*初始状态下看不到展开的内容*/
display: none;
/*脱离标准流，显示的时候不会影响标准流，只会在标准流的上方*/
position: absolute;
z-index: 1;
/*设置背景和阴影*/
background-color: #7FFFD4;
box-shadow: 0px 1px 0px 1px #a1a1a1;
}
.dropdown_content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown_content{
/*鼠标经过的时候display属性改变*/
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<div class="dropdown">
<a>主页</a>
<div class="dropdown_content">
<a>主页选项1</a>
<a>主页选项2</a>
</div>
</div>
</li>
<li>
<div class="dropdown">
<a>新闻</a>
<div class="dropdown_content">
<a>新闻选项1</a>
<a>新闻选项2</a>
</div>
</div>
</li>
<li>
<div class="dropdown">
<a>练习</a>
<div class="dropdown_content">
<a>练习选项1</a>
<a>练习选项2</a>
</div>
</div>
</li>
<li>
<div class="dropdown">
<a>关于</a>
<div class="dropdown_content">
<a>关于选项1</a>
<a>关于选项2</a>
</div>
</div>
</li>
</ul>
<p>neirong</p>
<p>neirong</p>
<p>neirong</p>
<p>neirong</p>
</body>
</html>