Html学习 2022年3月26日-CFANZ编程社区

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！

第七课