您的位置：首页 > 其它

动态网页的建立

2016-05-30 00:00 253 查看

使用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 <
3ff0
span style="color: #000000;">}  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 }

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航