目录

  • 带着问题看代码
  • CRM学习法
  • 制作一个太极
  • 总结过程

带着问题看代码

  • 主题思想
  • 遇到问题（模拟真实场景 磕磕绊绊地写代码、 处理步骤）
  • 在哪查资料（搜那些关键字 ）
  • 没想到的代码
  • 为什么用这个标签？
  • 为什么用这个选择器？
  • 这个工具没用过？

CRM学习法

定义

  • Copy 唱
  • Run 跳
  • Modify 篮球Rap

编程万精油法

  • 不看书
  • 用以致学

系统学习

放到核心阶段学

制作一个太极页面

这是一个非常小的项目

  • 足够简单：不快弃
  • 足够全面：手机端支持
  • 有扩展的余地：可以再加第二页内容
  • 很强的指导性：一窥学习技巧

目标：完成PC端和手机端：太极图，并用CSS动画，使其转起来

起手式

  • 创建目录：专用干净的工作目录；不要用中文（软件不对中文进行优化，会出现bug，避免不必用的bug）

  • 写代码： 先！然后Tab:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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

<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>Document</title>
</head>

<body>

</body>

</html>

<html lang="en">改为<html lang="zh">

设置VSCode

进入文件首选项>设置：

搜：

CSS Border调试法

1
2
3
4
5
6

#八卦{
    border:1px solid red;
    width:400px;
    height:400px;
    border-radius: 200px;
}

圆角矩形->正圆，去搜MDN border-radius 小于/大于/等于 width & height的一半

1
2
3
4
5
6

#八卦{
    border:1px solid red;
    width:400px;
    height:400px;
    border-radius: 50%;
}

思路：两个div对半开

Emmet语法

div+div

开始写

在body里添加

1
2
3
4
5

    <div id="八卦">
        <div></div>
        <div></div>
    </div>

在head里添加style标签，写CSS：

1
2
3
4
5
6

#八卦{
    border:1px solid red;
    width:400px;
    height:400px;
    border-radius: 50%;
}

当前元素的子元素（所有）：

1
2
3

#八卦>div{
    border:1px solid green;
}

当前元素的大儿子，老大：:first-child：

1
2
3

#八卦>div:first-child{
    border:1px solid green;
}

当前元素的第N个儿子：:nth-child(n)，n从1开始算：

1
2
3

#八卦>div:first-child{
    border:1px solid blue;
}

当前元素的子元素（所有）宽度、高度（50%）：

1
2
3
4

#八卦>div{
    width:50%;
    height:50%;
}
  • 怎么没在一行？后面再说,要让两个div一左一右
  • 定位子元素，到特定位置~
  • 绝对定位，怎么用？

要在父元素上先相对定位一下：

1
2
3
4
5
6
7

#八卦{
    border:1px solid red;
    width:400px;
    height:400px;
    border-radius: 50%;
    position:relative;
}

然后，将当前元素的子元素（所有）绝对定位一下：

1
2
3
4
5

#八卦>div{
    width:50%;
    height:50%;
    position:absolute;
}

如果没先在父元素上先相对定位， 那儿子会骑到父亲头上去（脱离当前文档流），你可以试试 现在可以定位了：

1
2
3
4

#八卦>div:first-child{
    border:1px solid blue;
    left:0;
}
  • 第N个儿子:nth-child(n){} ~~ 摁死孩子：
  • first-child{}等价于:nth-child(1){}
1
2
3
4

#八卦>div:nth-child(2){
    border:1px solid blue;
    right:0;
}

为什么都是50%的width，两个div还有重叠的部分？

  • CSS盒模型，CSS为什么难学？不正交

所有元素，改变盒模型，让重叠消失，更适合人类理解，以前的是垃圾（乐色）盒模型

1
2
3

* {
    box-sizing:border-box;
}

ID？为什么用#表示？可以用[id=""]{}来代替，但太麻烦，简化为#{}， 表示号码

加颜色：

1
2
3
4
5

