你的位置:首页 > ASP.net教程

[ASP.net教程]动态网页的建立


使用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   width:100%; 17   margin-top:50px; 18 } 19 .list li{ 20   height:100px; 21   width: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   width:90px; 33   width: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   width: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   width: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 }