html学习日记之八卦
2019-08-20 本文已影响4人
郑馋师
今天通过学习饥人谷的课程，学习到了如何自己建立一个八卦图形。
首先先创建一个html文件，一般来说html文件会命名为index，js文件为main，css文件为style。
然后使用vscode，通过
!
加上tab，即可将初始的html适配文件给打出来。
创建一个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;
就可以消除其页边距了。
一般要做的
- 首先要将页面进行box-sizing:border，这样页面的东西都可编辑了。
- 一般图形都需要加一个border，这样方便看清楚图形的位置，范围，最后去掉就可了。
