滑动门学习第二步
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滑动门第二步</title>
<style type="text/css">
/*重写ul,li.避免造成不同浏览器的兼容性问题。*/
ul
{
margin: 0;
padding: 0;
list-style: none;
}
li
{
list-style: none;
}
/*定义外围容器*/
.tabmenu
{
overflow: hidden;
width: 300px;
font-size: 12px;
}
/*定义左侧的背景样式，请查看l.gif图片的样式*/
.tabmenu li
{
background: url(images/l.gif) no-repeat;
float: left;
}
/*定义右侧的背景样式，注意这里的 background-position: right top;不能省略，另外需要将a标签设置为容器元素请查看r.gif的效果*/
.tabmenu li span
{
background: url(images/r.gif) no-repeat;
display: block;
background-position: right top;
padding: 5px 18px;
}
/*定义鼠标移上去的时候的效果，这里的几个定位属性我改变了一下，没有调试其他的浏览器，大家可以完善一下。*/
.tabmenu li a:hover
{
background: url(images/l.gif) no-repeat;
background-position: left 80%;
display: block;
}
.tabmenu li a:hover span
{
background: url(images/r.gif) no-repeat;
background-position: right 80%;
display: block;
}
/*总结，这个例子也是一个非常非常简单的例子，只是在原来的基础上加了一个鼠标移上的效果，然而上面的代码在IE6下是无鼠标移上的效果的，因为hover属性在IE6下只有a标签才会有，下面我们对上面和下面的代码进行一下改造。*/
</style>
</head>
<body>
<ul class="tabmenu">
<li><span>语文</span></li>
<li><span>高等数学</span></li>
<li><span>中华人民共和国史</span></li>
</ul>
<ul class="tabmenu">
<li><a href="#"><span>语文</span></a></li>
<li><a href="#"><span>高等数学</span></a></li>
<li><a href="#"><span>中华人民共和国史</span></a></li>
</ul>
</body>
</html>
