如何设计一个好看的css滑动门(手机主屏图片)

所谓滑动门技术，就是标签像一个滑动门一样，可以根据内容的大小自由滑动。滑动门的原理：将图片分为左右两部分，左侧图片很窄，包含于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>

效果图：

用css3的transform加transition 。。。不懂什么意思 你哪个标签想要活动状态效果，就将这个标签的css设成滑动时的css样式就好了 css实现不了你说的那个效果，要加js控制的。 首页标签单独调用滑动过后的css类