#八卦>div:first-child{
    border:1px solid blue;
    left:0;
    background:black;
}

区别白色和透明（纸和水），默认是透明

1
2
3
4
5

#八卦>div:nth-child(2){
    border:1px solid blue;
    right:0;
    background:white;
}

得到两个矩形，一左一右，还有红色圆形border露出，删掉父元素圆形之外的部分，也不是删掉，只是遮挡掉：

1
2
3
4
5
6
7
8

#八卦{
    border:1px solid red;
    width:400px;
    height:400px;
    border-radius: 50%;
    position:relative;
    overflow:hidden;
}

超过我的部分：overflow:hidden;遮挡

删掉Border

1
2
3
4
5
6
7
8

#八卦>div:first-child {
        left: 0;
        background: black;
    }
#八卦>div:nth-child(2) {
        right: 0;
        background: white;
    }

删掉子元素div内容

1
2
3
4

<div id="八卦">
    <div></div>
    <div></div>
</div>

思路：突出部分再画一个圆（加一个div）：

1
2
3
4
5

<div id="八卦">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS Border调试大法：

1
2
3

#八卦>div:nth-child(3) {
    border:10px solid yellow;
    }

怎么还是看不见？

  • 和绝对定位有关

  • 绝对定位的之前两个div是浮起来的，挡住了第三个

思路：要把第三个弄到最前面来：

1
2
3
4
5
6
7
8
9

#八卦>div:nth-child(3) {
    width: 25%;
    height: 25%;/*小一点*/
    border:10px solid yellow;
    /* position:absolute; */
    /* 也给你浮起来 */
    z-index: 1;
    /* 提高优先级 */
    }

还是不行，之前父元素有overflow: hidden;，三太子在左上角，超出了圆的范围，被遮挡，所以看不见，边加个100px：

1
2
3
4
5
6
7

#八卦>div:nth-child(3) {
    width: 25%;
    height: 25%;/*小一点*/
    border:100px solid yellow;
    z-index: 1;
    /* 提高优先级 */
    }

为方便查看，先要注释掉overflow: hidden;这个属性，用Ctrl + /：

1
2
3
4
5
6
7
8

#八卦 {
    border: 1px solid red;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    /* overflow: hidden; */
}

你也可以故意拼错属性名为fuck overflow: hidden;

1
2
3
4
5
6
7
8

#八卦 {
    border: 1px solid red;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    fuckoverflow: hidden;
}
  • 拼错自然无效，在开发者工具中有个小三角，属性上有删除线
  • 删掉无用的z-index
1
2
3
4
5

#八卦>div:nth-child(3) {
    width: 25%;
    height: 25%;/*小一点*/
    border:10px solid yellow;
    }

思路：把黄div移到中间：

1
2
3
4
5
6

#八卦>div:nth-child(3) {
    width: 200px;
    height: 200px; /*大圆的一半*/
    border:10px solid orange; /*显眼 网络安全色*/
    left:50%;
    }

并没有居中

  • 左上角出现在中间，可以测试下：left:40%/50%/60%;

思路：希望div的中心出现在中间

  • 再往回倒left:25%;：
1
2
3
4
5
6

#八卦>div:nth-child(3) {
    width: 200px;
    height: 200px; /*大圆的一半*/
    border:10px solid orange; /*显眼 网络安全色*/
    left:25%;
    }

这是特殊情况，三太子宽度正好是大圆的一半；必须回去自身的一半margin-left:-50%;：

1
2
3
4
5
6
7

#八卦>div:nth-child(3) {
    width: 200px;
    height: 200px; /*大圆的一半*/
    border:10px solid orange; /*显眼 网络安全色*/
    left:50%;
    margin-left:-50%; /*常规操作*/
    }

加个圆角：

1
2
3
4
5
6
7
8

