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>
测试
</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>
<div class="container">
<div class="left">
左侧
</div>
<div class="middle">
内容主体
</div>
<div class="right">
右侧
</div>
</div>
<div class="bottom">
底部
</div>
</div>
</body>
</html>
run,success!
第五课 table布局
5.1： 布局
<html>
<head></head>
<body>
<table style="background-color: darkgray">
<tbody>
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: orange">左菜单
<ul *ngFor="let message of messages;index as i" (click)="getMessage(message)">
<li>{{message}}</li>
</ul>
</td>
<td width="30%" height="80%" style="background-color: cornflowerblue">内容主题</td>
<td width="20%" height="80%" style="background-color: mediumaquamarine">右菜单</td>
</tr>
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: olivedrab">底部</td>
</tr>
</tbody>
</table>
</body>
</html>
5.2： 功能循环
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'untitled2';
messages: string[] = ['天之骄子，加入修仙之路群', 'Shadows，加入修仙之路群', 'tom，加入修仙之路群'];
getMessage(message: string) {
console.log(message)
}
}
第六课 ：三列布局
6.1
<html>
<head></head>
<body>
<div class="container">
<div class="left">
左边
</div>
<div class="content">
时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
</div>
<div class="right">
右边
</div>
</div>
</body>
</html>
6.2
.container{
width: 100%;
height: 100%;
position: relative;
}
.left{
width: 13%;
height: 100%;
background-color: green;
position: absolute;
top: 0;
color: orange;
text-align: center;
left: 0;
}
.content{
height: 100%;
line-height: 50px;
margin: 0 15%;
background-color: lightblue;
}
.right{
width: 13%;
height: 100%;
background-color: mediumpurple;
position: absolute;
text-align: center;
color: orange;
top: 0;
right: 0;
}
run，，success！
第七课: 垂直菜单
7.1垂直菜单
step1: css
*{
margin: 0;
padding: 0;
font-size: 14px;
}
a{
color: #333;
text-decoration: none;
}
.nav li a{
display: block;
text-align: center;
height: 40px;
line-height: 30px;
width: 120px;
background-color: orange;
margin-bottom: 10px;
}
.nav li a:hover{
background-color: #F60;
color: #fff;
}
step2: 布局
<html>
<head lang="en">
<title></title>
</head>
<body>
<div>
<ul class="nav">
<li class="item"><a rel="nofollow" href="#">首页</a>
</li>
<li class="item"><a rel="nofollow" href="#">关于我们</a>
</li>
<li class="item"><a rel="nofollow" href="#">产品展示</a>
</li>
<li class="item"><a rel="nofollow" href="#">售后服务</a>
</li>
<li class="item"><a rel="nofollow" href="#">联系我们</a>
</li>
</ul>
</div>
</body>
</html>
end
第八课：仿朋友圈item页面布局效果
step1: D:\vue\untitled2905\src\app\app.component.css
*{
margin: 0;
padding: 0;
}
body{
padding: 50px 0 0 20px;
font-size: 12px;
}
li{
list-style: none;
}
.list{
}
.list .item{
height: 127px;
}
.item .user-image{
padding: 5px;
margin-right: 18px;
border: solid 1px #ccc;
float: left;
}
.item .user-content{
width: 458px;
padding: 20px;
background-color: oldlace;
border: solid 1px blue;
float: left;
}
.user-content .header{
height: 22px;
display: flex;
}
.user-content .header .time{
color: greenyellow;
float: right;
position: relative;
top: -10px;
}
.content{
margin-top: 10px;
line-height: 20px;
text-indent: 2em;
}
step2: D:\vue\untitled2905\src\app\app.component.html
<div>
<ul class="list">
<li class="item">
<div class="user-image">
<img src="assets/logo.jpg">
</div>
<div class="user-content">
<div class="header">
<p>小丸子</p>
<p>10分钟前</p>
</div>
<p class="content">
且夫天下非小弱也，雍州之地，崤函之固，自若也。陈涉之位，非尊于齐、楚、燕、赵、韩、魏、宋、卫、中山之君也；锄耰棘矜，非铦于钩戟长铩也；谪戍之众，非抗于九国之师也；深谋远虑，行军用兵之道，非及乡时之士也。然而成败异变，功业相反，何也?试使山东之国与陈涉度长絜大，比权量力，则不可同年而语矣。然秦以区区之地，致万乘之势，序八州而朝同列，百有余年矣；然后以六合为家，崤函为宫；一夫作难而七庙隳，身死人手，为天下笑者，何也？仁义不施而攻守之势异也。
</p>
</div>
</li>
</ul>
</div>
run,success!
end
