流 旋转 和一些特效 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>无标题文档</title>
 5 <link rel="shortcut icon" href="bg_5bad577.jpg">
 6         <style type="text/css">
 7         *{ margin:0px auto; padding:0px}
 8         #di{ width:0px;
 9             height:0px;
10             border-bottom:100px solid white;
11             border-left:100px solid white;
12             border-top:100px solid #00F;
13             border-right:100px solid white;
14                 }
15         #e1{ margin:50px;
16             
17             }
18         #w1{ width:200px;
19             height:200px;
20              border-bottom:10px solid #F00;
21              border-left:10px solid #600;
22             transform:rotate(45deg)
23             } 
24         #a1{ width:500px; height:50px; border:1px solid #e9e9e9; float:left}
25         .a2{ width:100px; height:50px; float:left; text-align:center; vertical-align:middle; line-height:50px;}    
26         #a1 div:hover{ background-color:#b3b6bb; border-top:1px solid #F39; cursor:pointer}
27         #yanse{ background-color:#00C;
28               }
29         </style>
30     </head>
31     
32     <body>
33         <div id="e1"> 
34             <div id="di"></div>
35         </div>
36     <!----------------------------------------------------->
37         <div id="w1"></div>
38   <br> <br> <br> <br> <br> <hr><br>  
39   
40   <!-------------------------------------------------------------->   
41         <div id="a1">
42             <div class="a2">春节</div>
43             <div class="a2">元宵节</div>
44             <div class="a2">端午节</div>
45             <div class="a2">中秋节</div>
46             <div class="a2">国庆节</div>
47         </div>
48         <!---</div>------------------------------------------------------------------------------>
49         <br><br><br><br><br><br><br><br><br><br><br><br><br>
50     <div id="yanse">
51           <img src="aa.png" width="500px" height="60px"/>
52         
53     </div>  
54 </body>
55     </html>

 

posted @ 2016-12-15 03:16  黄力军  阅读(133)  评论(0)    收藏  举报