CSS-8.5-网页布局练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页布局</title>
<style type="text/css">
#header{
height: 150px;
}
#header .header1{
height: 100%;
width: 29%;
background-color: #ff0;
margin-right: 1%;
float: left;
}
#header .header2{
height: 100%;
width: 29%;
background-color:#0ff;
margin-right:1%;
float: left;
}
#header .header3{
height: 100%;
width: 40%;
background-color: #f0f;
float: left;
}
#naw{
height: 50px;
background-color: #356;
margin-top: 10px;
margin-bottom: 10px;
}
#body{
height: 500px;
}
#body #left{
width: 70%;
float: left;
height: 100%;
}
#body .div5{
width: 30%;
height: 100%;
background-color:#520;
float: right;
}
#body #left .div1{
height: 49%;
width: 49%;
background-color: #741;
float: left;
margin-right:1%;
margin-bottom: 1%;
}
#body #left .div2{
height: 49%;
width: 49%;
background-color: #598;
float: left;
margin-right: 1%;
margin-bottom: 1%;
text-align: center;
line-height: 250px;
}
#body #left .div3{
height: 50%;
width: 49%;
background-color: #336;
float: left;
clear: both;
margin-right:1%;
}
#body #left .div4{
height: 50%;
width: 49%;
background-color: #881;
float: left;
margin-right: 1%;
}
@keyframes bounce{
0%{
top:0;
text-shadow: #00f 0 0 1px;
}
100%{
top: -15px;
text-shadow: #0ff 0 15px 2px;
}
}
#body #left .div2 .span1{
color: #941;
position: relative;
animation: bounce 1.2s ease infinite alternate;
}
#body #left .div2 .span2{
color: #022;
position: relative;
animation: bounce 1.2s ease 0.3s infinite alternate;
}
#body #left .div2 .span3{
color: #308;
position: relative;
animation: bounce 1.2s ease 0.8s infinite alternate;
}
</style>
</head>
<body>
<div id="header">
<div class="header1"></div>
<div class="header2"></div>
<div class="header3"></div>
</div>
<div id="naw"></div>
<div id="body">
<div id="left">
<div class="div1"></div>
<div class="div2">
<span class="span1">跳</span>
<span class="span2">起</span>
<span class="span3">来</span>
</div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<div class="div5"></div>
</div>
</body>
</html>
效果动态图
转载：https://blog.csdn.net/QWH_PYTHON/article/details/101312981
查看评论