这篇博客详细介绍了 Html 学习的过程，涵盖了从css动画到div布局、table布局、三列布局、垂直菜单以及仿朋友圈item页面布局等多个主题。通过各个步骤的学习和实践，实现了成功运行的效果。
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<
最低0.47元/天 解锁文章
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
