使用css样式实现动态网页
html：
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 5 <link href="css/domo.css" rel="stylesheet" /> 6 </head> 7 8 <body > 9 <ul class=" list" > 10 <li> 11 <div class=" border"></div> 12 <span class=" icon">☆</span> 13 <div class=" text"> 14 <h2><a href="#">首页</a></h2> 15 <h3>home</h3> 16 </div> 17 </li> 18 <li> 19 <div class=" border"></div> 20 <span class=" icon">☆</span> 21 <div class=" text"> 22 <h2><a href="#">东腾科技</a></h2> 23 <h3>欢迎你的加入</h3> 24 </div> 25 </li> 26 <li> 27 <div class=" border"></div> 28 <span class=" icon">☆</span> 29 <div class=" text"> 30 <h2><a href="#">现代化的创新</a></h2> 31 <h3>引领全球时尚</h3> 32 </div> 33 </li> 34 <li> 35 <div class=" border"></div> 36 <span class=" icon">☆</span> 37 <div class=" text"> 38 <h2><a href="#">特殊的管理方案</a></h2> 39 <h3>强大的团队合作</h3> 40 </div> 41 </li> 42 </ul> 43 </body> 44 </html>
css：
1 body,ul,h2,h3 { 2 margin:0px; 3 padding:0px; 4 } 5 ul{ 6 list-style:none; 7 } 8 a{ 9 text-decoration:none; 10 } 11 body{ 12 background-image:url(http://localhost:2491/EX_Asp_Net/image/20.png) ; 13 } 14 .list{ 15 height:auto; 16 100%; 17 margin-top:50px; 18 } 19 .list li{ 20 height:100px; 21 500px; 22 margin-left:100px; 23 24 background-color:#fff; 25 margin-bottom:10px; 26 box-shadow:0px 5px 5px #ddd; 27 position:relative; 28 -webkit-transition:all 0.5s ease; 29 } 30 .list .icon{ 31 display:block; 32 90px; 33 90px; 34 font-size:45px; 35 line-height:90px; 36 text-align:center; 37 float:left; 38 margin-left:20px; 39 text-shadow:0 0 5px red; 40 -webkit-transition:all 0.5s ease; 41 } 42 .list .text{ 43 height:70px; 44 300px; 45 float:left; 46 margin-top:25px; 47 -webkit-animation:0.5s 0.2s ease; 48 } 49 .text h2, .text a{ 50 color:#333; 51 font-size:30px; 52 text-shadow:1px 2px 4px #999; 53 -webkit-transition:all 0.5s ease; 54 } 55 .text h3{ 56 font-size:16px; 57 color:#666; 58 margin-top:5px; 59 -webkit-transition:all 0.5s ease; 60 } 61 .list .border{ 62 height:100px; 63 10px; 64 background-color:#f90; 65 position:absolute; 66 left:0px;top:0px; 67 visibility:hidden ; 68 -webkit-transition:all 0.5s ease; 69 } 70 .list li:hover{ 71 background-color:#000; 72 73 } 74 .list li:hover h2, .list li:hover a{ 75 color:#fff; 76 font-size:20px; 77 } 78 .list li:hover h3{ 79 font-size:29px; 80 color:#f60; 81 82 } 83 .list li:hover .icon{ 84 color:#f90; 85 font-size:70px; 86 } 87 .list li:hover .border{ 88 visibility:visible ; 89 left:490px; 90 } 91 .list li:hover .text{ 92 -webkit-animation-name:shake; 93 } 94 @-webkit-keyframes shake{/*创建动画*/ 95 0%,100%{ 96 -webkit-transform:translate(0) ; 97 } 98 20%,60%{ 99 -webkit-transform:translateX(-10px) ; 100 } 101 40%,80%{ 102 -webkit-transform:translateX(10px) ; 103 } 104 }
