制作一个导航栏
新建一个div，添加css代码，使得产生的样式为如下
我们想将块放在中间，居中，那么剧需要用到margin:0 auto，但是margin:0 auto与margin-top：30px的位置先后是有区别的如
<style type="text/css">
#nav{
width: 960px;
height: 35px;
background-color: #ccc;
margin-top: 30px;/*与上面的距离*/
margin: 0 auto;/*设置居中*/
}
</style>此时的结果
看一下，将margin:0 auto放在margin-top:30px之前
<style type="text/css">
#nav{
width: 960px;
height: 35px;
background-color: #ccc;
margin: 0 auto;/*设置居中，他必须放在margin-top之前，否则他会覆盖margin-top的内容，也就是margin-top不起作用*/
margin-top: 30px;/*与上面的距离*/
}
</style>
添加6个li标签，输入ul>(li>a)*6再按一下tab键就可以生成一个ul标签，这个ul标签里面含有6个li标签，6个li标签里面又分别单独对应一个a标签，a标签是一个可以跳转的，href（HTML reference）代表是一个HTML 的可以跳转到其他地方的链接如下：
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>设置一下属性
<style type="text/css">
body,div{/*为了避免兼容性的问题，设置body,div*/
margin: 0;
padding: 0;
}
#nav{
width: 960px;
height: 35px;
background-color: #ccc;
margin: 0 auto;/*设置居中，他必须放在margin-top之前，否则他会覆盖margin-top的内容，也就是margin-top不起作用*/
margin-top: 30px;/*与上面的距离*/
}
#nav ul{/*nav 和 ul 都是块状元素，前面了解到块状元素可以容纳其他块状元素或者内联元素*/
width: 960px;/*设置ul的大小和nav这个块的大小相同*/
height: 35px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">阿里巴巴</a></li><!-- 加#代表不跳转到其他地方-->
<li><a href="#">腾讯</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">小米</a></li>
<li><a href="#">今日头条</a></li>
<li><a href="#">微软</a></li>
</ul>
</div>
我也验证了火狐浏览器，发现火狐浏览器和google的结果是一样的，其中nav块的大小并没有发生变化 ，但是可以发现IE6 自己把容器撑大了，所有的li小块都包含在这个灰色的nav容器当中，添加一个float:left就会横向显示，但是即使设置了float参数，IE的框图还是变大了
现在添加了ul和li标签，那么缺省值里就得对ul和li进行补充
body,div,ul,li{/*为了避免兼容性的问题，设置body,div*/
margin: 0;
padding: 0;
}
那么如何去掉google浏览器中的小圆点呢？则设置list-style属性为空 ，即 list-style:none,看一下此时的google浏览器中状态
由于没有设置了高度，所以只有宽度
加上高度，和nav的高度一致时
设置水平居中text-align: center;/*设置字体水平居中*/，但是并没有垂直居中
设置垂直居中：line-height: 35px;/*设置字体垂直居中*/
添加border: 1px solid #000000;
去掉width属性，可以发现全部靠在了一起
添加一个padding属性padding: 0 10px;/*padding如果有两个值，则前一个值表示上下，而后一个值表示左右距离，但是我们上下的距离是不需要变动的*/
举例子，一个盒子，盒子里面放了易碎物，那么一般都会塞一下海绵或者泡沫，盒子就是一个border，阿里巴巴这些字是放在盒子里面的；而padding就是里面的泡沫，也就是里面的距离，就相当于上面阿里巴巴或者说腾讯等距离他们外边框的距离；而margin就是有两个盒子，而避免这俩个盒子之间发生碰撞、摩擦，进而设置的一定距离，也就是腾讯这个块和阿里巴巴这个块之间的距离，是与外面的元素的距离。
简单地说，border就是一个盒子，padding就是盒子里面的距离，margin就是盒子外面的距离。
此时成功后就可以去掉border了，继续看，设置a标签的属性，设置其font-size为14px，可以发现此时的字体要稍微协调一些
设置一下取消li块的背景颜色，以及设置字体颜色
使用text-decoration: none;/*取消a标签下的下划线*/
导航栏举一反三
hover属性，如#nav ul li a:hover/*表示当鼠标移到a标签上去的时候，他会有什么反应*/
#nav ul li a:hover{/*表示当鼠标移到a标签上去的时候，他会有什么反应*/
background-color: #000000;
color: #FFF;
}
但是发现当鼠标移上去后其结果中只有a标签，也就是字上变黑了，但是效果并不美好，那么我们试试将a标签的高度设置一下
#nav ul li a{
font-size: 14px;
color: #8790A1;
text-decoration: none;/*取消a标签下的下划线*/
height: 35px;
}
但是，显而易见，结果并没有发生变化，为什么呢，因为我们的a标签是一个内联元素，我们了解到内联元素是无法设置大小的，所以即使设置了大小也没有用，那么怎么做，像上面一样将内联元素的显示改为块状元素 ，此时google的所显示的高度已经没有问了
我们再来看看IE6浏览器 ，如下所示变成了竖排，IE实实在在变成了块状，遵循块状不能并排在同一行
那么怎么做呢，学习上面的经验，添加一个float:left,再看看此时的结果中IE6变正常了
但是可以看见，此时无论是IE还是google，出来的结果中宽度还是有问题的，宽度总是比块的大小窄一截 ，因为我们并没有设置a标签的宽度，那么他自然就比li块的宽度 窄一截，那么设置好padding即可
原因在于li标签的那一栏也设的有10px的宽度
那么我们可以去掉li里面的padding：0 10px此时结果就没有问题
可以自己进行更改颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,ul,li{/*为了避免兼容性的问题，设置body,div*/
margin: 0;/*当添加了ul和li属性，则也要在此处加上ul和li*/
padding: 0;
}
#nav{
width: 960px;
height: 35px;
background-color: #E7E7E7;
margin: 0 auto;/*设置居中，他必须放在margin-top之前，否则他会覆盖margin-top的内容，也就是margin-top不起作用*/
margin-top: 30px;/*与上面的距离*/
}
#nav ul{/*nav 和 ul 都是块状元素，前面了解到块状元素可以容纳其他块状元素或者内联元素*/
width: 960px;/*设置ul的大小和nav这个块的大小相同*/
height: 35px;
}
#nav ul li{
float: left;/*使所有li标签的元素都横向显示*/
list-style: none;/*去掉一般浏览器中li标签的圆点*/
/*width: 100px;*/
height: 35px;
/*background-color: #F00;*//*li块的背景*/
text-align: center;/*设置字体水平居中*/
line-height: 35px;/*设置字体垂直居中*/
/*padding: 0 10px;*//*padding如果有两个值，则前一个值表示上下，而后一个值表示左右距离，但是我们上下的距离是不需要变动的*/
/*border: 1px solid #000000;*/
}
#nav ul li a{
font-size: 14px;/*字体大小*/
color: #8790A1;
text-decoration: none;/*取消a标签下的下划线*/
height: 35px;
display: block;/*设置成块状显示，使得其可以设置大小*/
float: left;/*设置使得其可以并排显示*/
padding: 0 10px;
}
#nav ul li a:hover{/*表示当鼠标移到a标签上去的时候，他会有什么反应*/
background-color: #85CE02;/*鼠标移上去时的背景颜色为绿色*/
color: #FFFFFF;/*鼠标移上去的字体颜色*/
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">阿里巴巴</a></li><!-- 加#代表不跳转到其他地方-->
<li><a href="#">腾讯</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">小米</a></li>
<li><a href="#">今日头条</a></li>
<li><a href="#">微软</a></li>
</ul>
</div>
</body>
</html>
导航栏的举一反三（二）
（1）下面做一个好看的背景图片，打开电脑自带的画图工具，选择重新调整大小改成：2*36像素
放大，在下方画一个小块
保存后复制到hbuilder中的img文件夹下
之后就可以添加图片进入li块的背景 background: url('img/n1.png');/*添加图片为背景，图片放置*/ ，并更改鼠标点击后的内容
#nav ul li{
float: left;/*使所有li标签的元素都横向显示*/
list-style: none;/*去掉一般浏览器中li标签的圆点*/
/*width: 100px;*/
height: 35px;
background: url(img/n1.png);/*添加图片为背景，图片放置*/
/*background-color: #F00;*//*li块的背景*/
text-align: center;/*设置字体水平居中*/
line-height: 35px;/*设置字体垂直居中*/
/*padding: 0 10px;*//*padding如果有两个值，则前一个值表示上下，而后一个值表示左右距离，但是我们上下的距离是不需要变动的*/
/*border: 1px solid #000000;*/
}#nav ul li a:hover{/*表示当鼠标移到a标签上去的时候，他会有什么反应*/
background-color: #646464;/*鼠标移上去时的背景颜色为绿色*/
color: #FFFFFF;/*鼠标移上去的字体颜色*/
font-size: 15px;
}查看一下此时的效果
（二）再做一个导航栏，效果图
margin-right: 1px;/*使得li块的右边会有一段距离，产生一个边框，便于观察*/
<!--描述：给hover一个边框-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,ul,li{/*为了避免兼容性的问题，设置body,div*/
margin: 0;/*当添加了ul和li属性，则也要在此处加上ul和li*/
padding: 0;
}
#nav{
width: 960px;
height: 35px;
background-color: #E7E7E7;
margin: 0 auto;/*设置居中，他必须放在margin-top之前，否则他会覆盖margin-top的内容，也就是margin-top不起作用*/
margin-top: 30px;/*与上面的距离*/
}
#nav ul{/*nav 和 ul 都是块状元素，前面了解到块状元素可以容纳其他块状元素或者内联元素*/
width: 960px;/*设置ul的大小和nav这个块的大小相同*/
height: 35px;
}
#nav ul li{
float: left;/*使所有li标签的元素都横向显示*/
list-style: none;/*去掉一般浏览器中li标签的圆点*/
/*width: 100px;*/
height: 35px;
/*background: url(img/n1.png);*//*添加图片为背景，图片放置*/
background-color: #646464;/*li块的背景*/
text-align: center;/*设置字体水平居中*/
line-height: 35px;/*设置字体垂直居中*/
/*padding: 0 10px;*//*padding如果有两个值，则前一个值表示上下，而后一个值表示左右距离，但是我们上下的距离是不需要变动的*/
/*border: 1px solid #000000;*/
margin-right: 1px;/*使得li块的右边会有一段距离，产生一个边框，便于观察*/
}
#nav ul li a{
font-size: 14px;/*字体大小*/
color: #FFF;
text-decoration: none;/*取消a标签下的下划线*/
height: 35px;
display: block;/*设置成块状显示，使得其可以设置大小*/
float: left;/*设置使得其可以并排显示*/
padding: 0 10px;
}
#nav ul li a:hover{/*表示当鼠标移到a标签上去的时候，他会有什么反应*/
background-color: #E7E7E7;/*鼠标移上去时的背景颜色为绿色*/
color: #8790A1;/*鼠标移上去的字体颜色*/
font-size: 15px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">阿里巴巴</a></li><!-- 加#代表不跳转到其他地方-->
<li><a href="#">腾讯</a></li>
<li><a href="#">百度</a></li>
<li><a href="#">小米</a></li>
<li><a href="#">今日头条</a></li>
<li><a href="#">微软</a></li>
</ul>
</div>
</body>
</html>
增加一个圆角，在hover中添加一个border-radius的属性，使得鼠标移动到文字时，显示背景可以有圆角
border-radius: 7px;/*使边框有幅度，有圆角*/
同样的只要设置好相应的颜色就可以得到不同的变化 ，如，对于背景图片，可以自己在画图工具中画一个简单的样式
第二个
第三，改变使得边框有幅度
对比IE浏览器
对比Firefox
964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
