很多刚接触前端的可能遇到一些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“是设置了激活，所以一直处于有背景的状态：