单纯使用CSS能实现滑动门效果？
可以的，纯css做滑动门有两种办法，一个利用hover伪类，另一种就是设置锚点。对应两种方式触发滑动门效果，鼠标悬浮和点击。
下面各举一例，
鼠标悬浮触发：（此例ie6下无效，因其暂不支持li:hover的伪类）
<!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; chart=utf-8" />
<title>纯CSS下拉菜单</title>
<style type="text/css">
a{
font-size:12px;
text-decoration:none;
color:#000000;}
li ul{
display:none;
margin-left:5px;}
li:hover ul{
width:306px;
padding:20px;
height:250px;
display:block;
}
li:hover .fira{border-bottom:#FFFFFF 1px solid;
}#kpk{
position:relative;
width:420px;
}
#kpk>li{
float:left;
list-style:none;
margin-right:20px;
}
#kpk>li .fira{
border:1px #c6c6c6 solid;
}
.ca{
position:absolute;
z-index:1;
left:-5px;
top:23px;
border:1px #c6c6c6 solid;
height:250px;
width:306px;
padding:20px;
height:250px;
}
.fira{
width:70px;
display:block;
line-height:22px;
background-color:white;
text-align:center;
z-index:2;
}</style>
</head><body>
<div>
<ul id="kpk">
<li>
<a href="#" class="fira">首页</a>
<ul class="ca" rel="first">
<li><A href="#" target=_lf>1.首页新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_lf>2.首页最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_lf>3.首页物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_lf>4.首页弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_lf>5.首页揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_lf>6.首页美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_lf>7.首页浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_lf>8.首页西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_lf>9.首页女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_lf>10.首页建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接一</a>
<ul class="ca">
<li><A href="#" target=_lf>1.链接一新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_lf>2.链接一最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_lf>3.链接一物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_lf>4.链接一弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_lf>5.链接一揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_lf>6.链接一美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_lf>7.链接一浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_lf>8.链接一西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_lf>9.链接一女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_lf>10.链接一建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接二</a>
<ul class="ca">
<li><A href="#" target=_lf>1.链接二新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_lf>2.链接二最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_lf>3.链接二物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_lf>4.链接二弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_lf>5.链接二揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_lf>6.链接二美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_lf>7.链接二浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_lf>8.链接二西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_lf>9.链接二女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_lf>10.链接二建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>31</li>
<li>32</li>
<li>33</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接三</a>
<ul class="ca">
<li><A href="#" target=_lf>1.链接三新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_lf>2.链接三最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_lf>3.链接三物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_lf>4.链接三弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_lf>5.链接三揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_lf>6.链接三美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_lf>7.链接三浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_lf>8.链接三西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_lf>9.链接三女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_lf>10.链接三建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>41</li>
<li>42</li>
<li>43</li>
</ul>-->
</li>
</ul>
</div>
</body>
</html>
锚点点击例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>左右布局</title>
<style type="text/css">
#nav{
width:303px;
height:200px;
border:1px solid #CCCCCC;
}
#column a {
float:left;
width:100px;
border-right:1px solid #CCC;
border-bottom:1px solid #CCC;
font:bold 14px/30px Arial, Helvetica, sans-rif;
color:#000;
text-decoration:none;
text-align:center;
}
#contant {
width:303px;
height:162px;
overflow:hidden;
}
ul {
margin:0;
padding:0;
list-style-type:none;
padding:4px 0 0 5px;
}
li {
font-size:12px;
overflow:hidden;
padding-left:2px;
line-height:27px;
}
</style>
</head>
<body>
<div id="nav">
<div id="column"> <a href="#localnew">本地新闻</a> <a href="#innernew">国内新闻</a> <a href="#enterment" >娱乐新闻</a> </div>
<div id="contant">
<ul id="localnew">
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS</a></li>
<li><a href="#">我喜欢CSS</a></li>
</ul>
<ul id="innernew">
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程 </a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
</ul>
<ul id="enterment">
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工 </a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
</ul>
</div>
</div>
</body>
</html>
楼主自行copy代码到本地查看，样式微调。。。
嵌入墙体的推拉门优点是什么？
嵌入墙体的推拉门即入墙式推拉门，是将门扇完全隐藏在墙体内，主要有以下优点：
1、效果美观。入墙式推拉门隐藏了滑轮和滑轴，若选择和墙体同色的门板，可装饰成“隐形门”，提高空间的整体性，同时不会影响门两侧墙面的装饰，视觉上更为美观。
2、节省空间。入墙式推拉门在门扇开启后，空间完全敞开，就像没有安装门一样，使视野更加开阔，同时更加节省空间，尤其适合小户型家庭安装。
总之，嵌入墙体的推拉门具有诸多优点，消费者可根据实际需求进行选购。
滑动门是怎么做的啊
滑动门可以用javascript来制作，其代码如下所示：
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
ul{list-style-type:none; margin:0px;}
.ctt{height:auto;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*整个滑动门的宽度*/}
/*tab切换效果*/
.tb_{滑动门背景}
.tb_ ul{height:24px;}
.tb_ li{float:left; margin-right:2px;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/*用于控制显示与隐藏的css类*/
.normaltab{选中的滑动门标签背景}
.hovertab{未选中的滑动门标签背景}
.dis{display:block;}
.undis{display:none;}
-->
</style>
<script type="text/javascript" language="javascript">
//<!cdata[
function g(o){return document.getElementbyId(o);}
function HoverLi(n){
//如果有N个标签，就将i<=N;
for(var i=1;i<=3;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouover改成onclick;
//]]>
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onMouOver="x:HoverLi(1);">
标题1</li>
<li id="tb_2" class="normaltab" onMouOver="i:HoverLi(2);">
标题2</li>
<li id="tb_3" class="normaltab" onMouOver="a:HoverLi(3);">
标题3</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">内容1</div>
<div class="undis" id="tbc_02">内容2</div>
<div class="undis" id="tbc_03">内容3</div>
</div>
</div>
</div>
滑动门的种类有很多很多，从简单的几行JS代码生成的滑动门复杂至使用jQuery效果库实现各种各样的切换效果的都有。网页制作中，很多时候需要充分利用空间。这时候需要使用滑动门这种简单而实用的技术。
这是CSS+DIV制作滑动门效果的一段代码，我想在最新推荐或热门排行里面继续添加内容，应该怎么弄
不知道你是像继续添加内容还是继续添加导航标签，所以都加了。
看了一下你这个代码还是很简单的，所以稍微改了点
<div id="right_new">
<script language=javascript>
function cBoard(n) {
var menu = document.getElementById('menu').getElementsByTagName('li');
var main1 = document.getElementById('main1').getElementsByTagName('div');
for (i = 0; i < menu.length; i++) {
menu[i].className = "c1";
}
menu[n].className = "c2";
for (i = 0; i < main1.length; i++) {
main1[i].style.display = "none";
}
main1[n].style.display = "block";}
</script>
<div id="header"> <!--导航选项区域-->
<div id="right_menu">
<ul id="menu">
<li onMouOver="cBoard(0)" class="c2">最新推荐</li>
<li onMouOver="cBoard(1)" class="c1">热门排行</li>
<li onMouOver="cBoard(2)" class="c1">3333</li>
<li onMouOver="cBoard(3)" class="c1">4444</li>
</ul>
</div><!--导航选项区域-->
<!--内容显示区域-->
<div id="main1"><br>
<div class="block">
<li>最新推荐：<a href=" http://xu123.lingd.net/article-4287887-1.html"; target="_blank">JS图片轮播幻灯片切换效果</a></li>
<li>最新推荐：<a href=" http://xu123.lingd.net/article-4287887-1.html"; target="_blank">JS图片轮播幻灯片切换效果</a></li>
<li>最新推荐：<a href=" http://xu123.lingd.net/article-4287887-1.html"; target="_blank">JS图片轮播幻灯片切换效果</a></li>
<li>最新推荐：<a href=" http://xu123.lingd.net/article-4287887-1.html"; target="_blank">JS图片轮播幻灯片切换效果</a></li>
</div>
<div class="unblock">热门排行：<a href=" http://xu123.lingd.net/article-2712422-1.html"; target="_blank">点击连接弹出层，背景变暗</a></div>
<div class="unblock">3333：<a href=" http://xu123.lingd.net/article-2712422-1.html"; target="_blank">点击连接弹出层，背景变暗</a></div>
<div class="unblock">4444：<a href=" http://xu123.lingd.net/article-2712422-1.html"; target="_blank">点击连接弹出层，背景变暗</a></div>
</div> <!--内容显示区域-->
</div>
</div>
根据自己的需求改吧。
