CSS教程之导航条

1、垂直导航条制作

HTML代码：

<ul>

<li><a href="home.html">home</a></li>

<li><a href="second.html">second</a></li>

<li><a href="three.html">three</a></li>

<li><a href="foure.html">foure</a></li>

</ul>

CSS代码：

//为UL标记去除空白边

ul{

   margin:0;

   padding:0;

   list-style-type:none;

}

//将a标记设置成块级元素 并且把图象加入背景左对齐 高度设置为小1PX 避免出现双边现象

ul a{

   display:block;

   width:200px;

   height:39px;

   line-height:39px;

   color:#eeee;

   background:url("xx.gif") no-repeat left bottom

   text-decoration:none;

   text-indent:50px;

}

//因为上个代码将上边的线隐藏了 将第一个高度加1PX 设置为完整尺寸

li.first a{

   height:40px;

   line-height:40px;

}

//将鼠标移上时背景图象方向变化右对齐 改变了图象的样子产生变换

ul a:hover{

   background-position:right bottom;

   color:#666;

}

 

2、水平导航条制作

 

HTML代码：

<ul>

<li><a href="home.html">home</a></li>

<li><a href="second.html">second</a></li>

<li><a href="three.html">three</a></li>

<li><a href="foure.html">foure</a></li>

</ul>

CSS代码：

 

ul{

   margin:0;

   padding:0;

   list-style-type:none;

   width:720px;

   float:left;

   background:url(xx.gif)  repeat-x;

}

ul li{

   float:left;

}

//将链接设置成按钮 并且加了竖线分隔

ul a{

   display:block;

   width:60px;

   height:15px;

   padding:0 5px;

   line-height:15px;

   background:url("xx.gif") repeat-y left top;

   text-decoration:none;

   color:#ffff;

  }

ul  li.frist a{

   background:none;

}