[散修弟子]CSS-7483|2019年01月05日的日报-技能树.IT修真院

发表于： 2019-01-05 10:28:59

1 873

今天完成的事情

完成任务一二

明天计划的事情

领取新任务

遇到的问题

收获

1. HTML基础相关

<!-- 指示 web 浏览器页面使用HTML5版本进行编写-->
<!DOCTYPE html>
<html>
  <head>
    <!-- 声明编码格式为utf-8 -->
    <meta charset="utf-8" />
    <!-- 如果安装了GCF，则使用GCF来渲染页面「”chrome=1″」，如果没有安装GCF，则使用最高版本的IE内核进行渲染「”IE=edge”」。 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>梭哈</title>
    <!-- 声明元标签的名字为视口,视口宽度等于设备宽度,初始缩放值为1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入外联样式表 -->
    <link rel="stylesheet" type="text/css" media="screen" href="task01.css" /> 
  </head>
  <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

2. CSS样式表

html {
  margin-bottom: 2vw;
}
body {
  margin: 0;
}
div {
  float: left;
  width: calc(92vw / 3);
  height: calc(92vw / 3);
  margin: 2vw 0  0 2vw;
  border-radius: 3vw;
  /* 定义动画的属性 */
  animation: myfirst 6s infinite alternate;
}
/* 声明动画的细节 */
@keyframes myfirst {
  0%   {border-radius: 3vw;background: gold;transform: rotate(0deg);}
  50%  {border-radius: 15vw;background: #999999;transform: rotate(45deg);}
  100% {border-radius: 9vw;background: black;transform: rotate(90deg);}
}
/* 隐藏滚动条,仅支持Webkit内核浏览器 */
::-webkit-scrollbar{
  display:none;
}