DIV + CSS 样式 滑动门经典案例 跟大家分享
//css 样式源码
/*全局样式*/*{font-size:12px;}body{margin:0;padding:0;background-color:#FFFFFF;font-size:12px;color:#666666;font-family: "宋体",Arial, Helvetica, sans-serif;}/*主导航菜单*/#menu ul{padding:0;border:0;list-style:none;line-height:150%;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 15px;}#menu_out{width:966px;padding-left:4px;margin-left:auto;margin-right:auto;background:url(Myskin/menu_left.gif) no-repeat left top;}#menu_in{background:url(Myskin/menu_right.gif) no-repeat right top;padding-right:4px;}#menu{background:url(Myskin/menu_bg.gif) repeat-x;height:73px;}.menu_line{background:url(Myskin/menu_line.gif) no-repeat center top;width:8px;}.menu_line2{background:url(Myskin/menu_line2.gif) no-repeat center top;width:15px;}#nav{padding-left:20px;}#nav li{float:left;height:35px;}#nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(Myskin/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}#nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(Myskin/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#FFFFFF;text-decoration:none;}#nav li .nav_on{ /*鼠标经过时变换背景，方便JS获取样式*/background-position:left 100%;}#nav li .nav_on span{ /*鼠标经过时变换背景，方便JS获取样式*/background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}/*子栏目*/#menu_con{text-align:left;padding-left:20px;clear:both;}#menu_con li{float:left;height:22px;margin-top:8px;}#menu_con li a{display:block;float:left;background:url(Myskin/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}#menu_con li a span{float:left;padding:6px 10px 4px 10px;line-height:12px;background:url(Myskin/menu_on_right2.gif) no-repeat right top;}#menu_con li a:hover{text-decoration:none;background:url(Myskin/menu_on_left2.gif) no-repeat left bottom;}#menu_con li a:hover span{background:url(Myskin/menu_on_right2.gif) no-repeat right bottom;}<!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" lang="zh-CN"><head><title>漂亮滑动门</title><link href="css.css" rel="stylesheet" type="text/css" /><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css"><!--#a {width: 970px;font-size: 14px;text-align: center;color: #000000;margin-right: auto;margin-left: auto;margin-top: 0px;margin-bottom: 0px;}--></style></head><body><br /><br /><script language="javascript">function qiehuan(num){for(var id = 0;id<=9;id++){if(id==num){document.getElementById("qh_con"+id).style.display="block";document.getElementById("mynav"+id).className="nav_on";}else{document.getElementById("qh_con"+id).style.display="none";document.getElementById("mynav"+id).className="";}}}</script> <div id=menu_out><div id=menu_in><div id=menu><UL id=nav><LI><A class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="/"><SPAN>首 页</SPAN></A></LI><LI onmouseover="javascript:qiehuan(1)" id="mynav1" onmouseover="javascript:qiehuan(2)" id="mynav2" onmouseover="javascript:qiehuan(3)" id="mynav3" onmouseover="javascript:qiehuan(4)" id="mynav4" onmouseover="javascript:qiehuan(5)" id="mynav5" onmouseover="javascript:qiehuan(6)" id="mynav6" onmouseover="javascript:qiehuan(7)" id="mynav7" target=_blank><SPAN>HHH</SPAN></A></LI><LI class=menu_line></LI></UL><div id=menu_con><div id=qh_con0 style="DISPLAY: block"><UL> <LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI> <LI class=menu_line2></LI><LI><A href="#"><SPAN>test</SPAN></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>test1</SPAN></A></LI></UL></div> <div id=qh_con1 style="DISPLAY: none"><UL><LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>aaaaaaaaaaaaaaaaaaa</SPAN></A></LI><LI class=menu_line2></LI></UL></div> <div id=qh_con2 style="DISPLAY: none"><UL><LI><a href="http://www.websjy.com"><span>出处:设计源 http://www.websjy.com</span></A></LI><LI class=menu_line2></LI><LI><A href="#"><SPAN>bbbbbbbbbbbbbbbbbb</SPAN></A></LI><LI class=menu_line2></LI></UL></div> <div id=qh_con3 style="DISPLAY: none"><UL><LI><A href="#"><SPAN>ccccccccccccccccccc</SPAN></A></LI><LI class=menu_line2></LI></UL></div> <div id=qh_con4 style="DISPLAY: none"><UL><LI><A href="#"><SPAN>ddddddddddddddddddd</SPAN></A></LI><LI class=menu_line2></LI></UL></div> <div id=qh_con5 style="DISPLAY: none"><UL><LI><A href="#"><SPAN>eeeeeeeeeeeeeeee</SPAN></A></LI><LI class=menu_line2></LI></UL></div> <div id=qh_con6 style="DISPLAY: none"><UL><LI><A href="#"><SPAN>fffffffffffffffffff</SPAN></A></LI><LI class=menu_line2></LI></UL></div> <div id=qh_con7 style="DISPLAY: none"><UL><LI><A href="#"><SPAN>gggggggggggggggg</SPAN></A></LI><LI class=menu_line2></LI></UL></div> <div id=qh_con8 style="DISPLAY: none"><UL><LI>##############################</LI></UL></div><div id=qh_con9 style="DISPLAY: none"><UL><LI>###############################</LI></UL></div> </div></div></div></div> <br /><br /></body></html>