web技術工具帖

評論工具:

1.暢言:http://changyan.kuaizhan.com/css

2.多說html

頁面滑動工具

Swiper:介紹  Democss3

 

 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

相關文章
相關標籤/搜索