單純使用CSS能實現(xiàn)滑動門效果？
可以的，純css做滑動門有兩種辦法，一個利用hover偽類，另一種就是設置錨點。對應兩種方式觸發(fā)滑動門效果，鼠標懸浮和點擊。
下面各舉一例，
鼠標懸浮觸發(fā)：（此例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.首頁新疆阜康鐵路橋梁坍塌多節(jié)運煤車廂側(cè)翻墜河</A></li>
<li><A href="#" target=_lf>2.首頁最高法:承諾不判賴昌星死刑沒有超越法律程序</A></li>
<li><A href="#" target=_lf>3.首頁物權法:滿70年住宅建設用地使用權將自動續(xù)期</A></li>
<li><A href="#" target=_lf>4.首頁弟弟被妻下藥毒死男子買女尸為其配陰婚(圖)</A></li>
<li><A href="#" target=_lf>5.首頁揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼</A></li>
<li><A href="#" target=_lf>6.首頁美軍高官:不排除和中國發(fā)生直接軍事對抗可能</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.首頁建設部：住房公積金制度將覆蓋農(nóng)民工</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.鏈接一新疆阜康鐵路橋梁坍塌多節(jié)運煤車廂側(cè)翻墜河</A></li>
<li><A href="#" target=_lf>2.鏈接一最高法:承諾不判賴昌星死刑沒有超越法律程序</A></li>
<li><A href="#" target=_lf>3.鏈接一物權法:滿70年住宅建設用地使用權將自動續(xù)期</A></li>
<li><A href="#" target=_lf>4.鏈接一弟弟被妻下藥毒死男子買女尸為其配陰婚(圖)</A></li>
<li><A href="#" target=_lf>5.鏈接一揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼</A></li>
<li><A href="#" target=_lf>6.鏈接一美軍高官:不排除和中國發(fā)生直接軍事對抗可能</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.鏈接一建設部：住房公積金制度將覆蓋農(nóng)民工</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.鏈接二新疆阜康鐵路橋梁坍塌多節(jié)運煤車廂側(cè)翻墜河</A></li>
<li><A href="#" target=_lf>2.鏈接二最高法:承諾不判賴昌星死刑沒有超越法律程序</A></li>
<li><A href="#" target=_lf>3.鏈接二物權法:滿70年住宅建設用地使用權將自動續(xù)期</A></li>
<li><A href="#" target=_lf>4.鏈接二弟弟被妻下藥毒死男子買女尸為其配陰婚(圖)</A></li>
<li><A href="#" target=_lf>5.鏈接二揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼</A></li>
<li><A href="#" target=_lf>6.鏈接二美軍高官:不排除和中國發(fā)生直接軍事對抗可能</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.鏈接二建設部：住房公積金制度將覆蓋農(nóng)民工</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.鏈接三新疆阜康鐵路橋梁坍塌多節(jié)運煤車廂側(cè)翻墜河</A></li>
<li><A href="#" target=_lf>2.鏈接三最高法:承諾不判賴昌星死刑沒有超越法律程序</A></li>
<li><A href="#" target=_lf>3.鏈接三物權法:滿70年住宅建設用地使用權將自動續(xù)期</A></li>
<li><A href="#" target=_lf>4.鏈接三弟弟被妻下藥毒死男子買女尸為其配陰婚(圖)</A></li>
<li><A href="#" target=_lf>5.鏈接三揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼</A></li>
<li><A href="#" target=_lf>6.鏈接三美軍高官:不排除和中國發(fā)生直接軍事對抗可能</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.鏈接三建設部：住房公積金制度將覆蓋農(nóng)民工</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">國內(nèi)新聞</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代碼到本地查看，樣式微調(diào)。。。
嵌入墻體的推拉門優(yōu)點是什么？
嵌入墻體的推拉門即入墻式推拉門，是將門扇完全隱藏在墻體內(nèi)，主要有以下優(yōu)點：
1、效果美觀。入墻式推拉門隱藏了滑輪和滑軸，若選擇和墻體同色的門板，可裝飾成“隱形門”，提高空間的整體性，同時不會影響門兩側(cè)墻面的裝飾，視覺上更為美觀。
2、節(jié)省空間。入墻式推拉門在門扇開啟后，空間完全敞開，就像沒有安裝門一樣，使視野更加開闊，同時更加節(jié)省空間，尤其適合小戶型家庭安裝。
總之，嵌入墻體的推拉門具有諸多優(yōu)點，消費者可根據(jù)實際需求進行選購。
滑動門是怎么做的啊
滑動門可以用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';
}
//如果要做成點擊后再轉(zhuǎn)到請將<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">內(nèi)容1</div>
<div class="undis" id="tbc_02">內(nèi)容2</div>
<div class="undis" id="tbc_03">內(nèi)容3</div>
</div>
</div>
</div>
滑動門的種類有很多很多，從簡單的幾行JS代碼生成的滑動門復雜至使用jQuery效果庫實現(xiàn)各種各樣的切換效果的都有。網(wǎng)頁制作中，很多時候需要充分利用空間。這時候需要使用滑動門這種簡單而實用的技術。
這是CSS+DIV制作滑動門效果的一段代碼，我想在最新推薦或熱門排行里面繼續(xù)添加內(nèi)容，應該怎么弄
不知道你是像繼續(xù)添加內(nèi)容還是繼續(xù)添加導航標簽，所以都加了。
看了一下你這個代碼還是很簡單的，所以稍微改了點
<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"> <!--導航選項區(qū)域-->
<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><!--導航選項區(qū)域-->
<!--內(nèi)容顯示區(qū)域-->
<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> <!--內(nèi)容顯示區(qū)域-->
</div>
</div>
根據(jù)自己的需求改吧。
