html学习日记之八卦-CFANZ编程社区

今天通过学习饥人谷的课程，学习到了如何自己建立一个八卦图形。
首先先创建一个html文件，一般来说html文件会命名为index，js文件为main，css文件为style。
然后使用vscode，通过

加上tab，即可将初始的html适配文件给打出来。

这里将lang里en改成zh，意思是英文变成中文，标题改成八卦。
通常来说要一边做一边预览，只需要将创建好的index文件拖动至chrome浏览器即可，每次做出改动f5刷新一下即可。

首先话不多说，发上笔者的源代码：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>八卦</title>
    <style>
        @keyframes x {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(360deg)
            }
        }

        * {
            padding: 0;
            margin: 0;
            background: gray
        }

        [id=bagua-wrapper] {

            height: 100vh;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

        }

        [id=bagua] {

            height: 400px;
            width: 400px;
            border-radius: 200px;
            background: black;
            position: relative;
            overflow: hidden;
            animation: x 5s linear infinite;
            box-shadow: 0px 0px 3px 4px rgba(247, 214, 214, 0.75);
        }

        #bagua>:nth-child(1) {

            background: white;
            height: 400px;
            width: 200px;
            position: absolute;
        }

        #bagua>:nth-child(2) {

            background: white;
            height: 200px;
            width: 200px;
            position: absolute;
            left: 100px;
            border-radius: 100px;
        }

        #bagua>:nth-child(3) {

            background: black;
            height: 200px;
            width: 200px;
            position: absolute;
            left: 100px;
            border-radius: 100px;
            bottom: 0px;
        }

        #bagua>:nth-child(4) {

            background: white;
            height: 50px;
            width: 50px;
            position: absolute;
            left: 125px;
            border-radius: 25px;
            bottom: 75px
        }

        #bagua>:nth-child(5) {

            background: black;
            height: 50px;
            width: 50px;
            position: absolute;
            left: 125px;
            border-radius: 25px;
            top: 75px
        }

        [id=wenzi] {
            bottom: 5em;
            margin-top: 2em;
        }
    </style>
</head>

<body>
    <div id="bagua-wrapper">
        <div id="bagua">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="wenzi">
            道可道非常道
        </div>


    </div>
</body>

</html>

整体而言都比较简单，就简单讲下笔者在做的时候遇到的一些小问题以及解决思路把。

问题

遇到不知道的代码

这个就需要自己去查mdn，查阅方式也非常简单，就是将自己的需求关键字加上mdn搜索即可，比如笔者不知道如何让其附上阴影，只需要在google中搜索：box-shadow mdn，或者简单一点可以搜索box-shadow generator mdn，直接就有这个阴影生成器了。

无法居中

其实这个也不是很难，主要是需要知道你的八卦图形是需要一个wrapper将其包裹的，这个wrapper是作为一个容器让你的八卦图形与其他其他图形的分开，只需要建立这个id=bagua-wrapper的div然后对其style进行如下编辑即可。

height：100vh；
 box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

这样就可以使得你的八卦图形居中了。
但是这样其实是没办法完全居中，你会觉得有点歪歪的，那是因为页面本身有页边距，这个时候对body编辑：

padding: 0;
margin: 0;

就可以消除其页边距了。

动画

选择器

选择某个id
@frameworks
选择某个动画的关键帧
• from。。 to
具体设置每一帧的变化
• 0%。。30&。。。
选择第几个儿子

nth-child(1/2/3/4/5)
• >
• eg：#八卦>div:nth-child(1)；意思是id为八卦的子集

一般要做的

首先要将页面进行box-sizing:border，这样页面的东西都可编辑了。
一般图形都需要加一个border，这样方便看清楚图形的位置，范围，最后去掉就可了。