DIV+CSS经典–滑动门技术08/25/2007
继续少说话，多做事的生活。CSS中滑动门技术据说还是使用率越来越高，呈逐年上升趋势。hoho~
好吧！来个最简单，最基础的滑动门实现，BTW:滑动门经常应用于页面导航菜单（废话）。
先看个截图：
（QQ截图的功能压缩的很厉害）
这个是用到两张图片：
右边的图片
左边的图片
完整的代码如下(这个是最基本最简单的滑动门，根据字体大小自适应)：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>欢迎您认为滑动门技术是有用的 - ZendStudio.Net</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
ul{
list-style:none;
margin:10em 0 0 10em;/*这句是我为了让效果明显，加的。*/
}
ul li{
background:white url('http://www.zendstudio.net/attachment/200708/tab_images.gif') no-repeat right top;
float:left;
}
a{
height:2em;
display:block;
width:10em;
background:url('http://www.zendstudio.net/attachment/200708/tab_images_l.gif') no-repeat left top;
text-align:center;
line-height:200%;
}
-->
</style>
</head>
<body>
<ul><li><a href="#">导航链接</a></li></ul>
</body>
</html> |
用ctrl+滚轮调整字体大小即可看到滑动门效果了！不过不能滚的太大哦~会露馅儿的，IE很照顾人家面子，字体大到一定程度就不滚了。
（题外话：听哥们说SharePoint Designer 2007手写CSS很好用，经不住诱惑的去下载了一个，不错！确实不让人失望，界面让人感觉很是亲切，也许是以前vb用习惯的缘故吧！~微软的代码自动提示功能一直都让人很佩服的，这个sharepoint也一样，还有自动缩进，这篇的代码就是用sharePoint写的。呵呵~）
