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