目录

  • 带着问题看代码
  • 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
    <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>

·未完待续·

参考文章

相关文章