#八卦>div:nth-child(3) {
    width: 200px;
    height: 200px; /*大圆的一半*/
    border:10px solid orange; /*显眼 网络安全色*/
    left:50%;
    margin-left:-100px; /*常规操作*/
    border-radius:50%; /*不用计算具体px数值*/
    }
  • 不是margin-left:-50%;
  • 变黑；已经搞清位置，去掉border
1
2
3
4
5
6
7
8

#八卦>div:nth-child(3) {
    width: 200px;
    height: 200px; /*大圆的一半*/
    left:50%;
    margin-left:-100px; /*常规操作*/
    border-radius:50%; /*不用计算具体px数值*/
    background:black;
    }

在注释上再按用Ctrl + /，解除注释掉overflow: hidden;

1
2
3
4
5
6
7
8

#八卦 {
    border: 1px solid red;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

在下部加一个白色的小圆，到最前面，遮住

1
2
3
4
5
6

<div id="八卦">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

1
2
3
4
5
6
7
8
9

#八卦>div:nth-child(4) {
    width: 200px;
    height: 200px;
    left:50%;
    bottom:0;
    margin-left:-100px; 
    border-radius:50%; 
    background:white;
    }

不圆滑，因为border占了2px，去掉

1
2
3
4
5
6
7

#八卦 {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

融入了背景，看不清了，加背景色：

1
2
3

body{
    background:#eee;
}
  • 加第5和第6个小圆div
  • 复制第3和第4个小圆的CSS
  • 变小 width/height: 100px
  • 变色（为了知道位置）red/white/black
  • 左右居中的移动距离也小一半：margin-left:-50px 上- 下居中:下移一些：top:50%
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

#八卦>div:nth-child(5) {
    width: 100px;
    height: 100px;
    left: 50%;
    top: 12.5%;
    margin-left: -50px;
    border-radius: 50%;
    background: white;
}

#八卦>div:nth-child(6) {
    width: 100px;
    height: 100px;
    left: 50%;
    bottom: 12.5%;
    margin-left: -50px;
    border-radius: 50%;
    background: black;
}

为什么第一个文件要叫做index.html？

  • index.html作为入口是一个不成文的习惯，像是git本地仓主分支叫master，远程仓叫origin
  • apatch tomcat/nginx 默认index.html作为入口
  • 访问目录优先找index.html

代码测试链接：JSBin

为什么位置差几像素？ 用什么工具可以做到像素级调试？ 调试工具 标尺? 火狐 开发者版浏览器?

  • 手机模式开ruler
  • Chrome插件Page Ruler
  • Safari插件red lines

遇坑：一个标点px不写全，引起的bug

  • 查错流程：属性名拼写 单位名拼写VSCode 无提示

此阶段完整代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!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>TaiJiTu</title>
    <style>
        body {
            background: #eee;
        }
        * {
            box-sizing: border-box;
        }
        #八卦 {
            position: relative;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            overflow: hidden;
        }
        #八卦>div:first-child {
            position: absolute;
            width: 50%;
            height: 100%;
            left: 0;
            background: black;
        }
        #八卦>div:nth-child(2) {
            position: absolute;
            width: 50%;
            height: 100%;
            right: 0;
            background: white;
        }
        #八卦>div:nth-child(3) {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            margin-left: -100px;
            border-radius: 50%;
            background: black;
        }
        #八卦>div:nth-child(4) {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            bottom: 0;
            margin-left: -100px;
            border-radius: 50%;
            background: white;
        }
        #八卦>div:nth-child(5) {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            top: 75%;
            margin-left: -25px;
            border-radius: 50%;
            background: black;
        }
        #八卦>div:nth-child(6) {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            bottom: 75%;
            margin-left: -25px;
            border-radius: 50%;
            background: white;
        }
    </style>
</head>

<body>
    <div id="八卦">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    道可道，非常道
</body>

</html>

参考文章

  • 无

相关文章

  • 无
  • 作者： Joel
  • 文章链接：
  • 版权声明
  • 非自由转载-非商用-非衍生-保持署名
  • 河 掘 思 知 简