您的位置：首页 > 其它

动态网页的建立

2015-11-23 17:36 155 查看

使用css样式实现动态网页

html：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>

<link href="css/domo.css" rel="stylesheet" />
</head>

<body >
<ul class=" list" >
<li>
<div class=" border"></div>
<span class=" icon">☆</span>
<div class=" text">
<h2><a href="#">首页</a></h2>
<h3>home</h3>
</div>
</li>
<li>
<div class=" border"></div>
<span class=" icon">☆</span>
<div class=" text">
<h2><a href="#">东腾科技</a></h2>
<h3>欢迎你的加入</h3>
</div>
</li>
<li>
<div class=" border"></div>
<span class=" icon">☆</span>
<div class=" text">
<h2><a href="#">现代化的创新</a></h2>
<h3>引领全球时尚</h3>
</div>
</li>
<li>
<div class=" border"></div>
<span class=" icon">☆</span>
<div class=" text">
<h2><a href="#">特殊的管理方案</a></h2>
<h3>强大的团队合作</h3>
</div>
</li>
</ul>
</body>
</html>

css：

body,ul,h2,h3 {
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
body{
background-image:url(http://localhost:2491/EX_Asp_Net/image/20.png) ;
}
.list{
height:auto;
width:100%;
margin-top:50px;
}
.list li{
height:100px;
width:500px;
margin-left:100px;

background-color:#fff;
margin-bottom:10px;
box-shadow:0px 5px 5px #ddd;
position:relative;
-webkit-transition:all 0.5s ease;
}
.list .icon{
display:block;
width:90px;
width:90px;
font-size:45px;
line-height:90px;
text-align:center;
float:left;
margin-left:20px;
text-shadow:0 0 5px red;
-webkit-transition:all 0.5s ease;
}
.list .text{
height:70px;
width:300px;
float:left;
margin-top:25px;
-webkit-animation:0.5s 0.2s ease;
}
.text h2, .text a{
color:#333;
font-size:30px;
text-shadow:1px 2px 4px #999;
-webkit-transition:all 0.5s ease;
}
.text h3{
font-size:16px;
color:#666;
margin-top:5px;
-webkit-transition:all 0.5s ease;
}
.list .border{
height:100px;
width:10px;
background-color:#f90;
position:absolute;
left:0px;top:0px;
visibility:hidden ;
-webkit-transition:all 0.5s ease;
}
.list li:hover{
background-color:#000;

}
.list li:hover h2, .list li:hover a{
color:#fff;
font-size:20px;
}
.list li:hover h3{
font-size:29px;
color:#f60;

}
.list li:hover .icon{
color:#f90;
font-size:70px;
}
.list li:hover .border{
visibility:visible ;
left:490px;
}
.list li:hover  .text{
-webkit-animation-name:shake;
}
@-webkit-keyframes shake{/*创建动画*/
0%,100%{
-webkit-transform:translate(0) ;
}
20%,60%{
-webkit-transform:translateX(-10px) ;
}
40%,80%{
-webkit-transform:translateX(10px) ;
}
}

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

标签：

相关文章推荐

新的分享

章节导航