有几天了，一直在看CSS的视频，反反复复看了几遍，也不能保证会用了。。。跟着视频用css写个导航，开心的是原来漂亮的导航也是可以用最基础的东西写出来的！先看成品：nav.html

写这个的过程中，突然间想起来上大学的时候，学习过VB的课程，老师讲了个一个故事，关于母猪带小猪乘船过河的事情，虽然我是相当的不理解，为什么一个学习投资专业的，要学习计算机编程语言课程？！！ 不过据说这个故事是所有学编程的人都要听的故事？我想说的是：达到同样的效果，真的有很多种方式，就拿这个导航来说就有两种css写法：

一、最笨的方法：

@charset “utf-8”;
/* CSS Document */
div{
height:87px;
background:url(2.png) 0 -200px repeat-x;
}
a{
display:block;
width:66px;
height:66px;
/* border:1px solid #000000; */
float:left;
margin-top:10px;
margin-left:10px;
background:url(2.png);
}
.a1 {
background-position:-20px -10px;
}
.a1:hover{
background-position:-19px -96px;
}
.a2 {
background-position:-92px -10px;
}
.a2:hover{
background-position:-92px -96px;
}
.a3 {
background-position:-168px -10px;
}
.a3:hover{
background-position:-166px -96px;
}
.a4 {
background-position:-242px -10px;
}
.a4:hover{
background-position:-240px -96px;
}
.a5 {
background-position:-315px -10px;
}
.a5:hover{
background-position:-315px -96px;
}
.a6 {
background-position:-389px -10px;
}
.a6:hover{
background-position:-389px -96px;
}
.a7 {
background-position:-465px -10px;
}
.a7:hover{
background-position:-463px -96px;
}
.a8 {
background-position:-539px -10px;
}
.a8:hover{
background-position:-537px -96px;
}

二、看了让人赏心悦目的方法：

@charset “utf-8”;
/* CSS Document */
body{margin:0;}
a{float:left;
background:url(../img/2.png) no-repeat;
margin-top:5px;
display:block;
width:73px;
height:70px;
overflow:hidden;}
#menu{ height:87px;
background:url(../img/2.png) repeat-x -0px -200px;
overflow:hidden;
text-align:center;
line-height:87px;
}

#menu .home{background-position:-14px -5px;}
#menu .home:hover{background-position:-14px -92px;}
#menu .front{background-position:-90px -5px;}
#menu .front:hover{background-position:-90px -92px;}
#menu .next{background-position:-162px -5px;}
#menu .next:hover{background-position:-162px -92px;}
#menu .tools{background-position:-236px -5px;}
#menu .tools:hover{background-position:-236px -92px;}
#menu .web{background-position:-310px -5px;}
#menu .web:hover{background-position:-310px -92px;}
#menu .lock{background-position:-384px -5px;}
#menu .lock:hover{background-position:-384px -92px;}
#menu .key{background-position:-458px -5px;}
#menu .key:hover{background-position:-458px -92px;}
#menu .turn{background-position:-532px -5px;}
#menu .turn:hover{background-position:-532px -92px;}