Html学习:
html第三课:动画效果
3.1 css动画
div{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: red;
position: relative;
animation: anim 5s infinite alternate;
-webkit-animation: anim 5s infinite alternate;
}
@keyframes anim {
0%{
background-color: red;
left:0px;
top: 0px;
}
25%{
background-color: blue;
left:200px;
top: 0px;
}
50%{
background-color: greenyellow;
left:200px;
top: 200px;
}
75%{
background-color: cyan;
left:0px;
top: 200px;
}
100%{
background-color: mediumpurple;
left:0px;
top: 0px;
}
}
3.2 引用
<div>
<h1>测试</h1>
</div>
run ,success!
第四课:div布局
4.1 css属性
.container{
width: 100%;
height: 100%;
background-color: darkgray;
}
.header{
width: 100%;
height: 10%;
background-color: mediumpurple;
}
.content{
width: 100%;
height: 80%;
background-color: aliceblue;
overflow: hidden;
}
.left{
width: 20%;
height: 100%;
background-color: greenyellow;
float: left;
}
.middle{
width: 60%;
height: 100%;
background-color: purple;
float: left;
}
.right{
width: 20%;
height: 100%;
background-color: green;
float: left;
}
.bottom{
width: 100%;
height: 10%;
background-color: lightblue;
}
4.2 引用
<html>
<head></head>
<body>
<div class="container">
<div class="header">
头部
</div<