动态网页的建立

2019-11-14 15:43:09

字体：大中小

来源：转载

供稿：网友

使用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 }