很多刚接触前端的可能遇到一些css能解决的小问题，我现在总结了一些，将会逐渐和大家分享，先是导航的背景问题，在网页中常常看到，当鼠标放到一个导航按钮上面是，就会出现一些特效，比如背景，这是最常用的，我们就来解决一下，这是所有导航都能用到的方法，能够去一反三的方法。
html代码如下：
1 <html> ......... 2 <body> 3 <div id="nav"> 4 <ul> 5 <li><a href=""><strong><span>首页</span></strong></a></li> 6 <li><a href=""><strong><span>关于我们</span></strong></a></li> 7 <li><a href=""><strong><span>联系我们</span></strong></a></li> 8 <li><a href=""><strong><span>会员专区</span></strong></a></li> 9 </ul> 10 </div> 11 </body> 12 </html>
css代码如下：
1 #nav {width:300px;height:80px;padding_top:20px;margin:0 auto;} 2 #nav li{float:left;heigth60px;margin-left:10px;} 3 #nav a{float:left;heigth60px;line-height:60px;font......}//设置li的文本的高度，效果是居中； 4 #nav strong{float:left;height:60px;} 5 #nav span{float:left;height:60px;padding:0 14px;}//设置每个li的左右的宽度； 6 //把鼠标放到导航上的背景效果 7 #nav a:hover {background:url(.......) repeat-x;}//中间背景重复； 8 #nav a:hover strong{background:url(.......) no-repeat left;}//左边背景，不重复，放在左边； 9 #nav a:hover span{background:url(.......) no-repeat right;}//右边背景，不重复，放在右边；
上面需要修改的地方：
1.html文件中需要添加css文件导入； 2.css文件中路径需要改正，选中需要用到的图片。
这是我之前自己写的运行效果如图（上面的示例代码，不完全，不能运行）：
当鼠标放在第二个导航按钮上时，就会出现圆角的一张背景图片，因为第一个”HOME“是设置了激活，所以一直处于有背景的状态：
