有几天了,一直在看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;}

nav-2

留下一个答复

Please enter your comment!
Please enter your name here