1.暢言:http://changyan.kuaizhan.com/css
2.多說html
1 <html> 2 <head> 3 <title>div css3 側邊菜單導航欄-www.codesc.net</title> 4 <style type="text/css"> 5 *{margin:0;padding:0;list-style-type:none;} 6 a,img{border:0;} 7 body{font:12px/180% Arial, Helvetica, sans-serif, "微軟雅黑";} 8 .demo{margin:60px auto;width:720px;} 9 .navbox{float:left;} 10 ul.nav{width:200px;padding:60px 0 60px 0;background:url() no-repeat;} 11 ul.nav li{margin:5px 0 0 0;} 12 ul.nav li a{ 13 background:#cbcbcb url() no-repeat;color:#174867;padding:7px 15px 7px 15px;width:100px;display:block;text-decoration:none; 14 -webkit-transition:all 0.3s ease-out; 15 -moz-transition:all 0.3s ease-out; 16 -o-transition:all 0.3s ease-out; 17 -webkit-box-shadow:2px 2px 4px #888; 18 -moz-box-shadow:2px 2px 4px #888; 19 -o-box-shadow:2px 2px 4px #888; 20 } 21 ul.nav li a:hover{background:#ebebeb url() no-repeat;color:#67a5cd;padding:7px 15px 7px 30px;} 22 </style> 23 </head> 24 <body> 25 <div class="demo"> 26 <div class="navbox"> 27 <ul class="nav"> 28 <li><a href="#">XHTML</a></li> 29 <li><a href="#">Perl</a></li> 30 </ul> 31 </div> 32 </div> 33 </body> 34 </html>
整個窗口隨滾動條下滑web