所谓滑动门技术，就是标签像一个滑动门一样，可以根据内容的大小自由滑动。滑动门的原理：将图片分为左右两部分，左侧图片很窄，包含于a的background属性中，是固定不变的，而右侧图片要做的尽可能宽一些。嵌套在span中的background属性中，处于右上角，且距离左侧留出左侧图片的宽度，以便左侧图片显示，这样，由于右侧图片足够长，随着文本增长，不会超过其长度，就好像可以随文本长度变化而变化一样。
参考代码：
<ul id="nav">
<li><a href=""><span>Home</span></a></li>
<li><a href=""><span>Contact us</span></a></li>
<li><a href=""><span>Web dev</span></a></li>
<li><a href=""><span>Map</span></a></li>
</ul>
说明：只要是a标签和span标签的设置，将span嵌套在a标签中，以便设置鼠标经过样式时可以使用#nav a:hover span {}来设置span内图像的变化。
具体的实现在于CSS部分：
<style type="text/css">
<!--
#nav a {
margin-left:2px
float:left
background:url(左侧图片地址) no-repeat left top
padding-left:左侧图片宽度
text-decoration:none
}
#nav a span {
display:block
background:url(file:D/img/right.jpg) no-repeat right top
padding:5px 15px 3px 6px
color:#fff
}
#nav li {
float:left
display:block
margin:0
padding:0
}
#nav a:hover {}
#nav a:hover span {}
-->
</style>
效果图：
这要涉及到层的概念利用position，当鼠标滑动到 图片上的时候，添加hover属性，让城市显示的z-index值 >图片的z-index值。普通情况下；城市的z-index <图片的z-index值。
我这没有你说的只用样式控制的，我这只有js控制的我给你发一个你看看，我这还有几个，想要就给我发消息吧 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">我的滑动门 body{color: #000font-family: "宋体", arialfont-size: 12pxbackground: #ffftext-align: centermargin: 0}.nTab{float: leftwidth: 432pxmargin: 0 autoborder-bottom:1px #AACCEE solidbackground:#d5d5d5background-position:leftbackground-repeat:repeat-ymargin-bottom:2px}.nTab .TabTitle{clear: bothheight: 22pxoverflow: hidden}.nTab .TabTitle ul{border:0margin:0padding:0}.nTab .TabTitle li{float: leftwidth: 70pxcursor: pointerpadding-top: 4pxpadding-right: 0pxpadding-left: 0pxpadding-bottom: 2pxlist-style-type: none}.nTab .TabTitle .active{background:#fffborder-left:1px #AACCEE solidborder-top:1px #AACCEE solidborder-right:1px #AACCEE solidborder-bottom:1px #fff solid}.nTab .TabTitle .normal{background:#EBF3FBborder:1px #AACCEE solid}.nTab .TabContent{ width:autobackground:#fffmargin: 0px autopadding:10px 0 0 0border-right:1px #AACCEE solidborder-left:1px #AACCEE solid}.none {display:none}.c{ clear:both} function nTabs(thisObj,Num){if(thisObj.className == "active")returnvar tabObj = thisObj.parentNode.idvar tabList = document.getElementById(tabObj).getElementsByTagName("li")for(i=0i <tabList.lengthi++){ if (i == Num) { thisObj.className = "active"document.getElementById(tabObj+"_Content"+i).style.display = "block"}else{ tabList[i].className = "normal"document.getElementById(tabObj+"_Content"+i).style.display = "none"}} } 选项卡0开始标题开始 全部 日志 咨询 相册 商城 社区内容开始000 111 222 333 444 555选项卡0结束 选项卡1开始 标题开始 aaa bbb ccc 单击内容开始000 111 222 333 选项卡1结束
