用css的滑动就是通过 js控制css中层属性，达到显示效果，不用的隐藏掉用的显示。这个通过js改变css达到滑动效果，方便修改编辑。用到非常少的js代码
只有纯css的导航菜单，没有纯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-serif;
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;
}
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>
说明：column容器中给标题设置一个“链接”，连接到一个匹配的ID，当鼠标点击时就会根据href="#XXXX" 来判断应该呈现哪部分内容。li 默认是纵向的，但我们定义float：left时就可以做成导航条了。
你可以留个信箱 我可以发一个纯CSS的滑动门 是以前雅虎上的 很实用 你如果要的话可以试试
因为用css写 代码很冗长，用a:hover{}如果不是用在a上面 还有浏览器兼容问题。
效果也不好。。
用js的话 几小段代码就解决的了
<!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>滑动门</title>
<style media="screen" type="text/css">
<!--
*{font-size:12px;}
html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
UL{list-style-type:none; margin:0px;}
/* 标准盒模型 */
.ttl{height:18px;}
.ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
.w936{margin:2px 0;clear:both;width:936px;/*滑动门的宽度*/}
/* TAB 切换效果 */
.tb_{background-image: url('http://www.codefans.net/jscss/demoimg/200901/tabs1.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
.tb_ ul{height:24px;}
.tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
/* 控制显示与隐藏css类 */
.normaltab { background-image:url('http://www.codefans.net/jscss/demoimg/200901/tabs2.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab { background-image: url('http://www.codefans.net/jscss/demoimg/200901/tabs3.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
.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<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
}
//如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
//]]>
</script>
</head>
<body>
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
ASP.NET</li>
<li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
MYSQL</li>
<li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
DELPHI</li>
<li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">
VB.NET</li>
<li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">
JAVA</li>
<li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">
PHP5</li>
</ul>
</div>
<div class="ctt">
<div class="dis" id="tbc_01">这里是ASP.NET的相关内容</div>
<div class="undis" id="tbc_02">这里是MYSQL的相关内容</div>
<div class="undis" id="tbc_03">这里是DELPHI的相关内容</div>
<div class="undis" id="tbc_04">这里是VB.NET的相关内容</div>
<div class="undis" id="tbc_05">这里是JAVA的相关内容</div>
<div class="undis" id="tbc_06">这里是PHP5的相关内容</b>
</div>
</div>
</div>
</body>
</html>追问
要纯css的
200分紧急求一个纯css的滑动门不要JS或者JQ
用css的滑动就是通过 js控制css中层属性，达到显示效果，不用的隐藏掉用的显示。这个通过js改变css达到滑动效果，方便修改编辑。用到非常少的js代码 只有纯css的导航菜单，没有纯css的滑动门。
高分求滑动门代码:支持ff、一页可放多个
css就目前来说不可能的 推荐你用moofx或者jquery function slide(elem){ for (var i=1;i<101;i++){ (function(i){ setTimeout(function(){ elem.style.left=i*5;},i*10)})(i);} }
请问怎么样实现以下效果,用js或者jq都可以,不用jq插件
下面的小图 就是给的透明度，rgba什么的 跟蒙上一层纱布是的；然后css有个属性 旋转多少度；你在js写的 无非就是 鼠标移动到小圆圈上触发的事件 你可以出个参数 就是小圆点的索引；每隔就秒 切换一次 就是 setInterval（，）；
请教高手一个CSS+JQ的效果,问题描述:在导航中点击a变色,点击另一个a...
(function(){ ("ul li a").click(function(){ (this).addClass("cur").parent().siblings().children("a").removeClass("cur");})}) 你的写法是移除a的同辈元素 每个li下只有一个a 这里的a是没有同辈元素的 你要移除的应该是a的父级元素li的同辈元素的子元素a ...
使用js或jq控制一个div,当滚动到页面顶部的时候固定在顶部,离开可继续...
获取滚动条的滑动距离\\x0d\\x0a\\x0d\\x0a•var scroH = $(this).scrollTop();\\x0d\\x0a\\x0d\\x0a•\/\/滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定\\x0d\\x0a\\x0d\\x0a•if(scroH>=navH){\\x0d\\x0a\\x0d\\x0a•$(".nav").css({"position":"...
JS或JQ改更HTML代码的CSS样式名
1. 普通JS方法：改掉这三个Awindow.onload = function(){var divs = document.getElementsByTagName("div");for(var i = 0; i < divs.length; i++) {if(divs[i].className == "AAA")divs[i].className = "BBB"; \/\/改成BBB}}; 2. Jquery方法（需要引用Jquery文件）：改掉这三个A$...
需求一个js 或者 jq 通过点击一个按钮,来改变2个div的背景颜色
DOCTYPE html>jquery cookie 颜色互换.div1{ width:100px; height:100px; background:#00F;}.div2{ width:100px; height:100px; background:#f00;}.div3{ width:100px; height:100px; background:#3F6;;}AAAAAABBBBBB
html+css+js(不用JQ) 把图片充满整个页面?
var imgs=["图片1url","图片2url","图片3url","图片3url"];var n=0;window.onload=function(){ next.onclick=function(){ n?n--:n=imgs.length-1;bkimg.src=imgs[n];} prev.onclick=function(){ n==imgs.length-1?n=0:n++;bkimg.src=imgs[n];} } 上一张 下...
web前段开发,css,html,js,jq,都会一点点,怎么找工作?
你可以自己做几个小项目然后去面试就好啦，只要别把待遇开的太高应该可以得到一份工作的，再在这个岗位上慢慢学就好
如何用jquery或者js来自定义css
1、直接将内联样式CSS定义在jQ内：(".div2").css("background-color","red");2、调用外部样式CSS，利用jQ获取类：(".div2").addClass("color-red");解释：第1种方式，获取带有div2样式的容器，将背景为红色的样式直接以style="background-color:red"的方式直接斌到div2的容器内；第2种方式...
