从0到1：HTML5+CSS3修炼之道

发表于 | 分类于 ， ， |

微信读书
操作笔记 07 08
2023-06-25 15:54:11（开始）
2023-06-28 08:59:36（html5 结束）
2023-06-29 07:58:42（css3 结束）

结构元素

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
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer。


1 header元素
        <header></header>
        <nav></nav>
        <article>
            <header></header>
            ……
            <footer></footer>
        </article>
        <aside></aside>
        <section>
            <header></header>
            ……
        </section>
        <footer></footer>
        
        
        ![HTML结构图](https://img-blog.csdnimg.cn/e87ad640d8cd4609beaf97ea5ec0e79a.png)

2 nav元素
        以前的导航结构如下：
        <div id="nav">
            <ul>
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
            </ul>
        </div>
        
        现在的导航结构如下：
        <nav id="nav">
            <ul>
                <li><a></a></li>
                <li><a></a></li>
                <li><a></a></li>
            </ul>
        </nav>
        
        nav元素并不只是可以用于顶部导航，还可以用于侧栏导航以及分页导航。例如：博客左侧目录

3 article元素
        在HTML5中，article元素一般只会用于一个地方：文章内容部分。
        article元素内部可以包含header元素、section元素和footer元素等。
        在严格意义上，每一个article元素内部都应该有一个header元素。

        <article>
            <header>
                <h1>HTML5是什么？</h1>
                <p>作者、点赞、评论、浏览……</p>
            </header>
            <div id="content">文章内容……</div>
            <footer>
                <nav>上一篇、下一篇导航</nav>
            </footer>
        </article>

4 aside元素
        aside元素一般用于表示跟周围区块相关的内容。

5 section元素
        在HTML5中，section元素一般用于某一个需要标题内容的区块。
        如果页面某个区块不需要标题，直接使用div元素就可以了。如果需要标题，则建议使用section元素。
        
        HTML5标准建议，section元素内部必须带有标题，也就是说，section元素内部必须带有一个header元素。
        
        在HTML5中，article、aside这两个元素可以看成是“特殊”的section元素，因为它们比section元素更具有语义化。
        在实际开发中，对于页面某一个区块，优先考虑语义化更好的article元素和aside元素，如果这两个都不符合，再考虑使用section元素。
        <section>
            <header>工具手册</header>
            <ul>
                <li>HTML5参考手册</li>
                <li>CSS3参考手册</li>
                <li>JavaScript参考手册</li>
            </ul>
        </section>

6 footer元素
        <article>
            <header>
                <h1>HTML5是什么？</h1>
                <p>作者、点赞、评论、浏览……</p>
            </header>
            <div id="content">文章内容……</div>
            <footer>
                <nav>上一篇、下一篇导航</nav>
            </footer>
        </article>
-->
</body>
</html>

表单元素

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            {
                var input = document.querySelectorAll(".range input")[0];
                var output = document.querySelectorAll(".range output")[0];
                output.value = input.value; //获取range的初始值
                input.onchange = function () {//拖动滑动条，改变output值
                    output.value = input.value;
                };
            }

            {
                var input2 = document.querySelectorAll(".number input")[0];
                var output2 = document.querySelectorAll(".number output")[0];
                output2.value = input2.value;//获取number的初始值
                input2.onchange = function () {//点击微调按钮，改变output值
                    output2.value = input2.value;
                };
            }

            {
                var input3 = document.querySelectorAll(".color input")[0];
                var output3 = document.querySelectorAll(".color output")[0];
                output3.value = input3.value;//页面一载入，获取color的初始值
                input3.onchange = function () {//选择颜色，改变output值
                    output3.value = input3.value;
                };
            }
        }
    </script>
</head>
<body>
<!--
2.2 表单元素


1 新增input元素类型
    验证
        email   邮件类型
        tel     电话号码
        url     URL类型
    取值
        range    取数字（滑块方式）
        number   取数字（微调方式）
        color    取颜色
        date     取日期 如 2023-06-25
        time     取时间 如 17:38
        month    取月份
        week     取周数
-->

<h4>type="email"</h4>
<form method="post">
    <p><label>电子邮件：<input type="email"/></label></p>
    <input type="submit" value="提交"/>
</form>
<pre>
    email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。
</pre>
<hr>

<h4>type="tel"</h4>
<form method="post">
    <p><label>电话号码：<input type="tel"/></label></p>
    <input type="submit" value="提交"/>
</form>
<pre>
    当我们输入非电话号码格式的字符，然后点击【提交】按钮时，却发现居然可以提交！这是怎么回事呢？
    其实tel类型文本框并不具备完备的验证功能，如果想要达到验证效果，则需要结合pattern属性来实现。
</pre>
<hr>

<h4>type="url"</h4>
<form method="post">
    <p><label>你的网址：<input type="url"/></label></p>
    <input type="submit" value="提交"/>
</form>
<pre>
    所谓的URL格式字符，指的是以“http://”或者“https://”开头的网络地址。
    
    有些小伙伴会发现，像https://www、tps://www.lvyestudy.com这种字符串也能提交！
    原因也是一样的：url类型文本框也不具备完备的验证功能，如果想要达到验证效果，需要结合pattern属性来实现。
</pre>
<hr>

<h4>type="range"  与  output</h4>
<form method="post" class="range">
    <input type="range" min="-10" max="10" step="5" value="-10"/>
    <output></output>
</form>
<pre>
    input type="range" min="最小值" max="最大值" step="间隔数" value="初始值"
    这3个属性的取值可以是整数，也可以是小数。
    
    output元素是一个行内元素，只不过它比span元素更具有语义化。
    （一般放在form元素内部，并且配合其他表单元素（如文本框等）来使用）
</pre>
<hr>

<h4>type="number"</h4>
<form method="post" class="number">
    <input type="number" min="-10" max="10" step="5" value="-10"/>
    <output></output>
</form>
<pre>
    input type="number" min="最小值" max="最大值" step="间隔数" value="初始值"
    
    number类型跟range类型功能非常相似，都是获取某一个范围内的数字。
    其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。
</pre>
<hr>

<h4>type="color"</h4>
<form method="post" class="color">
    <input type="color" value="#000000"/>
    <output></output>
</form>
<pre>
    input type="color" value=""
    
    当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。
    
    value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字（如black）和rgba颜色（如rgba(255, 255, 255, 0.5)）。
</pre>
<hr>

<h4>type="date"</h4>
<form method="post">
    <input type="date" value="2023-06-25"/>
</form>
<pre>
    input type="date" value="2023-06-25"
    
    value属性用于设置初始值，格式必须如“2023-06-25”。
</pre>
<hr>

<h4>type="time"</h4>
<form method="post">
    <input type="time" value="18:23"/>
</form>
<pre>
    input type="time" value="18:23"
    
    value属性用于设置初始值，格式必须如“18:23”。
</pre>
<hr>

<h4>type="month"</h4>
<form method="post">
    <input type="month" value="2023-06"/>
</form>
<pre>
    input type="month" value="2023-06"
    
    value属性用于设置初始值，格式必须如“2023-06”。
</pre>
<hr>

<h4>type="week"</h4>
<form method="post">
    <input type="week" value="2023-W25"/>
</form>
<pre>
    input type="week" value="2023-W25"
    
    value属性用于设置初始值，格式必须如“2023-W25”。“W”是“week”的缩写。
</pre>
<hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

其他元素

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            {
                var oProgress = document.querySelectorAll(".progress progress")[0];
                var oSpan = document.querySelectorAll(".progress span")[0];
                var oBtn = document.querySelectorAll(".progress input")[0];
                oBtn.onclick = function () {
                    var i = 0;
                    setInterval(function () {
                        if (i < 100) {
                            i++;
                            oProgress.value = i;
                            oSpan.innerText = i;
                        }
                    }, 100)
                }
            }
        }
    </script>
</head>
<body>
<!--
        - progress
        - meter（静态占比）
        - figure figcaption “图片+图注”效果
        - fieldset、legend（表单美化）
        - a标签 download属性
        - small 版权声明
        - script defer、async属性
-->

<h4>progress</h4>
<div class="progress">
    <p>
        <progress max="100" value="0"></progress>
        <span>0</span>%
    </p>
    <input type="button" value="显示进度"/>
</div>
<pre>
    max和value必须是0或正数
    
    progress max="10" value="8"
    progress max="100" value="80"
    “进度=value/max”，因此虽然两个progress元素的max和value不一致，但是进度是相同的，都是80%。
</pre>
<hr>

<h4>meter（静态占比）</h4>
<meter min="0" max="10" value="8"></meter>
<br/>
<meter min="0" max="100" value="80"></meter>
<pre>
    ▶ meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。
    ▶ progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。
</pre>
<hr>

<h4>figure figcaption “图片+图注”效果</h4>
<figure>
    <img src="img/仓鼠.jpg" alt="" style="width: 80px;height: 80px;"/>
    <figcaption>仓鼠</figcaption>
</figure>
<pre>
</pre>
<hr>

<h4>fieldset、legend（表单美化）</h4>
<form method="post">
    <fieldset>
        <legend>登录绿叶学习网</legend>
        <p><label for="name">账号：</label><input type="text" id="name" name="name"/></p>
        <p><label for="pwd">密码：</label><input type="password" id="pwd" name="pwd"/></p>
        <input type="checkbox" id="remember-me" name="remember-me"/>
        <label for="remember-me">记住我</label>
        <input type="submit" value="登录"/>
    </fieldset>
</form>
<pre>
    使用fieldset和legend有两个作用：
        增强表单的语义；
        定义fieldset元素的disabled属性来禁用整个组中的表单元素。
</pre>
<hr>

<h4>a标签 download属性</h4>
<p><a href="img/仓鼠.jpg" download="仓鼠2.png">下载仓鼠图片（指定下载名称）</a></p>
<p><a href="img/仓鼠.jpg" download>下载仓鼠图片（默认下载名称）</a></p>
<pre>
    download属性用于为文件取一个新的文件名。如果download属性值省略，则表示使用旧的文件名。
</pre>
<hr>

<h4>small 版权声明</h4>
<small>Copyright ©2015-2017 绿叶学习网(www.lvyestudy.com), All Rights Reserved</small>
<pre>
    small元素一般用于网站底部的免责声明、版权声明等
</pre>
<hr>

<h4>script defer、async属性</h4>
<small>Copyright ©2015-2017 绿叶学习网(www.lvyestudy.com), All Rights Reserved</small>
<pre>
    ▶ defer属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等到整个HTML文档加载完成才会执行。
    ▶ async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。
    
    defer和async都是异步加载的，两者区别在于，异步加载外部JavaScript文件完成后何时执行。
</pre>
<hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

新增公共属性

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
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .draggable {
            display: inline-block;
            padding: 10px;
            border: 1px dashed gray;
            background-color: #F1F1F1;
        }

        .contenteditable {
            display: inline-block;
            padding: 10px;
            border: 1px dashed gray;
            background-color: #F1F1F1;
        }
    </style>
    <script>
        window.onload = function () {
            {
                var oP = document.querySelectorAll(".data p")[0];
                oP.onclick = function () {
                    oP.style.color = oP.dataset.color;
                }

                var oLi = document.querySelectorAll(".data li");
                for (var i = 0; i < oLi.length; i++) {
                    console.log(oLi[i].innerText + "：" + oLi[i].dataset.fruitPrice + "/斤");
                }
            }
        }
    </script>
</head>
<body>
<!--
3.1 公共属性
    ▶ hidden
    ▶ draggable
    ▶ contenteditable
    ▶ data-*
-->

<h4>hidden属性</h4>
<div hidden>海贼王</div>
<div>火影忍者</div>
<pre>
    hidden="hidden"   简写 hidden
    
    给任何元素加上 hidden属性 就可以隐藏。
</pre>
<hr>

<h4>draggable属性</h4>
<div><p class="draggable" draggable="false">不能拖动</p></div>
<div><p class="draggable" draggable="true">可以拖动</p></div>
<pre>
    draggable有两个属性值：true和false。默认值为false。
    
    其实draggable="true"只能定义元素可以被拖动这一个行为，拖动后并不会改变元素的位置。
</pre>
<hr>

<h4>contenteditable属性</h4>
<div><p class="contenteditable" contenteditable="false">这是一段不能被编辑的文字</p></div>
<div><p class="contenteditable" contenteditable="true">这是一段可以被编辑的文字</p></div>
<pre>
    contenteditable有两个属性值：true和false。默认值为false。
</pre>
<hr>

<h4>data-*属性</h4>
<div class="data">
    <p data-color="red">你的努力程度之低，根本轮不到拼天赋。</p>
    <ul>
        <li data-fruit-price="￥6.5">苹果</li>
        <li data-fruit-price="￥12.5">香蕉</li>
        <li data-fruit-price="￥3.5">西瓜</li>
    </ul>
</div>
<pre>
    在HTML5中，我们可以使用data-*属性来为元素实现自定义属性。
    
    我们可以使用DOM操作中的obj.dataset.xxx来获取data-*属性的值。
    
    如果是data-xxx-yyy格式，则应该写成obj.dataset.xxxYyy。
    例如上面 data-fruit-price应该写成obj.dataset.fruitPrice。
</pre>
<hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

新增表单属性

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
    <script>
        window.onload = function () {

        }
    </script>
</head>
<body>
<!--
3.2 input元素的新增属性
    ▶ autocomplete
    ▶ autofocus
    ▶ placeholder
    ▶ required
    ▶ pattern

3.3 form元素新增 novalidate属性
-->

<h4>autocomplete属性</h4>
<form method="post">
    <!-- input.list 绑定 datalist.id -->
    <input type="text" autocomplete="on" list="tips"/>
    <datalist id="tips">
        <option value="HTML"></option>
        <option value="CSS"></option>
        <option value="JavaScript"></option>
        <option value="Vue.js"></option>
        <option value="React.js"></option>
        <option value="Angular.js"></option>
    </datalist>
</form>
<pre>
    autocomplete属性有两个属性值：on和off。on表示开启，off表示关闭。
    autocomplete属性一般都是结合datalist元素来实现自动提示功能。
    
    autocomplete属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。
    
    功能：当我们输入内容时，文本框会自动匹配datalist元素中的选项并且弹出匹配列表。
</pre>
<hr>

<h4>autofocus属性</h4>
<form method="post">
    <input type="text" autofocus/>
</form>
<pre>
    input type="text" autofocus="autofocus"
    input type="text" autofocus
    
    在HTML5中，我们可以使用autofocus属性来实现文本框自动获取焦点。
    autofocus属性也适用于所有文本框型的input元素，包括text、password、email、url、tel等。
</pre>
<hr>

<h4>placeholder属性</h4>
<form method="post">
    <input type="text" placeholder="请输入账号"/><br/>
    <input type="text" placeholder="请输入密码"/>
</form>
<pre>
    input type="text" placeholder="提示内容"
    
    在HTML5中，我们可以使用placeholder属性为文本框添加提示内容。
</pre>
<hr>

<h4>required属性</h4>
<form method="post">
    <input type="text" required/><br/>
    <input type="submit" value="提交"/>
</form>
<pre>
    input type="text" required="required"
    
    required属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。
    
    在HTML5中，我们可以使用required属性来规定 “如果文本框为空，则不允许提交”。
</pre>
<hr>

<h4>pattern属性</h4>
<form method="post">
    <input type="text" pattern="^[a-zA-Z]\w{4,9}$"/><br/>
    <input type="submit" value="提交"/>
</form>
<pre>
    input type="text" pattern="正则表达式"
    
    在HTML5中，我们可以使用pattern属性来为文本框添加验证功能。
    
    此外，email、url、tel这3个类型的input元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。
</pre>
<hr>

<h4>form元素新增 novalidate属性</h4>
<form method="post" novalidate>
    <p><label>电子邮箱：<input type="email"/></label></p>
    <p><label>手机号码：<input type="tel"/></label></p>
    <input type="submit" value="提交"/>
</form>
<pre>
    我们为form元素添加了novalidate属性，因此当点击按钮提交表单时，form元素内的文本框就不会采用浏览器内置的验证机制，
    然后我们就可以使用JavaScript来创建新的验证规则。
</pre>
<hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

元素拖动

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            position: relative;
        }

        img {
            position: absolute;
            width: 60px;
            height: 60px;
        }

        /*----------------------------------------*/

        ul {
            width: 120px;
            height: 120px;
            border: 1px solid silver;
        }

        /*----------------------------------------*/

        #bigBox {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }

        #smallBox {
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: lightskyblue;
        }
    </style>
    <script>
        window.onload = function () {
            {
                var oImg = document.getElementsByTagName("img")[0];
                var offsetX, offsetY;
                oImg.ondragstart = function (e) {//元素每次拖动开始时，记录它的坐标（偏移量）
                    offsetX = e.offsetX;
                    offsetY = e.offsetY;
                };
                oImg.ondrag = function (e) {//元素拖动过程中，重新设置它的坐标（偏移量）
                    if (e.pageX == 0 && e.pageY == 0) {
                        return;
                    }
                    oImg.style.left = (e.pageX - offsetX) + "px";
                    oImg.style.top = (e.pageY - offsetY) + "px";
                }
            }

            {
                var oLi = document.querySelectorAll("#list li");
                var oBox = document.getElementById("box");
                //为每一个li（源元素）添加ondragstart事件
                for (var i = 0; i < oLi.length; i++) {
                    oLi[i].ondragstart = function (e) {
                        e.dataTransfer.setData("text/plain", e.target.id);// ===========> set id
                    };
                }
                //调用event.preventDefault()方法来屏蔽元素的默认行为，否则drop事件不会被触发！
                oBox.ondragover = function (e) {
                    e.preventDefault();
                };
                oBox.ondrop = function (e) {//被拖动的元素 释放到本元素上时
                    e.preventDefault();
                    var id = e.dataTransfer.getData("text/plain");// ===================> get id
                    var obj = document.getElementById(id);
                    oBox.appendChild(obj);
                };
            }

            {
                var oBigBox = document.getElementById("bigBox");
                var oSmallBox = document.getElementById("smallBox");
                // oSmallBox.ondragstart = function () {};//这一行代码也可以删除
                oBigBox.ondragover = function (e) {
                    e.preventDefault();
                };
                oBigBox.ondrop = function (e) {
                    e.preventDefault();
                    oSmallBox.parentNode.removeChild(oSmallBox);
                };
            }
        }
    </script>
</head>
<body>
<!--

源元素触发事件
    ondragstart 开始拖动
    ondrag      正在拖动
    ondragend   结束拖动

目标元素触发事件
    ondragenter   当被拖动的元素 进入 本元素时
    ondragover    当被拖动的元素 正在 本元素范围内移动时
    ondragleave   当被拖动的元素 离开 本元素时
    ondrop        当被拖动的元素 释放 在本元素时

想要实现拖曳效果，一般情况下我们需要操作3个事件：ondragstart、ondragover和ondrop。
-->
<img src="img/仓鼠.jpg" alt="" draggable="true">
<br><br><br><br><br>
<hr>

<h4>li标签的拖动</h4>
<ul id="list">
    <li draggable="true" id="li1">HTML</li>
    <li draggable="true" id="li2">CSS</li>
    <li draggable="true" id="li3">JavaScript</li>
    <li draggable="true" id="li4">jQuery</li>
    <li draggable="true" id="li5">Vue.js</li>
</ul>
<ul id="box"></ul>

<hr>

<h4>垃圾箱</h4>
<div id="bigBox"></div>
<div id="smallBox" draggable="true"></div>

</body>
</html>

文件操作

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .beautify {
            position: relative;
            width: 160px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            color: #ffffff;
            background: #00b7ee;
        }

        .beautify input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 160px;
            height: 44px;
            opacity: 0;/* 虽然表单看不见了，但它并没有消失，还占据着原来的位置，从浏览器控制台也可以很清楚地看出来 */
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function () {

        }
    </script>
</head>
<body>
<!--
        上传单个文件
            <input type="file" />
        
        上传多个文件（二者等同）
            <input type="file" multiple />
            <input type="file" multiple="multiple" />
        
        accept属性（过滤文件类型，可以逗号分割   MIME类型）
        <input type="file" accept="image/jpeg"/>
        <input type="file" accept="image/jpeg, image/png"/>
-->

<h4>单个（显示名称）</h4>
<form method="post">
    <input type="file"/>
</form>
<hr>

<h4>多个（显示数量，鼠标放上显示名称列表）</h4>
<form method="post">
    <input type="file" multiple/>
</form>
<hr>

<h4>多个（accept="image/png, image/jpeg"）</h4>
<form method="post">
    <input type="file" multiple accept="image/png, image/jpeg"/>
</form>
<hr>

<h4>美化后的表单</h4>
<div class="beautify">
    <label>点击选择文件</label>
    <input type="file" accept="image/*" multiple>
</div>
<hr>

</body>
</html>

本地存储

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
    <script>
        window.onload = function () {
            var store = localStorage;// 永久
            // var store = sessionStorage;// 临时
            var oUser = document.getElementById("user");
            var oPwd = document.getElementById("pwd");
            var oBtn = document.getElementById("btn");
            var oMes = document.getElementById("mes");
            //页面一打开时，使用getItem()方法获取数据
            oMes.innerHTML = "账号：" + store.getItem("user") + "<br/>密码：" + store.getItem("pwd");
            //点击按钮后，使用setItem()方法设置数据
            oBtn.onclick = function () {
                store.setItem("user", oUser.value);
                store.setItem("pwd", oPwd.value);
                oMes.innerHTML = "账号：" + oUser.value + "<br/>密码：" + oPwd.value;
            };
        }
    </script>
</head>
<body>
<!--

HTML4.01，浏览器存用户部分数据，一般用Cookie，不过Cookie有限制：
▶ 大小限制：大多数浏览器支持最大为4KB的Cookie。
▶ 数量限制：大多数浏览器只允许每个站点存储20个Cookie，如果想要存储更多Cookie，则旧的Cookie将会被丢弃。
▶ 有些浏览器还会对它们将接收的来自所有站点的Cookie总数做出绝对限制，通常为300个。
▶ Cookie默认情况下都会随着HTTP请求发送到后台，但是实际上大多数请求都是不需要Cookie的。

为了解决Cookie限制，HTML5新增了3种存储：
- localStorage 用于永久保存客户端的少量数据
- sessionStorage 用于临时保存客户端的少量数据
- indexedDB 用于永久保存客户端的大量数据

--------------------------------------------------------------------
1. localStorage
        永久保存，浏览器关闭也不丢，下次打开仍存在。
        限制：每个域名 5MB。
        
        setItem(k, v)    保存
        getItem(k)       获取
        removeItem(k)    删除
        clear()          清空所有
        key(n)           获取第n个值，n为整数。

--------------------------------------------------------------------
2. sessionStorage
        临时保存，浏览器关闭，数据消失。
        
        方法同 localStorage

--------------------------------------------------------------------
3. indexedDB   暂时忽略

-->
账号：<input id="user" type="text"/><br/>
密码：<input id="pwd" type="text"/>
<input id="btn" type="button" value="设置"/>
<p id="mes" style="color:red;"></p>

</body>
</html>

视频音频

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
    <script>
        window.onload = function () {
            var oVideo = document.querySelector(".case2 video");

            // 播放 暂时
            {
                var oPlay = document.querySelector(".case2 .play");
                var oPause = document.querySelector(".case2 .pause");
                oPlay.onclick = function () {
                    oVideo.play();
                };
                oPause.onclick = function () {
                    oVideo.pause();
                };
            }

            // 音量大小
            {
                var oAdd = document.querySelector(".case2 .add");
                var oReduce = document.querySelector(".case2 .reduce");
                oAdd.onclick = function () {
                    oVideo.volume += 0.2;
                };
                oReduce.onclick = function () {
                    oVideo.volume -= 0.2;
                };
            }

            // 静音
            {
                var oMute = document.querySelector(".case2 .mute");
                var flag = 1;
                oMute.onclick = function () {
                    if (flag == 1) {
                        oVideo.muted = true;
                        oMute.value = "开启";
                        flag = 0;
                    } else {
                        oVideo.muted = false;
                        oMute.value = "静音";
                        flag = 1;
                    }
                }
            }

            // 快进 快退
            {
                var oRate = document.querySelector(".case2 .rate");
                oRate.innerText = oVideo.playbackRate;

                var oBtnFast = document.querySelector(".case2 .fast");
                var oBtnSlow = document.querySelector(".case2 .slow");
                //快进：速率小于等于1时，每次只增加0.2；大于1时，每次增加1
                oBtnFast.onclick = function () {
                    if (oVideo.playbackRate < 1) {
                        oVideo.playbackRate += 0.2;
                    } else {
                        oVideo.playbackRate += 1;
                    }
                    oRate.innerText = oVideo.playbackRate.toFixed(1);
                };
                //慢进：速率小于等于1时，每次只减少0.2；大于1时，每次减少1
                oBtnSlow.onclick = function () {
                    if (oVideo.playbackRate <= 1) {
                        oVideo.playbackRate -= 0.2;
                    } else {
                        oVideo.playbackRate -= 1;
                    }
                    oRate.innerText = oVideo.playbackRate.toFixed(1);// 保留1位小数，防止 0.6000000000000001
                };
            }

            // 进度条
            {
                setTimeout(function () {
                    var oOutput = document.querySelector(".case2 output");
                    oOutput.innerText = oVideo.currentTime + "/" + oVideo.duration + "s";

                    var oRange = document.querySelector(".case2 .range");
                    //初始化进度条的3个属性值：min、max、value
                    oRange.min = 0;
                    oRange.max = oVideo.duration;// 总共多少秒
                    oRange.value = 0;
                    //触发滑动条的onchange事件（滑条改变，视频跟着变）
                    oRange.onchange = function () {
                        oVideo.currentTime = oRange.value;
                        oOutput.innerText = oVideo.currentTime.toFixed(0) + "/" + oVideo.duration.toFixed(0) + "s";
                    };
                    //触发video的timeupdate事件（视频播放的时候时间改变，滑条也跟着变）
                    oVideo.addEventListener("timeupdate", function () {
                        oRange.value = oVideo.currentTime;
                        oOutput.innerText = oVideo.currentTime.toFixed(0) + "/" + oVideo.duration.toFixed(0) + "s";
                    }, false);
                }, 100);// 延迟100ms，避免视频未加载好，读取 oVideo.duration NaN

            }
        }
    </script>
</head>
<body>
<!--
7.1.1 Flash时代的逝去
    随着浏览器的更新迭代以及HTML5的不断发展，最终迫使Flash逐渐退出历史舞台，并且其开发商Adobe公司也鼓励大家使用HTML5来代替Flash。

7.1.2 HTML5时代的来临
    在HTML5时代中，正确的做法是：
        对于视频，使用video元素来开发。
        对于音频，使用audio元素来开发；
        
        video/audio 属性/DOM操作 都一毛一样。
------------------------------------------------------------------------------------------------
video/audio
    autoplay   是否自动播放
    controls   是否显示控件
    loop       是否循环播放
    preload    是否预加载
        auto     预加载（默认）
        metadata 只预加载元数据（即大小、第一帧、播放列表等）
        none     不预加载

------------------------------------------------------------------------------------------------
自定义视频（操作 video元素/audio元素）
    YouTube bilibili 都是自定义样式。
    
    DOM属性
        volume          音量
        currentTime     当前播放时间（单位：秒）
        startTime       设置播放时间（单位：秒） 从哪里开始播放
        duration        总的播放时间（单位：秒）
        playbackRate    当前播放速率（默认值：1）
        muted           是否静音（默认 false）
        paused          是否处于静音（true 或 false）
        end             是否播放完毕（true 或 false）
    DOM方法
        play()   播放
        pause()  暂停
    DOM事件
        timeupdate  视频时间改变时触发
-->

<video width="320" height="240" src="media/中国上海世界金融中心.mp4" autoplay controls loop></video>

<hr>

<div class="case2">
    <div>
        <video width="320" height="240" src="media/中国上海世界金融中心.mp4" preload="metadata"></video>
    </div>
    <div>
        <input class="play" type="button" value="播放"/>
        <input class="pause" type="button" value="暂停"/>
    </div>
    <div>
        <input class="add" type="button" value="增大"/>
        <input class="reduce" type="button" value="减小"/>
        <input class="mute" type="button" value="静音"/>
    </div>
    <div>
        <input class="fast" type="button" value="快进"/>
        <input class="slow" type="button" value="慢进"/>
        <span>当前速率：</span><span class="rate"></span>
    </div>
    <div>
        <input class="range" type="range"/>
        <output></output>
    </div>
</div>

<hr>

<h4>去除controls 可实现网页背景音乐</h4>
<audio src="media/陶攀峰 - 祖师爷专用起床铃.mp3" autoplay controls loop></audio>
<!--<audio src="media/陶攀峰 - 祖师爷专用起床铃.mp3" autoplay loop></audio>-->
<hr>


</body>
</html>

canvas

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
    <script>
        window.onload = function () {
            //1.获取Canvas对象
            var cnv = document.getElementById("canvas");
            //2.获取上下文环境对象Context
            var cxt = cnv.getContext("2d");
            //3.开始绘制图形
            cxt.moveTo(50, 100);
            cxt.lineTo(150, 50);
            cxt.stroke();
        }
    </script>
</head>
<body>
<!--
在HTML5之前，为了使页面更加绚丽多彩，我们很多情况下都是借助“图片”来实现。
不过，使用图片这种方式，都是以“低性能”为代价的。因为图片体积大、下载速度慢等。
为了应对日渐复杂的Web应用开发，W3C在HTML5标准中引入了Canvas这一门技术。

Canvas，又称“画布”，是HTML5的核心技术之一。
HTML5新增了一个Canvas元素，我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。
Canvas技术是一门纯JavaScript操作的技术，因此大家需要具备JavaScript入门知识。

既然Canvas是HTML5核心技术，那它都有哪些厉害之处呢？
1．绘制图形
    Canvas可以用来绘制各种基本图形，如矩形、曲线、圆等，也可以绘制各种复杂绚丽的图形
2．绘制图表
    数据展示离不开图表，使用Canvas可以绘制满足各种需求的图表
3．动画效果
    使用Canvas，我们也可以制作各种华丽的动画效果
4．游戏开发
    游戏开发在HTML5领域具有举足轻重的地位，现在我们也可以使用Canvas来开发各种游戏。这几年非常火的游戏如《捕鱼达人》《围住神经猫》等

Canvas位图（放大会失真）
SVG矢量图（放大不会失真）

Canvas是一个行内块元素（即inline-block），我们一般需要指定其3个属性：id、width和height。

▶ 数学坐标系：y轴正方向向上。
▶ W3C坐标系：y轴正方向向下。
-->
<canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>

</body>
</html>

———————

css3简介

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>
<!--
对于刚刚接触CSS3的小伙伴，一开始肯定会有这么一个疑问：“CSS3跟CSS有什么区别呢？”
=> 实际上，CSS是从CSS1、CSS2、CSS2.1到CSS3这几个版本一路升级而来的。

我们常说的CSS指的是CSS2.1，而CSS3特指相对于CSS2.1新增加的内容，注意是“新增加的内容”。
换句话说，你要学的CSS其实等于CSS2.1加上CSS3。

CSS3相对于CSS2.1来说，新增了大量属性，不仅可以让页面更加酷炫，最重要的是可以提高网站的可维护性以及访问速度。
其中，CSS3新技术包括以下11个方面。
    ▶ 新选择器
    ▶ 文本样式
    ▶ 颜色样式
    ▶ 边框样式
    ▶ 背景样式
    ▶ CSS3变形
    ▶ CSS3过渡
    ▶ CSS3动画
    ▶ 多列布局
    ▶ 弹性布局
    ▶ 用户界面

--------------------------------------------------
给小伙伴们一个很有用的建议：在学习任何编程语言的过程中，一定要养成查阅官方文档的习惯，因为这是最权威的参考资料，并且还能提高自己的英文水平。

对于CSS3的学习，建议大家多看看W3C官方文档和MDN官方文档。
-->
</body>
</html>

浏览器前缀

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>
<!--
        -webkit-     Chrome Safari
        -moz-        Firefox
        -ms-         IE
        -o-          Opera


border-shadow:5px 5px 10px red;
-webkit-border-shadow:5px 5px 10px red;
-moz-border-shadow:5px 5px 10px red;
-ms-border-shadow:5px 5px 10px red;
-o-border-shadow:5px 5px 10px red;
-->
</body>
</html>

属性选择器

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>
<!--
14.2 属性选择器
        E[attr^="xxx"]   选择元素E，其中E元素的attr属性以 xxx开头
        E[attr$="xxx"]   选择元素E，其中E元素的attr属性以 xxx结尾
        E[attr*="xxx"]   选择元素E，其中E元素的attr属性包含 xxx
        
        例如：匹配 doc pdf ppt 链接，分别在前面加上小图标
            a[href$="doc"]::before { content:url("img/1.png"); }
            a[href$="pdf"]::before { content:url("img/2.png"); }
            a[href$="ppt"]::before { content:url("img/3.png"); }
            
            ::before是伪元素，常配合content属性使用，实现为元素插入内容。
-->
</body>
</html>

子元素伪类选择器

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>
</head>
<body>
<!--
14.3 子元素伪类选择器
    ▶ :first-child、:last-child、:nth-child(n)、:only-child
    ▶ :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

    案例
        <div>
            <h1></h1>
            <p></p>
            <span></span>
            <span></span>
        </div>
        ▶ h1:first-child：选择的是h1，因为父元素（即div）下的第一个子元素就是h1。
        ▶ p:first-child：选择不到任何元素，因为父元素（即div）下的第一个子元素是h1，不是p。
        ▶ span:first-child：选择不到任何元素，因为父元素（即div）下的第一个子元素是h1，不是span。
        
        ▶ h1:first-of-type：选择的是h1，因为h1是父元素中h1类型的子元素，然后我们选择第一个h1（实际上也只有一个h1）。
        ▶ p:first-of-type：选择的是p，因为p是父元素中p类型的子元素，然后我们选择第一个p（实际上也只有一个p）。
        ▶ span:first-of-type：选择的是第一个span，因为span是父元素中span类型的子元素，我们选择第一个span。
        
        :first-child在选择父元素下的子元素时，不仅要区分元素类型，还要求是第一个子元素。
        :first-of-type在选择父元素下的子元素时，只需要区分元素类型，不要求是第一个子元素。
-->
</body>
</html>

UI伪类选择器

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
</head>
<body>
<!--
14.4 UI伪类选择器
    UI，全称“User Interface”，也就是用户界面。

    ▶ :focus
    ▶ ::selection   （注意：这个是两个冒号）
    ▶ :checked
    ▶ :enabled和:disabled
    ▶ :read-write和:read-only
    
    ▶ :root            html元素
    ▶ :empty           空元素
    ▶ :target          "#"id锚点跳转
    ▶ :not(selector)   不为selector的元素
------------------------------------------------------------
:focus
        ▶ 表单元素（按钮、单选框、复选框、文本框、下拉列表）
        ▶ 超链接
        
        例如
            input:focus { outline:1px solid red; }
            outline属性用于定义文本框的外轮廓线样式

------------------------------------------------------------
::selection
        在CSS3中，我们可以使用::selection选择器来定义页面中被选中文本的样式。
        注意，::selection选择器使用的是双冒号，而不是单冒号。实际上，单冒号往往都是伪类，而双冒号往往都是伪元素。
        
        例如
            p::selection { color:white; background-color:red; }
            文字选中时（字体白色，背景红色）

------------------------------------------------------------
:checked
        例如
            input:checked { background-color: red; }
            单选框radio/复选框checkbox，被选中时（背景红色）
            
------------------------------------------------------------
:enabled和:disabled

        例如
            input:enabled { outline:1px solid red; }
            input:disabled { background-color:blue; }
            启用（外轮廓线红色），禁用（背景蓝色）

------------------------------------------------------------
:read-write和:read-only
        例如
            input:read-write { outline:1px solid red; }
            input:read-only { background-color:blue; }
            <form method="post">
                <p><label for="txt1">读写:</label><input id="txt1" type="text"/></p>
                <p><label for="txt2">只读:</label><input id="txt2" type="text" readonly/></p>
            </form>
            读写（外轮廓线红色），只读（背景蓝色）
            
------------------------------------------------------------
:root
        例如（二者等同）
            :root{background-color:gray;}
            html{background-color:gray;}
        
            如果想要设置整个页面的背景色，应该针对html元素来设置，而不是body元素。
------------------------------------------------------------
:empty
        选择一个“不包含任何子元素和内容”的元素，也就是选择一个空元素。
        
        例如
            p {
                display: inline-block;
                float: left;
                width: 20px;
                height: 20px;
                background-color: gray;
            }
            p:empty { background-color: red; }
            <p>1</p>
            <p></p>
            <p>3</p>
            第二个p标签，背景为红色。
            
------------------------------------------------------------
:target
            :target h3 { color:red; }
            <div>
                <a href="#music">推荐音乐</a><br />
                <a href="#movie">推荐电影</a><br />
            </div>
            <div id="music">
                <h3>推荐音乐</h3>
                <ul>
                    <li>林俊杰-被风吹过的夏天</li>
                    <li>曲婉婷-我的歌声里</li>
                    <li>许嵩-灰色头像</li>
                </ul>
            </div>
            <div id="movie">
                <h3>推荐电影</h3>
                <ul>
                    <li>蜘蛛侠系列</li>
                    <li>钢铁侠系列</li>
                    <li>复仇者联盟</li>
                </ul>
            </div>
            点击哪个超链接，对应跳转的 h3字体变红色。
            
------------------------------------------------------------
:not()
            在CSS3中，我们可以使用:not()选择器来选取某一个元素之外的所有元素。
            
            例如
                ul li:not(.first) { color:red; }
                <ul>
                    <li>绿叶学习网</li>
                    <li class="first">绿叶学习网</li>
                    <li>绿叶学习网</li>
                    <li>绿叶学习网</li>
                </ul>
                除了第二个li，其他都字体变红。
------------------------------------------------------------
-->

</body>
</html>

文本样式

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            font-size: 40px;
            text-shadow: 4px 4px 2px gray;
        }

        .case2 {
            display: inline-block;
            padding: 16px;
            font-size: 32px;
            font-weight: bold;
            background-color: #CCC;
            color: #ddd;
            /*向左阴影, 向上阴影, 向右阴影, 向下阴影*/
            text-shadow: -1px 0 0 #333, 0 -1px 0 #333, 1px 0 0 #333, 0 1px 0 #333;
        }

        .case3 {
            font-size: 40px;
            text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray;
        }

        .case4 div {
            font-size: 30px;
            font-weight: bold;
        }

        .case4 div:last-child {
            text-stroke: 1px red;
            /*兼容Chrome浏览器*/
            -webkit-text-stroke: 1px red;
        }

        .case5 {
            font-family: Verdana;
            font-size: 50px;
            font-weight: bold;
            color: transparent; /*设置文字颜色为透明*/
            text-stroke: 2px red;
            -webkit-text-stroke: 2px red;
        }

        .case6 {
            width: 200px;
            height: 100px;
            border: 1px solid silver;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .case7 div {
            width: 200px;
            height: 120px;
            border: 1px solid gray;
        }

        .case7 .word-wrap {
            word-wrap: break-word;/*单词不可中断换行*/
        }

        .case7 .word-break {
            word-break: break-all;/*单词可以中断换行*/
        }
    </style>
</head>
<body>
<!--
15.1 CSS3文本样式属性
    text-shadow	    文本阴影
    text-stroke	    文本描边
    text-overflow	文本溢出
    word-wrap	    强制换行
    @font-face	    嵌入字体

--------------------------------------------------------------------------------------------
文本阴影：text-shadow
    text-shadow:x-offset y-offset blur color;
            x-offset  “水平阴影”，表示阴影的水平偏移距离，单位可以是px、em和百分比等。
                      由于CSS3采用的是W3C坐标系，因此如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移。
            y-offset “垂直阴影”，表示阴影的垂直偏移距离，单位可以是px、em和百分比等。
                     由于CSS3采用的是W3C坐标系，因此如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移。
            blur     “模糊距离”，表示阴影的模糊程度，单位可以是px、em和百分比等。blur值越大，阴影越模糊；
                     blur值越小，阴影越清晰。此外，blur不能为负值。如果不需要阴影模糊效果，可以把blur值设置为0。
            color是“阴影颜色”，表示阴影的颜色。

    text-shadow:0 0 4px red, 0 -5px 4px green, 2px -10px 6px blue;
            当text-shadow属性是一个值列表时，阴影效果会按从左到右的顺序应用到文本上，因此可能会出现相互覆盖的效果。
            但是text-shadow属性永远不会覆盖文本本身，阴影效果也不会改变文本的大小。
        
--------------------------------------------------------------------------------------------
文本描边：text-stroke
    text-stroke:width color;
    
    是一个复合属性，它是由text-stroke-width和text-stroke-color两个子属性组成的。
        ▶ text-stroke-width：定义边框的宽度。
        ▶ text-stroke-color：定义边框的颜色。
    
    使用text-stroke配合color:transparent;，我们还可以实现镂空文字。

--------------------------------------------------------------------------------------------
文本溢出：text-overflow
    text-overflow:取值;
        ellipsis	当文本溢出时，显示省略号，并且隐藏多余的文字
        clip	    当文本溢出时，不显示省略号，而是将溢出的文字裁切掉
    
    实际上，单独使用text-overflow属性是无法得到省略号效果的。
    要想实现文本溢出时就显示省略号效果，我们直接使用下面三个固定搭配就可以了。
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        
--------------------------------------------------------------------------------------------
强制换行：word-wrap、word-break
    word-wrap:取值;
        normal	    自动换行（默认值）
        break-word	强制换行
    
    word-break:取值;
        normal	    自动换行（默认值）
        break-all	允许在单词内换行
        keep-all	只能在半角空格或连字符处换行
    
    常用
        word-wrap: break-word;/*单词不可中断换行*/
        word-break: break-all;/*单词可以中断换行*/
-->
<hr>

<h4>text-shadow 一般文本阴影效果</h4>
<div class="case1">绿叶学习网</div>
<hr>

<h4>text-shadow 凹凸效果</h4>
<div class="case2">绿叶学习网</div>
<hr>

<h4>text-shadow 多个阴影</h4>
<div class="case3">绿叶学习网</div>
<hr>

<h4>text-stroke 实现文本描边</h4>
<div class="case4">
    <div>文本未被描边</div>
    <div>文本已被描边</div>
</div>
<hr>

<h4>text-stroke 实现镂空文字</h4>
<div class="case5">绿叶学习网</div>
<hr>

<h4>text-overflow</h4>
<div class="case6">
    绿叶学习网成立于2015年4月1日，是一个最富有活力的Web技术学习网站。在这里，我们只提供互联网最好的Web技术教程和最佳的学习体验。每一个教程、每一篇文章、甚至每一个知识点，都体现绿叶精品的态度。没有最好，但是我们可以做到更好！
</div>
<hr>

<h4>word-wrap:break-word; 与 word-break:break-all;</h4>
<div class="case7">
    <div>
        Welcome, everyone! Please remember our homepage website is: http://www.lvyestudy.com/index.html
    </div>
    <div class=" word-wrap">
        Welcome, everyone! Please remember our homepage website is: http://www.lvyestudy.com/index.html
    </div>
    <div class=" word-break">
        Welcome, everyone! Please remember our homepage website is: http://www.lvyestudy.com/index.html
    </div>
</div>
<hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

opacity rgba

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            display: inline-block;
            padding: 5px 10px;
            font-family: 微软雅黑;
            color: white;
            background-color: hotpink;
            cursor: pointer;
            opacity: 0.6;
        }

        .case1:hover {
            opacity: 1.0;
        }

        /*-----------------------------------------------*/
        .case2 {
            display: inline-block;
            list-style-type: none;
            width: 200px;
        }

        .case2 li {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .case2 li:first-child {background-color: rgba(255, 0, 255, 1.0);}
        .case2 li:nth-child(2) {background-color: rgba(255, 0, 255, 0.6);}
        .case2 li:last-child {background-color: rgba(255, 0, 255, 0.3);}
        
        /*-----------------------------------------------*/
        .case3
        {
            display:inline-block;
            list-style-type:none;
            width:200px;
        }
        .case3 li
        {
            height:30px;
            line-height:30px;
            font-size:20px;
            font-weight:bold;
            text-align:center;
            background-color:lightskyblue;
        }
        .case3 li:first-child {color:rgba(255, 0, 0, 1.0);}
        .case3 li:nth-child(2) {color:rgba(255, 0, 0, 0.6);}
        .case3 li:last-child {color:rgba(255, 0, 0, 0.3);}
        /*----------------------------------------------*/
        .case4
        {
            display:inline-block;
            list-style-type:none;
            width:200px;
        }
        .case4 li
        {
            height:30px;
            line-height:30px;
            font-size:20px;
            font-weight:bold;
            text-align:center;
        }
        .case4 li:first-child {background-color:rgba(255, 0, 255, 0.6);}
        .case4 li:nth-child(2) {background-color:rgb(255, 0, 255);opacity:0.3;}
    </style>
</head>
<body>
<!--

--------------------------------------------------------------------------------------------
opacity:数值;
        定义元素的透明度。
        
        opacity属性取值是一个数值，取值范围为0.0~1.0。其中0.0表示完全透明，1.0表示完全不透明。
        
        注意，opacity属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。
        opacity属性在实际开发中用得也比较多，大多数时候都是配合:hover来定义鼠标指针移动到某个按钮或图片上时，改变透明度来呈现动态的效果。

--------------------------------------------------------------------------------------------
rgba(R, G, B, A)
        RGB是一种色彩标准，由红（Red）、绿（Green）、蓝（Blue）3种颜色变化来得到各种颜色。
        而RGBA，增加了一个透明度通道Alpha。
        
        R、G、B这三个参数可以为整数，取值范围为0~255，也可以为百分比，取值范围为0%~100%。
        参数A为透明度，跟opacity属性是一样的，取值范围为0.0~1.0。
        
        下面两种有关RGBA颜色的写法都是正确的：
            rgba(255, 255, 0, 0.5)
            rgba(50%, 80%, 50%, 0.5)
        
        我们定义字体颜色color为RGBA颜色，因此RGBA颜色中的透明度也只是针对内部文本的颜色，而不会改变元素背景颜色的透明度。
        RGBA中的透明度只会针对当前设置的属性起作用。
        
        如果对某个元素使用opacity属性，则该元素中的所有子元素以及文本内容都会受到影响。
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
-->
<h4>opacity 透明度</h4>
<a class="case1">调试代码</a>
<hr>

<h4>background-color属性取值为RGBA</h4>
<ul class="case2">
    <li>绿叶学习网</li>
    <li>绿叶学习网</li>
    <li>绿叶学习网</li>
</ul>
<hr>

<h4>color属性取值为RGBA</h4>
<ul class="case3">
    <li>绿叶学习网</li>
    <li>绿叶学习网</li>
    <li>绿叶学习网</li>
</ul>
<hr>

<h4>RGBA颜色和opacity属性比较</h4>
<ul class="case4">
    <li>绿叶学习网</li>
    <li>绿叶学习网</li>
    <li>绿叶学习网</li>
</ul>
<hr>


</body>
</html>

css3渐变

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1, .case2, .case3 {
            width: 200px;
            height: 150px;
        }

        .case1 {

            background: linear-gradient(to right, blue, yellow);
        }

        .case2 {
            background: linear-gradient(to left, blue, yellow);
        }

        .case3 {
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
        }

        /*---------------------------------------------------*/
        .case4, .case5 {
            width: 200px;
            height: 150px;
            margin-bottom: 10px;
            line-height: 150px;
            text-align: center;
            color: white;
        }
        .case4 {background: -webkit-radial-gradient(center, orange, blue);}
        .case5 {background: -webkit-radial-gradient(top, orange, blue);}

        /*---------------------------------------------------*/
        .case6, .case7 {
            width: 200px;
            height: 150px;
            margin-bottom: 10px;
            line-height: 150px;
            text-align: center;
            color: white;
        }
        .case6 {background: -webkit-radial-gradient(ellipse, orange, blue);}
        .case7 {background: -webkit-radial-gradient(circle, orange, blue);}
        /*---------------------------------------------------*/
        .case8,.case9,.case10,.case11
        {
            width:120px;
            height:80px;
            line-height:80px;
            margin-top:10px;
            text-align:center;
            color:white;
        }
        .case8{background:-webkit-radial-gradient(circle closest-side, orange, blue);}
        .case9{background:-webkit-radial-gradient(circle closest-corner, orange, blue);}
        .case10{background:-webkit-radial-gradient(circle farthest-side, orange, blue);}
        .case11{background:-webkit-radial-gradient(circle farthest-corner, orange, blue);}
        /*---------------------------------------------------*/
        .case12 {
            width:200px;
            height:150px;
            background:-webkit-radial-gradient(red, orange, yellow, green, blue);
        }
        /*---------------------------------------------------*/
        .case13,.case14 {
            width:200px;
            height:150px;
            line-height:150px;
            margin-top:10px;
            text-align:center;
            color:white;
        }
        .case13{background:-webkit-radial-gradient(red,green,blue);}
        .case14{background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);}
        /*---------------------------------------------------*/
        .case15 {
            width:100px;
            height:36px;
            line-height:36px;
            text-align:center;
            border:1px solid #DADADA;
            border-radius:5px;
            font-family: "微软雅黑";
            cursor:pointer;
            background: linear-gradient(to bottom,#F8F8F8,#DCDCDC);
        }
        .case15:hover {
            color:white;
            background:linear-gradient(to bottom,#FFC559,#FFAF19);
        }
        /*---------------------------------------------------*/
        .case16 {
            width:160px;
            height:100px;
            line-height: 200px;
            text-align: center;
            border-radius:80px/50px;/*表示画一个椭圆，其中水平半径为80px，垂直半径为50px。*/
            color:white;
            background:-webkit-radial-gradient(top left,yellow,orangered);
        }
    </style>
</head>
<body>
<!--
在CSS3中共有两种渐变：一种是线性渐变，另一种是径向渐变。
--------------------------------------------------------------------------------------------
16.4.1 线性渐变
        线性渐变，指的是在一条直线上进行的渐变。我们见到的大多数渐变效果都是线性渐变。
        
        background:linear-gradient(方向, 开始颜色, 结束颜色)
        
        线性渐变的“方向”取值有两种:一种是使用角度（单位为deg），另一种是使用关键字
                属性值	        对应角度	说明
                to top	        0deg	    从下到上
                to bottom	    180deg	    从上到下（默认值）
                to left	        270deg	    从右到左
                to right	    90deg	    从左到右
                to top left	    无	        从右下角到左上角（斜对角）
                to top right	无	        从左下角到右上角（斜对角）
        
        线性渐变也可以接受一个“值列表”，用于同时定义多种颜色的线性渐变，颜色值之间用英文逗号隔开即可。
--------------------------------------------------------------------------------------------
16.4.2 径向渐变
        径向渐变，指的是颜色从内到外进行的圆形渐变（从中间往外拉，像圆一样）。
        径向渐变是圆形渐变或椭圆渐变，颜色不再沿着一条直线渐变，而是从一个起点向所有方向渐变。
        
        background:radial-gradient(position, shape size, start-color, stop-color)
        
        position 定义圆心位置
        shape定义形状，size定义大小。（可选参数。如果省略，则表示采用默认值）
        start-color开始颜色，stop-color结束颜色。（必选参数，可以有多个颜色值）
        
        1．圆心位置position
            参数position用于定义径向渐变的“圆心位置”，取值跟background-position属性取值一样。
            常用取值有两种：一种是“长度值”（如10px），另一种是“关键字”（如top）
            关键字
                    center	        中部（默认值）
                    top	            顶部
                    bottom	        底部
                    left	        左部
                    right	        右部
                    top center	    靠上居中
                    top left	    左上
                    top right	    右上
                    left center	    靠左居中
                    center center	正中
                    right center	靠右居中
                    bottom left	    左下
                    bottom center	靠下居中
                    bottom right	右下
参数shape取值
    ellipse	椭圆形（默认值）
    circle	圆形
参数size取值
    closest-side	指定径向渐变的半径长度为从圆心到离圆心最近的边
    closest-corner	指定径向渐变的半径长度为从圆心到离圆心最近的角
    farthest-side	指定径向渐变的半径长度为从圆心到离圆心最远的边
    farthest-corner	指定径向渐变的半径长度为从圆心到离圆心最远的角
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
-->
<h4>background: linear-gradient(to right, blue, yellow);</h4>
<div class="case1"></div>

<h4>background: linear-gradient(to left, blue, yellow);</h4>
<div class="case2"></div>
<hr>

<h4>多种颜色渐变 background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);</h4>
<div class="case3"></div>
<hr>

<h4>background: -webkit-radial-gradient(center, orange, blue);</h4>
<div class="case4">center</div>

<h4>background: -webkit-radial-gradient(top, orange, blue);</h4>
<div class="case5">top</div>
<hr>

<h4>background: -webkit-radial-gradient(ellipse, orange, blue);</h4>
<h4>background: -webkit-radial-gradient(circle, orange, blue);</h4>
<div class="case6">ellipse</div>
<div class="case7">circle</div>
<hr>

<h4>background:-webkit-radial-gradient(circle closest-side, orange, blue);</h4>
<h4>background:-webkit-radial-gradient(circle closest-corner, orange, blue);</h4>
<h4>background:-webkit-radial-gradient(circle farthest-side, orange, blue);</h4>
<h4>background:-webkit-radial-gradient(circle farthest-corner, orange, blue);</h4>
<div class="case8"> closest-side</div>
<div class="case9"> closest-corner</div>
<div class="case10">farthest-side</div>
<div class="case11">farthest-corner</div>
<hr>

<h4>background:-webkit-radial-gradient(red, orange, yellow, green, blue);</h4>
<div class="case12"></div>
<hr>

<h4>background:-webkit-radial-gradient(red,green,blue);</h4>
<h4>background:-webkit-radial-gradient(red 5%,green 30%,blue 60%);</h4>
<div class="case13">颜色均匀分布</div>
<div class="case14">颜色不均匀分布</div>
<hr>

<h4>渐变按钮</h4>
<div class="case15">渐变按钮</div>
<hr>

<h4>鸡蛋圆</h4>
<div class="case16"></div>
<hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

边框样式

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .case1 {
            width: 200px;
            height: 150px;
            border: 1px solid gray;
            border-radius: 10px; /*指的是元素4个角的圆角半径都是10px。*/
        }

        .case2 {
            width: 50px;
            line-height: 50px;
            border-radius: 80% 90% 100% 20%;
            background-color: #E61588;
            font-size: 30px;
            text-align: center;
            color: White;
        }

        .case3 {
            width: 100px;
            height: 50px;
            border: 1px solid red;
            border-radius: 50px 50px 0 0;
            background-color: #FCE9B8;
        }

        .case4 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 50px;/*二者等同*/
            /*border-radius: 50%;*/
            background-color: #FCE9B8;
        }

        .case5
        {
            width:160px;
            height:100px;
            border:1px solid gray;
            border-radius:80px/50px;
        }
        /*--------------------------------------------*/
        .case6 {
            width:200px;
            height:100px;
            border:1px solid silver;
            /*表示阴影的水平偏移距离为5px，垂直偏移距离为5px，模糊半径为8px，阴影大小为0px，阴影颜色为red。*/
            box-shadow:5px 5px 8px 0px red;
        }
        .case7 {
            width:200px;
            height:100px;
            border:1px solid silver;
            box-shadow:-5px -5px 8px 0px red;
        }
    </style>
</head>
<body>
<!--
1 边框样式简介
2 圆角效果：border-radius
3 边框阴影：box-shadow
4 多色边框：border-colors 忽略
5 边框背景：border-image  忽略
6 实战题：3D卡通头像

------------------------------------------------------------------------------------------
圆角效果：border-radius
    border-radius:取值;
            取值是一个长度值，单位可以是px、em和百分比等。
        
            border-radius:10px;表示4个角的圆角半径都是10px
            border-radius:10px 20px;表示左上角和右下角的圆角半径是10px，右上角和左下角的圆角半径是20px
            border-radius:10px 20px 30px;表示左上角的圆角半径是10px，左下角和右上角的圆角半径是20px，右下角的圆角半径是30px
            border-radius:10px 20px 30px 40px;表示左上角、右上角、右下角和左下角的圆角半径依次是10px、20px、30px、40px
        
    border-radius:x/y;
            x表示圆角的水平半径，y表示圆角的垂直半径。
            
            “border-radius:20px/40px;”表示圆角的水平半径为20px，垂直半径为40px
            
    ▶ border-top-right-radius：右上角。
    ▶ border-bottom-right-radius：右下角。
    ▶ border-bottom-left-radius：左下角。
    ▶ border-top-left-radius：左上角。
------------------------------------------------------------------------------------------
边框阴影：box-shadow
    box-shadow:x-offset y-offset blur spread color style;
    
        ▶ x-offset：定义水平阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此x-offset取值为正时，向右偏移；取值为负时，向左偏移。
        ▶ y-offset：定义垂直阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此y-offset取值为正时，向下偏移；取值为负时，向上偏移。
        ▶ blur：定义阴影的模糊半径，只能为正值。
        ▶ spread：定义阴影的大小。
        ▶ color：定义阴影的颜色。
        ▶ style：定义是外阴影还是内阴影。
        
        box-shadow:5px 5px 8px 0px red;
        表示阴影的水平偏移距离为5px，垂直偏移距离为5px，模糊半径为8px，阴影大小为0px，阴影颜色为red。
------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------
-->
<h3>圆角效果：border-radius</h3>
<div class="case1"></div>
<hr>

<div class="case2">6</div>
<hr>

<div class="case3"></div>
<hr>

<div class="case4"></div>
<hr>

<div class="case5"></div>
<hr>

<h3>边框阴影：box-shadow</h3>
<div class="case6"></div>
<hr>

<div class="case7"></div>
<hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

3D卡通头像

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        /*整体布局方式*/
        body {
            background: #68b8ed;
        }

        .eye-brow, .eye, .pupil, .shine, .nose, .mouth {
            display: inline-block;
        }

        .mr-border-radius, .eye, .pupil, .shine, .nose, .mouth {
            position: relative;
        }

        .left-eye, .left-blush {
            float: left;
        }

        .right-eye, .right-blush {
            float: right;
        }

        /*外层div样式*/
        .mr-border-radius {
            margin: auto;
            margin-top: 10%;
            width: 550px;
            height: 430px;
            background-color: #FFB010;
            background-image: radial-gradient(circle, #FFD47F, #FFB010);
            border: solid #CC8800;
            border-radius: 40px;
            border-width: 10px 20px 0 0;
            box-shadow: 20px 10px 30px 0 rgba(0, 0, 0, .6);
            transition: all .5s;
        }

        /*眉毛*/
        .eye-brow {
            position: absolute;
            top: 15%;
            width: 135px;
            height: 90px;
            border-radius: 100%;
            background: transparent;
            box-shadow: 0 -15px 0 0 #995E00;
            transition: top .5s;
        }

        .left-eye-brow {
            left: 10%;
            transform: rotate(-15deg);
        }

        .right-eye-brow {
            right: 10%;
            transform: rotate(15deg);
        }

        /*眼睛*/
        .eye {
            width: 130px;
            height: 130px;
            margin-top: 20%;
            border-radius: 100%;
            background: white;
        }

        /*脸红*/
        .blush {
            width: 65px;
            height: 55px;
            margin-top: 43%;
            border-radius: 90%;
            background: #FFA249;
        }

        /*瞳孔*/
        .pupil {
            height: 80px;
            width: 80px;
            margin-top: 25%;
            margin-left: 10%;
            background: black;
            border-radius: 100%;
            transition: margin-left .5s;
        }

        .shine {
            height: 15px;
            width: 15px;
            margin-top: 15%;
            margin-left: 25%;
            border-radius: 100%;
            background: white;
            transition: all .5s;
        }

        .shine:after {
            content: "";
            position: relative;
            display: inline-block;
            top: 65%;
            left: -50%;
            height: 8px;
            width: 8px;
            border-radius: 100%;
            background: white;
        }

        .eye.left-eye {
            margin-left: 15%;
        }

        .blush.left-blush {
            margin-left: -15%;
        }

        .eye.right-eye {
            margin-right: 15%;
        }

        .blush.right-blush {
            margin-right: -15%;
        }

        /*鼻子*/
        .nose {
            left: 8%;
            top: 55%;
            width: 40px;
            height: 35px;
            border-radius: 100%;
            box-shadow: 0 10px 0 0 #E59200;
        }

        /*嘴巴*/
        .mouth {
            left: 2.5%;
            top: 50%;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            background: transparent;
            box-shadow: 0 15px 0 0;
            transition: box-shadow .5s;
        }

        /*鼠标指针移到头像上时*/
        .mr-border-radius:hover {
            border-width: 10px 0 0 20px;
            box-shadow: -20px 10px 30px 0 rgba(0, 0, 0, .6);
        }

        .mr-border-radius:hover .pupil {
            margin-left: 27%;
        }

        .mr-border-radius:hover .shine {
            margin-left: 60%;
        }

        .mr-border-radius:hover .mouth {
            box-shadow: 0 35px 0 0;
        }

        .mr-border-radius:hover .eye-brow {
            top: 10%;
        }
    </style>
</head>
<body>
<div class="mr-border-radius">
    <span class="eye-brow left-eye-brow"></span>
    <span class="eye left-eye">
      <span class="pupil">
        <span class="shine"></span>
      </span>
    </span>
    <span class="eye-brow right-eye-brow"></span>
    <span class="eye right-eye">
      <span class="pupil">
        <span class="shine"></span>
      </span>
    </span>
    <span class="blush left-blush"></span>
    <span class="blush right-blush"></span>
    <span class="nose"></span>
    <span class="mouth"></span>
</div>
</body>
</html>

背景样式

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            width: 160px;
            height: 100px;
            border: 1px solid red;
            margin-top: 10px;
            background-image: url(img/仓鼠.jpg);
            background-repeat: no-repeat;
        }

        #div2 {
            background-size: cover;
        }

        #div3 {
            background-size: contain;
        }
    </style>
</head>
<body>
<!--
背景大小：background-size
    在CSS2.1中，我们是不能使用CSS来控制背景图片大小的，背景图片的大小都是由图片实际大小决定的。
    在CSS3中，我们可以使用background-size属性来定义背景图片的大小，这样可以使得同一张背景图片可以在不同的场景重复使用。
    
    background-size:取值;
        cover	即“覆盖”，表示将背景图片等比缩放来填满整个元素
        contain	即“容纳”，表示将背景图片等比缩放至某一边紧贴元素边沿为止

-------------------------------------------------------------------------
背景位置：background-origin
    在CSS3中，我们可以使用background-origin属性来定义背景图片是从什么地方开始平铺的，也就是定义背景图片的位置。
    
    background-origin:取值;
        border-box	从边框开始平铺
        padding-box	从内边距开始平铺（默认值）
        content-box	从内容区开始平铺
    
-------------------------------------------------------------------------
背景剪切：background-clip
    在CSS3中，我们可以使用background-clip属性来剪切背景图片。
    
    background-clip:取值;
        border-box	从边框开始剪切（默认值）
        padding-box	从内边距开始剪切
        content-box	从内容区开始剪切
-->
<h4>默认</h4>
<div id="div1"></div>
<hr>

<h4>background-size: cover;</h4>
<div id="div2"></div>
<hr>

<h4>background-size: contain;（推荐）</h4>
<div id="div3"></div>
<hr>

</body>
</html>

CSS3变形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
<!--
1 CSS3变形简介
2 平移：translate()
3 缩放：scale()
4 倾斜：skew()
5 旋转：rotate()
6 中心原点：transform-origin
7 实战题：个性照片墙
-->
</body>
</html>

CSS3过渡

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
<!--
1  CSS过渡简介
2  过渡属性：transition-property
3  过渡时间：transition-duration
4  过渡方式：transition-timing-function
5  延迟时间：transition-delay
6  深入了解transition属性
7  实战题：鼠标移上去显示内容
8  实战题：图片文字介绍滑动效果
9  实战题：白光闪过效果
10 实战题：脉动效果
11 实战题：手风琴效果

-->
</body>
</html>

CSS3动画

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
<!--
1  CSS3动画简介
2  @keyframes
3  动画名称：animation-name
4  持续时间：animation-duration
5  动画方式：animation-timing-function
6  延迟时间：animation-delay
7  播放次数：animation-iteration-count
8  播放方向：animation-direction
9  播放状态：animation-play-state
10 实战题：脉冲动画
11 实战题：loading效果

-->
</body>
</html>

多列布局

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
<!--
22.1 多列布局
        在CSS3之前，如果想要设计类似报纸那样的多列布局，有两种方式可以实现：
            一种是“浮动布局”（比较灵活，但不容易控制），
            另一种是“定位布局”（可以精准定位，但是却不够灵活）。
        
        为了解决多列布局的难题，CSS3新增了一种布局方式——多列布局。
        使用多列布局，可以轻松实现类似报纸那样的布局，而且这种布局的自适应能力也非常好。
        此外，多列布局的应用非常广泛，像各大电商网站、素材网站中常见的“瀑布流效果”。
        如 百度/谷歌图片搜索，就用到了多列布局。

        column-count	列数
        column-width	每一列的宽度
        column-gap	    两列之间的距离
        column-rule	    两列之间的边框样式
        column-span	    定义跨列样式
-->
</body>
</html>

列数 column-count

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            width: 400px;
            padding: 10px;
            border: 1px solid silver;
            column-count: 3;
            /*column-count: 4;*/
            /*column-count: 5;*/
            /*column-count: auto;*/
        }

        h1 {
            /*字体垂直居中*/
            height: 60px;
            line-height: 60px;

            text-align: center;
            background-color: silver;
        }

        p {
            font-family: "微软雅黑";
            font-size: 14px;
            /*text-indent: 28px;*/
            text-indent: 2em; /*二者等同*/
        }
    </style>
</head>
<body>
<!--
22.2 列数：column-count
        column-count: 取值;
            auto	列数由column-width属性决定（默认值）
            n	    自动划分为n列（n为正整数）
            
    
        2023-06-28 15:18:05 《匆匆》  他的前端教程，总是穿插一些文学，让现在的我陷入思考与回忆。
-->
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸地回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>

</body>
</html>

列宽 column-width

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            width: 400px;
            padding: 10px;
            border: 1px solid silver;
            /*column-width: 150px;*/
            column-width: 100px;
            /*column-width: auto;*/
        }

        h1 {
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: silver;
        }

        p {
            font-family: 微软雅黑;
            font-size: 14px;
            text-indent: 28px;
        }
    </style>
</head>
<body>
<!--
22.3 列宽：column-width

        column-width: 取值;
        
        auto	列数由column-count属性决定（默认值）
        长度值	单位可以为px、em和百分比等
-->
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时 候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸地回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>
</body>
</html>

间距 column-gap

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            width: 400px;
            padding: 10px;
            border: 1px solid silver;
            column-count: 2;
            column-gap: 20px;
            /*column-gap: 40px;*/
        }

        h1 {
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: silver;
        }

        p {
            font-family: 微软雅黑;
            font-size: 14px;
            text-indent: 28px;
            background-color: #F1F1F1;
        }
    </style>
</head>
<body>
<!--
22.4 间距：column-gap
        
        column-gap: 取值;
            normal	浏览器默认长度值
            长度值	单位可以为px、em和百分比等
-->
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸地回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>

</body>
</html>

边框 column-rule

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            width: 400px;
            padding: 10px;
            border: 1px solid silver;
            column-count: 2;
            column-gap: 20px;
            column-rule: 1px dashed red;
        }

        h1 {
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: silver;
        }

        p {
            font-family: 微软雅黑;
            font-size: 14px;
            text-indent: 28px;
            background-color: #F1F1F1;
        }
    </style>
</head>
<body>
<!--
22.5 边框：column-rule
        
        column-rule: width style color;
        
        column-rule属性跟border属性是非常相似的，它也是一个复合属性，由3个子属性组成。
        ▶ column-rule-width：定义边框的宽度。
        ▶ column-rule-style：定义边框的样式。
        ▶ column-rule-color：定义边框的颜色。
-->
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸地回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>

</body>
</html>

跨列 column-span

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            width: 400px;
            padding: 10px;
            border: 1px solid silver;
            column-count: 2;
            column-gap: 20px;
            column-rule: 1px dashed red;
        }

        h1 {
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: silver;
            column-span: all;/* 使得标题h1元素跨越所有的列 */
        }

        p {
            font-family: 微软雅黑;
            font-size: 14px;
            text-indent: 28px;
            background-color: #F1F1F1;
        }
    </style>
</head>
<body>
<!--
22.6 跨列：column-span

        column-span: 取值;
            none	不跨列
            all	    跨所有列（跟none相反）
-->
<h1>匆匆</h1>
<p>燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢——如今又到了哪里呢？</p>
<p>我不知道他们给了我多少日子，但我的手确乎是渐渐空虚了。在默默里算着，八千多日子已经从我手中溜去，像针尖上一滴水滴在大海里，我的日子滴在时间的流里，没有声音，也没有影子。我不禁头涔涔而泪潸潸了。</p>
<p>……</p>
<p>在逃去如飞的日子里，在千门万户的世界里的我能做些什么呢？只有徘徊罢了，只有匆匆罢了；在八千多日的匆匆里，除徘徊外，又剩些什么呢？过去的日子如轻烟，被微风吹散了，如薄雾，被初阳蒸融了；我留着些什么痕迹呢？我何曾留着像游丝样的痕迹呢？我赤裸裸来到这世界，转眼间也将赤裸裸地回去罢？但不能平的，为什么偏要白白走这一遭啊？</p>
<p>你聪明的，告诉我，我们的日子为什么一去不复返呢？</p>

</body>
</html>

实战题：瀑布流布局 html静态

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>瀑布流布局 html静态</title>
    <style type="text/css">
        .container {
            /*column-width: 160px;*/
            column-gap: 3px;
            
            column-count: 3;
            /*column-count: 5;*/
            /*column-count: 8;*/
            /*column-count: auto;*//* 等同于 column-count: 1;*/
            
        }

        .container div {
            /*width: 160px;*/
            margin: 4px 0;
        }

        /* 无用 */
        /*img {*/
        /*    width: auto;*/
        /*    height: auto;*/
        /*}*/
    </style>
    <script>
        // TODO 使用gif来实现
        // 04_jQuery/043_8.3_gif 显示隐藏 淡入淡出.html
        /*
                "1cokc3sajtw.gif", "005MZqZdgw1ezsjivqjhng30cs073e81.gif", "9-16041QF919.gif", "24.gif", "29.gif",
                "056bb67cade72f9e25.gif", "0065a7iMjw1fbx1o0pcdhg306j07n1kx.gif", "0065mxFoly1ff2o7vxg0ng30b4069e81.gif",
                "0065mxFoly1ffmxcm6m0wg30a307fe81.gif", "0065mxFoly1fkuli61c7ig30bc0844qr.gif",
                "0067Ob0cjw1ey314wdecdg309v05k7sb.gif", "680_1000.gif", "9378-gom-kogaru-tits.gif",
                "34365-1.gif", "36614-3.gif", "45079-1.gif", "179941.gif", "516892.gif", "16806761-1.gif", "21870857.gif", "26703071.gif",
                "62047472tw1ectrpobmjtg206o08wnpd.gif", "20210429143411_73240.gif", "big-tits_001-19.gif", "danai2695.gif", "DVAJ-137.7.gif",
                "f50d368de9eb6220a528a19c98b4c82d.gif", "Gifs-for-Tumblr-1664.gif", "qDmCUGD.gif", "tits-shaking-animated-gif.gif",
                "tumblr_n3yyzoUFK21tobld4o3_250.gif", "tumblr_n3yyzoUFK21tobld4o5_250.gif"
         */
    </script>
</head>
<body>
<div class="container">
    <div><img src="tmp/1cokc3sajtw.gif"/></div>
    <div><img src="tmp/005MZqZdgw1ezsjivqjhng30cs073e81.gif"/></div>
    <div><img src="tmp/9-16041QF919.gif"/></div>
    <div><img src="tmp/24.gif"/></div>
    <div><img src="tmp/29.gif"/></div>
    <div><img src="tmp/056bb67cade72f9e25.gif"/></div>
    <div><img src="tmp/0065a7iMjw1fbx1o0pcdhg306j07n1kx.gif"/></div>
    <div><img src="tmp/0065mxFoly1ff2o7vxg0ng30b4069e81.gif"/></div>
    <div><img src="tmp/0065mxFoly1ffmxcm6m0wg30a307fe81.gif"/></div>
    <div><img src="tmp/0065mxFoly1fkuli61c7ig30bc0844qr.gif"/></div>
    <div><img src="tmp/0067Ob0cjw1ey314wdecdg309v05k7sb.gif"/></div>
    <div><img src="tmp/680_1000.gif"/></div>
    <div><img src="tmp/9378-gom-kogaru-tits.gif"/></div>
    <div><img src="tmp/34365-1.gif"/></div>
    <div><img src="tmp/36614-3.gif"/></div>
    <div><img src="tmp/45079-1.gif"/></div>
    <div><img src="tmp/179941.gif"/></div>
    <div><img src="tmp/516892.gif"/></div>
    <div><img src="tmp/16806761-1.gif"/></div>
    <div><img src="tmp/21870857.gif"/></div>
    <div><img src="tmp/26703071.gif"/></div>
    <div><img src="tmp/62047472tw1ectrpobmjtg206o08wnpd.gif"/></div>
    <div><img src="tmp/20210429143411_73240.gif"/></div>
    <div><img src="tmp/big-tits_001-19.gif"/></div>
    <div><img src="tmp/danai2695.gif"/></div>
    <div><img src="tmp/DVAJ-137.7.gif"/></div>
    <div><img src="tmp/f50d368de9eb6220a528a19c98b4c82d.gif"/></div>
    <div><img src="tmp/Gifs-for-Tumblr-1664.gif"/></div>
    <div><img src="tmp/qDmCUGD.gif"/></div>
    <div><img src="tmp/tits-shaking-animated-gif.gif"/></div>
    <div><img src="tmp/tumblr_n3yyzoUFK21tobld4o3_250.gif"/></div>
    <div><img src="tmp/tumblr_n3yyzoUFK21tobld4o5_250.gif"/></div>
</div>
</body>
</html>

实战题：瀑布流布局 jQuery动态

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>瀑布流布局 jQuery动态</title>
    <style type="text/css">
        .container {
            /*column-width: 160px;*/
            column-gap: 3px;

            /*column-count: auto;*/
            column-count: 3;
        }

        .container div {
            /*width: 160px;*/
            margin: 4px 0;

            /*width: auto;*/
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // TODO 使用gif来实现
        // 04_jQuery/043_8.3_gif 显示隐藏 淡入淡出.html
        $(function () {
            // 1. 拼接图片
            var arr = [
                "1cokc3sajtw.gif", "005MZqZdgw1ezsjivqjhng30cs073e81.gif", "9-16041QF919.gif", "24.gif", "29.gif",
                "056bb67cade72f9e25.gif", "0065a7iMjw1fbx1o0pcdhg306j07n1kx.gif", "0065mxFoly1ff2o7vxg0ng30b4069e81.gif",
                "0065mxFoly1ffmxcm6m0wg30a307fe81.gif", "0065mxFoly1fkuli61c7ig30bc0844qr.gif",
                "0067Ob0cjw1ey314wdecdg309v05k7sb.gif", "680_1000.gif", "9378-gom-kogaru-tits.gif",
                "34365-1.gif", "36614-3.gif", "45079-1.gif", "179941.gif", "516892.gif", "16806761-1.gif", "21870857.gif", "26703071.gif",
                "62047472tw1ectrpobmjtg206o08wnpd.gif", "20210429143411_73240.gif", "big-tits_001-19.gif", "danai2695.gif", "DVAJ-137.7.gif",
                "f50d368de9eb6220a528a19c98b4c82d.gif", "Gifs-for-Tumblr-1664.gif", "qDmCUGD.gif", "tits-shaking-animated-gif.gif",
                "tumblr_n3yyzoUFK21tobld4o3_250.gif", "tumblr_n3yyzoUFK21tobld4o5_250.gif"
            ];
            arr.forEach(function (e) {
                // $().append("字符串")       把一个新元素插入到父元素内部的子元素的“末尾”
                // $("#ul1").append("<li>jQuery</li>");

                $(".container").append('<div><img/></div>');
                $("img:last").attr("src", "tmp/" + e);
            })
        })
    </script>
</head>
<body>
<div class="container">
    <!--<div><img src="img/column/pic1.jpg"/></div>-->
    <!--<div><img src="img/column/pic2.jpg"/></div>-->
    <!--<div><img src="img/column/pic3.jpg"/></div>-->
</div>
</body>
</html>

滤镜效果

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        img {
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
<!--
filter: 取值;
        brightness()	亮度
        grayscale()	    灰度
        sepia()	        复古
        invert()	    反色
        hue-rotate()	旋转（色相）
        drop-shadow()	阴影
        opacity()	    透明度
        blur()	        模糊度
        contrast()	    对比度
        saturate()	    饱和度
--------------------------------------------------------
亮度 filter: brightness(百分比);
        0%~100%表示减弱图片的亮度，100%以上表示增强图片的亮度。
        filter: brightness(0%);   完全黑色
        filter: brightness(100%); 不变
        filter: brightness(200%); 亮度x2

灰度 filter: grayscale(百分比);
        filter: grayscale(0%);     不做任何修改
        filter: grayscale(100%);   完全灰度（即黑白图片）

复古 filter: sepia(百分比);
        取值范围为0%~100%。其中，0%表示没有转换，100%表示复古效果

反色 filter: invert(百分比);
        取值范围为0%~100%。其中，0%表示没有转换，100%表示反转所有颜色。

色相旋转 filter: hue-rotate(度数);
        单位为deg（即degree的缩写）。
        filter: hue-rotate(0deg);     不旋转
        filter: hue-rotate(360deg);   旋转360°，也就是相当于一个循环

阴影 filter: drop-shadow(x-offset y-offset blur color);
        ▶ x-offset：定义水平阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此x-offset取值为正时，向右偏移；取值为负时，向左偏移。
        ▶ y-offset：定义垂直阴影的偏移距离，可以使用负值。由于CSS3采用的是W3C坐标系，因此y-offset取值为正时，向下偏移；取值为负时，向上偏移。
        ▶ blur：定义阴影的模糊半径，只能为正值。
        ▶ color：定义阴影的颜色。

透明度 filter: opacity(百分比);
        取值范围为0%~100%。其中，0%表示完全透明，100%表示完全不透明。

模糊度 filter: blur(像素);
        值越多越模糊

对比度 filter: contrast(百分比);
        0%~100%表示减弱对比度，100%以上表示增强对比度。
        filter: contrast(0%);   灰度图片
        filter: contrast(100%); 不变
        filter: contrast(200%); 对比度x2

饱和度 filter: saturate(百分比);
        0%~100%表示减弱饱和度，100%以上表示增强饱和度。

多种滤镜 filter: 值列表;
        在值列表中，两个值之间需要用空格隔开。
        例如 filter:brightness(120%) contrast(200%) blur(1px);
-->
<hr>

<h3>《亮度》 原始 50% 100% 200%（100%原始亮度，200%两倍亮度）</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: brightness(50%)" src="img/仓鼠.jpg" alt="">
<img style="filter: brightness(100%)" src="img/仓鼠.jpg" alt="">
<img style="filter: brightness(200%)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《灰度》 原始 50% 100%（100%黑白照片）</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: grayscale(50%)" src="img/仓鼠.jpg" alt="">
<img style="filter: grayscale(100%)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《复古》 原始 50% 100%</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: sepia(50%)" src="img/仓鼠.jpg" alt="">
<img style="filter: sepia(100%)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《反色》 原始 30% 50% 70% 100%</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: invert(30%)" src="img/仓鼠.jpg" alt="">
<img style="filter: invert(50%)" src="img/仓鼠.jpg" alt="">
<img style="filter: invert(70%)" src="img/仓鼠.jpg" alt="">
<img style="filter: invert(100%)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《色相旋转》 原始 30deg 70deg 180deg 360deg</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: hue-rotate(30deg)" src="img/仓鼠.jpg" alt="">
<img style="filter: hue-rotate(70deg)" src="img/仓鼠.jpg" alt="">
<img style="filter: hue-rotate(180deg)" src="img/仓鼠.jpg" alt="">
<img style="filter: hue-rotate(360deg)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《阴影》 原始 (5px 5px 10px red)</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: drop-shadow(5px 5px 10px red)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《透明度》 原始 0% 30% 50% 100%（0%隐藏并占据位置；100%原始）</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: opacity(0%)" src="img/仓鼠.jpg" alt="">
<img style="filter: opacity(30%)" src="img/仓鼠.jpg" alt="">
<img style="filter: opacity(50%)" src="img/仓鼠.jpg" alt="">
<img style="filter: opacity(100%)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《模糊度》 原始 0px 10px 30px 50px</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: blur(0px)" src="img/仓鼠.jpg" alt="">
<img style="filter: blur(10px)" src="img/仓鼠.jpg" alt="">
<img style="filter: blur(30px)" src="img/仓鼠.jpg" alt="">
<img style="filter: blur(40px)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《对比度》 原始 0% 50% 100% 150% 200%</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: contrast(0%)" src="img/仓鼠.jpg" alt="">
<img style="filter: contrast(50%)" src="img/仓鼠.jpg" alt="">
<img style="filter: contrast(100%)" src="img/仓鼠.jpg" alt="">
<img style="filter: contrast(150%)" src="img/仓鼠.jpg" alt="">
<img style="filter: contrast(200%)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《饱和度》 原始 0% 50% 100% 150% 200%</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: saturate(0%)" src="img/仓鼠.jpg" alt="">
<img style="filter: saturate(50%)" src="img/仓鼠.jpg" alt="">
<img style="filter: saturate(100%)" src="img/仓鼠.jpg" alt="">
<img style="filter: saturate(150%)" src="img/仓鼠.jpg" alt="">
<img style="filter: saturate(200%)" src="img/仓鼠.jpg" alt="">
<hr>

<h3>《多种滤镜》 原始 (亮度120% 透明50%)</h3>
<img src="img/仓鼠.jpg" alt="">
<img style="filter: brightness(120%) opacity(50%)" src="img/仓鼠.jpg" alt="">
<hr>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

弹性盒子模型

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .case1 {
            display:flex;/*---------------*/
            width:200px;
            height:150px;
        }
        .case1 div{width:50px;}
        .case1 div:nth-child(1){background:red;}
        .case1 div:nth-child(2){background:blue;}
        .case1 div:nth-child(3){background:orange;}
        /*------------------------------------------*/
        .case2 {
            display:flex;/*---------------*/
            width:200px;
            height:150px;
        }
        .case2 div{width:100px;}
        .case2 div:nth-child(1){background:red;}
        .case2 div:nth-child(2){background:blue;}
        .case2 div:nth-child(3){background:orange;}
    </style>
</head>
<body>
<!--
2023-06-28 16:39:16 来啦，来啦！！！

24.1 弹性盒子模型简介
        为了解决传统布局的死板以及不足，CSS3新增了一种新型的弹性盒子模型。
        通过弹性盒子模型，我们可以轻松地创建自适应浏览器窗口的“流动布局”以及自适应字体大小的弹性布局，使得响应式布局的实现更加容易。    
        
        flex-grow	            定义子元素的放大比例
        flex-shrink	            定义子元素的缩小比例
        flex-basis	            定义子元素的宽度
   * 子 flex	                flex-grow、flex-shrink、flex-basis的复合属性
        flex-direction	        定义子元素的排列方向
        flex-wrap	            定义子元素是单行显示，还是多行显示
   * 父 flex-flow	            flex-direction、flex-wrap的复合属性
   * 子 order	                定义子元素的排列顺序
   * 父 justify-content	        定义子元素在“横轴”上的对齐方式
   * 父 align-items	            定义子元素在“纵轴”上的对齐方式

---------------------------------------------------------------------------

父元素 display:flex; 变为弹性盒子。

父元素 200px, 3个子元素 50px*3=150px    （不会超出）正常显示
父元素 200px, 3个子元素 100px*3=300px   （会超出）会显示每个元素 100px

用弹性盒子，父元素要定义 “display:flex;” 或 “display:inline-flex;”
-->
<h3>举例：子元素宽度之和 小于 父元素宽度</h3>
<div class="case1">
    <div></div>
    <div></div>
    <div></div>
</div>
<pre>
    定义了display:flex;的元素会变成一个弹性盒子。
    在这个例子中，case1 div元素就是一个弹性盒子。
    由于弹性盒子的宽度为200px，而所有子元素宽度之和为150px，此时子元素宽度之和小于父元素宽度。
    ===> 因此，所有子元素最终的宽度就是原来定义的宽度。
</pre>
<hr>

<h3>举例：子元素宽度之和 大于 父元素宽度</h3>
<div class="case2">
    <div></div>
    <div></div>
    <div></div>
</div>
<pre>
    在这个例子中，弹性盒子（父元素）的宽度为200px，而所有子元素宽度之和为300px，此时子元素宽度之和大于父元素宽度。
    因此，子元素会按比例来划分宽度。这就是弹性盒子的特点！
    
    此外记住一点：在使用弹性盒子模型之前，你必须为父元素定义“display:flex;”或“display:inline-flex;”，这样父元素才具有弹性盒子模型的特点。
</pre>
<hr>

</body>
</html>

放大比例 flex-grow

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .case1 {
            display: flex; /*---------------*/
            width: 200px;
            height: 150px;
        }

        .case1 div:nth-child(1) {
            background: red;
            flex-grow: 1; /* 1/4 * 200 = 80px */
        }

        .case1 div:nth-child(2) {
            background: blue;
            flex-grow: 2; /* 2/4 * 200 = 160px */
        }

        .case1 div:nth-child(3) {
            background: orange;
            flex-grow: 1; /* 1/4 * 200 = 80px */
        }
    </style>
</head>
<body>
<!--
24.2 放大比例：flex-grow
        在CSS3中，我们可以使用flex-grow属性来定义弹性盒子内部子元素的放大比例。
        也就是当所有子元素宽度之和小于父元素的宽度时，子元素如何分配父元素的剩余空间。
        
        flex-grow: 数值;
            flex-grow属性取值是一个数值，默认值为0。
            当取值为0时，表示不索取父元素的剩余空间；
            当取值大于0时，表示索取父元素的剩余空间（即子元素放大）。
            取值越大，索取得越多。
        
        举个例子，父有A、B两子。其中父宽400px，A宽100px，B宽200px。那么父剩余400-100-200=100px。
        （1）A、B都不索取，也就是A、B的flex-grow为0，则父剩100px。
        （2）A索取，B不索取。A设置flex-grow:1，那么最终A的宽为100+100=200px，B的宽不变还是200px。
        （3）A、B同时索取剩余空间，A设置flex-grow:1，B设置flex-grow:1，那么最终A的宽为100+100×1/(1+1)=150px，B的宽为200+100×1/(1+1)=250px。
        （4）A、B同时索取剩余空间，A设置flex-grow:1，B设置flex-grow:3，那么最终A的宽为100+100×1/(1+3)=125px，B的宽为200+100×3/(1+3)=275px。
-->
<div class="case1">
    <div></div>
    <div></div>
    <div></div>
</div>
<pre>
    在这个例子中，我们父元素是弹性盒子，并且指定宽度为200px，由于所有子元素都没有指定宽度。
    我们只需要使用flex-grow属性给每一个子元素指定一个值，然后浏览器就会自动计算每个子元素所占的比例，自动划分宽度。
</pre>
<hr>

</body>
</html>

缩小比例 flex-shrink

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .case1 {
            display: flex; /*---------------*/
            width: 200px;
            height: 150px;
        }

        .case1 div {
            width: 100px;
        }

        .case1 div:nth-child(1) {
            background: red;
            flex-shrink: 0; /* 100 */
        }

        .case1 div:nth-child(2) {
            background: blue;
            flex-shrink: 1; /* 100 - 100*(1/4) = 75px */
        }

        .case1 div:nth-child(3) {
            background: orange;
            flex-shrink: 3; /* 100 - 100*(3/4) = 25px */
        }
    </style>
</head>
<body>
<!--
24.3 缩小比例：flex-shrink
        在CSS3中，flex-shrink属性用于定义弹性盒子内部子元素的缩小比例。
        也就是当所有子元素宽度之和大于父元素的宽度时，子元素如何缩小自己的宽度。
        
        flex-shrink: 数值;
            flex-shrink属性取值是一个数值，默认值为1。
            当取值为0时，表示子元素不缩小；
            当取值大于1时，表示子元素按一定的比例缩小。
            取值越大，缩小得越厉害。
        
        举个例子，父有A、B两子。其中父宽400px，A宽200px，B宽300px。那么超出父200+300-400=100px。
        （1）A、B都不缩小，也就是A、B的flex-shrink:0，那么超出父100px。
        （2）A不缩小，B缩小。A设置flex-shrink:0;，B设置flex-shrink:1;（默认值）。那么A不变还是200px，B为300-100=200px（自身宽度-超出父元素的宽度）。
        （3）A、B同时缩小，A设置flex-shrink:1，B设置flex-shrink:1，那么A为200-100×(200×1)/(200×1+300×1)=160px（A自身宽度-A减小的宽度），B为300-100×(300×1)/(200×1+300×1)=240px（B自身宽度-B减小的宽度）。
        （4）A、B同时缩小，A设置flex-shrink:3，B设置flex-shrink:2，那么A为200-100×(200×3)/(200×3+300×2)=150px（A自身宽度-A减小的宽度），B为300-100×(300×2)/(200×3+300×2)=250px（B自身宽度-B减小的宽度）。
        
---------------------------------------------------------------------------------------
总结
    小于父元素 flex-grow有效；
    超出父元素 flex-shrink有效；
    即：flex-grow、flex-shrink 不能同时有效；
    
    flex-grow:0; 或 flex-shrink:0;的子元素，宽度为原来定义的宽度，并且不会参与划分。
    flex-grow 默认0；flex-shrink 默认1；
    
    最后还有一点要特别跟大家说一下，在实际开发中，我们更多的是使用flex-grow属性，很少会用flex-shrink属性。
    
-->
<div class="case1">
    <div></div>
    <div></div>
    <div></div>
</div>
<pre>
    在这个例子中，我们父元素是弹性盒子，并且指定宽度为200px，由于所有子元素都没有指定宽度。
    我们只需要使用flex-grow属性给每一个子元素指定一个值，然后浏览器就会自动计算每个子元素所占的比例，自动划分宽度。
</pre>
<hr>

</body>
</html>

元素宽度 flex-basis

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .case1 {
            display: flex; /*---------------*/
            width: 200px;
            height: 150px;
        }

        .case1 div {
            /*width: 100px;*/
            flex-basis: 100px;/* 二者效果相同，但 flex-basis语义化更好 */
        }

        .case1 div:nth-child(1) {
            background: red;
            flex-shrink: 0; /* 100 */
        }

        .case1 div:nth-child(2) {
            background: blue;
            flex-shrink: 1; /* 100 - 100*(1/4) = 75px */
        }

        .case1 div:nth-child(3) {
            background: orange;
            flex-shrink: 3; /* 100 - 100*(3/4) = 25px */
        }
    </style>
</head>
<body>
<!--
24.4 元素宽度：flex-basis
        在CSS3中，我们可以定义弹性盒子内部的子元素在分配空间之前，该子元素所占的空间大小。
        浏览器会根据这个属性，计算父元素是否有多余空间。
        
        很多小伙伴初次见到flex-basis属性，都会感到很疑惑，完全不知道它是用来干嘛的。
        说白了，flex-basis就是width的替代品，它们都用来定义子元素的宽度。
        只不过在弹性盒子中，flex-basis的语义会比width更好。
        
        flex-basis: 取值;
            flex-basis属性取值有两个：
                一个是“auto”，即该子元素的宽度是根据内容多少来定的；
                另一个是“长度值”，单位可以为px、em和百分比等。
            
            【会覆盖width】
            flex-basis属性用来设置子元素的宽度，当然，width属性也可以用来设置子元素的宽度。
            如果某一个子元素同时设置flex-basis和width，那么flex-basis的值会覆盖width的值。

        
        【flex-basis 语义化更好】
        在使用弹性布局时，虽然flex-basis和width都可以用来设置子元素的宽度，
        但是我们应该使用flex-basis而不是width，这也是为了更好地语义化。
-->
<div class="case1">
    <div></div>
    <div></div>
    <div></div>
</div>


</body>
</html>

复合属性 flex

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .case1 {
            display: flex; /*---------------*/
            width: 200px;
            height: 150px;
        }

        .case1 div:nth-child(1) {
            background: red;
            flex: 1; /* 1/4 * 200 = 80px */
        }

        .case1 div:nth-child(2) {
            background: blue;
            flex: 2; /* 2/4 * 200 = 160px */
        }

        .case1 div:nth-child(3) {
            background: orange;
            flex: 1; /* 1/4 * 200 = 80px */
        }
    </style>
</head>
<body>
<!--
24.5 复合属性：flex
        flex: grow shrink basis;
            默认 "flex: 0 1 auto"
            
            shrink basis 可省略。
            例如 “flex:1;” 其实等价于 “flex:1 1 auto;”
        
        在实际开发中，优先使用flex属性，而不是单独写flex-grow、flex-shrink、flex-basis这3个属性。
-->
<div class="case1">
    <div></div>
    <div></div>
    <div></div>
</div>


</body>
</html>

排列方向 flex-direction

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .case1 {
            display: flex;
            /*flex-direction: row;*/ /* 横向排列（默认值） */
            flex-direction: row-reverse; /* 横向反向排列 */
            width: 200px;
            height: 150px;
        }

        .case1 div {
            height: 150px;
            line-height: 150px;
            text-align: center;
            font-size: 30px;
            color: white;
        }

        .case1 div:nth-child(1) {
            background: red;
            flex: 1; /* 1/4 * 200 = 80px */
        }

        .case1 div:nth-child(2) {
            background: blue;
            flex: 2; /* 2/4 * 200 = 160px */
        }

        .case1 div:nth-child(3) {
            background: orange;
            flex: 3; /* 1/4 * 200 = 80px */
        }
    </style>
</head>
<body>
<!--
24.6 排列方向：flex-direction
        在CSS3中，我们可以使用flex-direction属性来定义弹性盒子内部“子元素”的排列方向。
        也就是定义子元素是横着排，还是竖着排。
        
        flex-direction: 取值;
            row	            横向排列（默认值）
            row-reverse	    横向反向排列
            column	        纵向排列
            column-reverse	纵向反向排列
        
        在实际开发中，优先使用flex属性，而不是单独写flex-grow、flex-shrink、flex-basis这3个属性。
        
        【父元素定义】
        注意，flex-direction属性是在弹性盒子（即父元素）上定义的。
-->
<div class="case1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>


</body>
</html>

多行显示 flex-wrap

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        /* 公用样式 */
        .wrapper1,.wrapper2,.wrapper3 {
            display: flex;
            color: white;
            font-size:24px;
            width:400px;
            height: 100px;
            line-height:50px;
            border:1px solid gray;
            text-align: center;
        }
        .wrapper1 div,.wrapper2 div,.wrapper3 div {
            height: 50%;
            width: 50%;
        }
        .red {background: red;}
        .green {background: green;}
        .blue {background: blue;}
        
        /* 弹性盒子样式 */
        .wrapper1 {flex-wrap: nowrap;}
        .wrapper2 {flex-wrap: wrap;}
        .wrapper3 {flex-wrap: wrap-reverse;}
    </style>
</head>
<body>
<!--
24.7 多行显示：flex-wrap
        在CSS3中，我们可以使用flex-wrap属性来定义弹性盒子内部“子元素”是单行显示还是多行显示。
        
        flex-wrap: 取值;
            nowrap	        单行显示（默认值）
            wrap	        多行显示，也就是换行显示
            wrap-reverse	多行显示，但是却是反向
        
-->
<h3>1、flex-wrap:nowrap（默认值）</h3>
<div class="wrapper1">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>
<hr>

<h3>2、flex-wrap:wrap</h3>
<div class="wrapper2">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>
<hr>

<h3>3、flex-wrap:wrap-reverse</h3>
<div class="wrapper3">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
</div>


</body>
</html>

复合属性 flex-flow

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #wrapper {
            display: flex;
            flex-flow: row-reverse nowrap;/*-----------------*/
            width: 200px;
            height: 150px;
        }

        #box1, #box2, #box3 {
            height: 150px;
            line-height: 150px;
            text-align: center;
            font-size: 30px;
            color: white;
        }

        #box1 {
            background: red;
            flex: 1;
        }

        #box2 {
            background: blue;
            flex: 2;
        }

        #box3 {
            background: orange;
            flex: 3;
        }
    </style>
</head>
<body>
<!--
24.8 复合属性：flex-flow
        flex-flow: direction wrap;
            默认 "row nowrap"
            

        
        二者等同（只不过在实际开发中，我们更倾向于使用flex-flow这种简写形式。）
            flex-flow:row-reverse nowrap;
            
            flex-direction: row-reverse;
            flex-wrap: nowrap;
        
-->
<div id="wrapper">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>


</body>
</html>

排列顺序 order

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #wrapper {
            display: flex;
            width: 200px;
            height: 150px;
        }

        #box1, #box2, #box3 {
            height: 150px;
            line-height: 150px;
            text-align: center;
            font-size: 30px;
            color: white;
        }

        #box1 {
            background: red;
            flex: 1;
            order: 2;
        }

        #box2 {
            background: blue;
            flex: 2;
            order: 3;
        }

        #box3 {
            background: orange;
            flex: 3;
            order: 1;
        }
    </style>
</head>
<body>
<!--
24.9 排列顺序：order
        在CSS3中，我们可以使用order属性来定义弹性盒子内部“子元素”的排列顺序。
        
        
        order:正整数;
            从小到大（默认0）
            
-->
<div id="wrapper">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>


</body>
</html>

水平对齐 justify-content

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        /*定义整体样式*/
        .flex {
            display: flex;
            flex-flow: row nowrap;
            background-color:lightskyblue;
            margin-bottom:5px;
        }
        .item {
            width: 80px;
            padding:10px;
            text-align: center;
            background-color:hotpink;
            box-sizing: border-box;
        }
        
        /*定义justify-content*/
        .start{justify-content: flex-start;}
        .center {justify-content: center;}
        .end {justify-content: flex-end;}
        .between {justify-content: space-between;}
        .around {justify-content: space-around;}
    </style>
</head>
<body>
<!--
24.10 水平对齐：justify-content
        在CSS3中，我们可以使用justify-content属性来定义弹性盒子内部子元素在“横轴”上的对齐方式。
        
        
        justify-content: 取值;
            flex-start	    所有子元素在左边（默认值）
            center	        所有子元素在中间
            flex-end	    所有子元素在右边
            space-between	所有子元素平均分布
            space-around	所有子元素平均分布，但两边留有一定间距
            
-->
<h3>1、flex-start 所有子元素在左边（默认值）</h3>
<div class="flex start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<hr>

<h3>2、center 所有子元素在中间</h3>
<div class="flex center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<hr>

<h3>3、flex-end 所有子元素在右边</h3>
<div class="flex end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<hr>

<h3>4、space-between 所有子元素平均分布</h3>
<div class="flex between">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>
<hr>

<h3>5、space-around 所有子元素平均分布，但两边留有一定间距</h3>
<div class="flex around">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>


</body>
</html>

垂直对齐 align-items

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
93
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .box {
            /*去除默认样式*/
            list-style-type:none;
            margin:0;
            padding:0;
            display:flex;/*定义flex布局*/
            width:250px;
            height:150px;
            border:1px solid gray;
            font-size:24px;
        }
        h3{margin-bottom:3px;}
        
        /*定义子元素样式*/
        .box li {
            margin:5px;
            background-color:lightskyblue;
            text-align:center;
        }
        .box li:nth-child(1){padding:10px;}
        .box li:nth-child(2){padding:15px 10px;}
        .box li:nth-child(3){padding:20px 10px;}
        
        /*定义align-items*/
        #box1{align-items:flex-start;}
        #box2{align-items:center;}
        #box3{align-items:flex-end;}
        #box4{align-items:baseline;}
        #box5{align-items:stretch;}
    </style>
</head>
<body>
<!--
24.11 垂直对齐：align-items
        在CSS3中，我们可以使用align-items属性来定义弹性盒子内部子元素在“纵轴”上的对齐方式。
        
        
        align-items: 取值;
            flex-start	所有子元素在上边（默认值）
            center  	所有子元素在中部
            flex-end	所有子元素在下边
            baseline	所有子元素在父元素的基线上
            strecth 	拉伸子元素以适应父元素高度
            
-->
<h3>1、flex-start 所有子元素在上边（默认值）</h3>
<ul id="box1" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<hr>

<h3>2、center 所有子元素在中部</h3>
<ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<hr>

<h3>3、flex-end 所有子元素在下边</h3>
<ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<hr>

<h3>4、baseline 所有子元素在父元素的基线上</h3>
<ul id="box4" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
<hr>

<h3>5、stretch 拉伸子元素以适应父元素高度</h3>
<ul id="box5" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>


</body>
</html>

实战题：水平居中和垂直居中

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #father {
            display: flex;
            justify-content: center;
            align-items: center;
            
            width: 200px;
            height: 160px;
            border: 1px solid silver;
        }

        #son {
            width: 100px;
            height: 50px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
<!--
24.12 实战题：水平居中和垂直居中
        在CSS2.1中，想要实现块元素的水平居中和垂直居中是比较麻烦的事情。
        
        现在有了CSS3的弹性盒子模型，我们就可以轻松地实现了。
            justify-content:center; 来实现水平居中，
            align-items:center; 来实现垂直居中。
        
        实现块元素在其父元素的水平居中和垂直居中很简单，只需要在其父元素中添加以下代码即可：
            display: flex;
            justify-content: center;
            align-items: center;
        
        2023-06-28 18:25:11
            不由得有点感悟，如SpringBoot一样，直接上手，谁还手动配置XML Bean，手动搞SSM，打war扔tomcat。
            有了弹性布局谁还 margin: 0 auto; 或 两次中心移动居中。这种无疑是技术的升级，简单粗暴的解决，更友好。
            
-->
<div id="father">
    <div id="son"></div>
</div>


</body>
</html>

实战题：伸缩菜单-不同设备

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        /*定义整体样式*/
        .nav {
            /*去除默认样式*/
            list-style-type: none;
            margin:0;
            padding:0;
            display: flex;/*定义弹性盒子*/
            background-color:hotpink;
        }
        .nav a {
            text-decoration: none;/*去除默认样式*/
            display: block;
            padding:16px;
            color:white;
            text-align: center;
        }
        .nav a:hover{background-color: lightskyblue;}
        /*设备大于800px时，所有子元素在右边*/
        @media (min-width:800px){
            .nav{justify-content: flex-end;}
            li{border-left:1px solid silver;}
        }
        /*设备大于600px且小于800px时，所有子元素平分*/
        @media (min-width:600px) and (max-width:800px) {
            .nav li{flex:1;}
            li+li{border-left:1px solid silver;}
        }
        /*设备小于600px时，所有子元素纵向排列*/
        @media (max-width: 600px){
            .nav{flex-flow:column wrap;}
            li+li{border-top: 1px solid silver;}
        }
    </style>
</head>
<body>
<!--
24.13 实战题：伸缩菜单
        当我们改变浏览器的大小时，这个伸缩菜单会随着改变布局方式，这又叫“响应式布局”。
        响应式布局的关键是使用@media来实现媒体查询，这属于移动端开发的内容。
        
        
        【日期标记】2023-06-28 18:34:13 以上同步完成
-->
<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">前端</a></li>
    <li><a href="#">后端</a></li>
    <li><a href="#">下载</a></li>
</ul>


</body>
</html>

实战题：gif实现 v1 固定比例缩小

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>035_24.14_实战题：gif实现 v1 固定比例缩小.html</title>
    <style type="text/css">
        .container {
            display: flex;
            /*flex: 0 1 auto;*/ /*默认 grow=0 shrink=1 basis=auto*/
            flex-flow: row wrap; /*默认 direction=row warp=nowarp*/
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // TODO 使用gif来实现
        // 04_jQuery/043_8.3_gif 显示隐藏 淡入淡出.html
        $(function () {
            // 1. 拼接图片
            var arr = [
                "1cokc3sajtw.gif", "005MZqZdgw1ezsjivqjhng30cs073e81.gif", "9-16041QF919.gif", "24.gif", "29.gif",
                "056bb67cade72f9e25.gif", "0065a7iMjw1fbx1o0pcdhg306j07n1kx.gif", "0065mxFoly1ff2o7vxg0ng30b4069e81.gif",
                "0065mxFoly1ffmxcm6m0wg30a307fe81.gif", "0065mxFoly1fkuli61c7ig30bc0844qr.gif",
                "0067Ob0cjw1ey314wdecdg309v05k7sb.gif", "680_1000.gif", "9378-gom-kogaru-tits.gif",
                "34365-1.gif", "36614-3.gif", "45079-1.gif", "179941.gif", "516892.gif", "16806761-1.gif", "21870857.gif", "26703071.gif",
                "62047472tw1ectrpobmjtg206o08wnpd.gif", "20210429143411_73240.gif", "big-tits_001-19.gif", "danai2695.gif", "DVAJ-137.7.gif",
                "f50d368de9eb6220a528a19c98b4c82d.gif", "Gifs-for-Tumblr-1664.gif", "qDmCUGD.gif", "tits-shaking-animated-gif.gif",
                "tumblr_n3yyzoUFK21tobld4o3_250.gif", "tumblr_n3yyzoUFK21tobld4o5_250.gif"
            ];
            arr.forEach(function (e) {
                // $().append("字符串")       把一个新元素插入到父元素内部的子元素的“末尾”
                // $("#ul1").append("<li>jQuery</li>");

                // case1 图片原样显示
                // $(".container").append('<div><img/></div>');
                // $("img:last").attr("src", "tmp/" + e);

                // case2 图片比例显示 200*200
                $(".container").append('<div><img/></div>');// 显示正常。图片宽高会同比例缩小。（推荐）
                // $(".container").append('<img/>');// 显示非常不友好。图片变形，宽高不会同比例缩小。（不推荐）
                $("img:last").attr("src", "tmp/" + e).on("load", function () {
                    var w = $(this).width();
                    var h = $(this).height();
                    console.log("w=" + w + "px, h=" + h + "px");
                    var max = Math.max(w, h, 200);

                    if (max > 200) {
                        var rate = max / 200;
                        $(this).width(w / rate);
                        $(this).height(h / rate);
                    }
                })
            })
        })
    </script>
</head>
<body>

<div class="container"></div>

</body>
</html>

实战题：gif实现 v2 动态比例缩小 进度条

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>035_24.14_实战题：gif实现 v2 动态比例缩小 进度条.html</title>
    <style type="text/css">
        .container {
            display: flex;
            /*flex: 0 1 auto;*/ /*默认 grow=0 shrink=1 basis=auto*/
            flex-flow: row wrap; /*默认 direction=row warp=nowarp*/
        }

        .range {
            position: fixed;
            /*right: 0px;*/
            /*bottom: 0px;*/

            /*right: 50%;*/
            /*bottom: 0px;*/

            top: 0px;
            right: 50%;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // TODO 使用gif来实现
        // 04_jQuery/043_8.3_gif 显示隐藏 淡入淡出.html
        $(function () {
            alert($("html").width());// 浏览器的宽度，随着拖动浏览器大小，这个值会跟着变。
            {
                var input = document.querySelectorAll(".range input")[0];
                var output = document.querySelectorAll(".range output")[0];
                output.value = input.value; //获取range的初始值
                input.onchange = function () {//拖动滑动条，改变output值
                    output.value = input.value;

                    /*
                        $().each(function(index, element){
                            …… 
                        }) 
                        index是一个可选参数，它表示元素的索引号（即下标）。通过形参index以及配合this关键字，我们就可以轻松操作每一个元素。此外注意一点，形参index是从0开始的。
                        element是一个可选参数，它表示当前元素，可以使用$(this)来代替。也就是说，$(element)等价于$(this)。
                        如果需要退出each循环，可以在回调函数中返回false，也就是return false即可。
                     */

                    $("img").each(function () {
                        // $(this).css("width", "initial");
                        // $(this).css("height", "initial");
                        $(this).css({"width": "initial", "height": "initial"});
                        var w = $(this).width();
                        var h = $(this).height();
                        console.log("w=" + w + "px, h=" + h + "px");

                        var htmlWidth = $("html").width();
                        var rangeValue = document.querySelectorAll(".range input")[0].value;
                        var dynamicWidth = (htmlWidth / rangeValue).toFixed(0);

                        var max = Math.max(w, h, dynamicWidth);

                        if (max > dynamicWidth) {
                            var rate = max / dynamicWidth;
                            $(this).width(w / rate);
                            $(this).height(h / rate);
                        }
                    })
                };
            }


            // 1. 拼接图片
            var arr = [
                "1cokc3sajtw.gif", "005MZqZdgw1ezsjivqjhng30cs073e81.gif", "9-16041QF919.gif", "24.gif", "29.gif",
                "056bb67cade72f9e25.gif", "0065a7iMjw1fbx1o0pcdhg306j07n1kx.gif", "0065mxFoly1ff2o7vxg0ng30b4069e81.gif",
                "0065mxFoly1ffmxcm6m0wg30a307fe81.gif", "0065mxFoly1fkuli61c7ig30bc0844qr.gif",
                "0067Ob0cjw1ey314wdecdg309v05k7sb.gif", "680_1000.gif", "9378-gom-kogaru-tits.gif",
                "34365-1.gif", "36614-3.gif", "45079-1.gif", "179941.gif", "516892.gif", "16806761-1.gif", "21870857.gif", "26703071.gif",
                "62047472tw1ectrpobmjtg206o08wnpd.gif", "20210429143411_73240.gif", "big-tits_001-19.gif", "danai2695.gif", "DVAJ-137.7.gif",
                "f50d368de9eb6220a528a19c98b4c82d.gif", "Gifs-for-Tumblr-1664.gif", "qDmCUGD.gif", "tits-shaking-animated-gif.gif",
                "tumblr_n3yyzoUFK21tobld4o3_250.gif", "tumblr_n3yyzoUFK21tobld4o5_250.gif"
            ];
            arr.forEach(function (e) {
                // $().append("字符串")       把一个新元素插入到父元素内部的子元素的“末尾”
                // $("#ul1").append("<li>jQuery</li>");

                // case1 图片原样显示
                // $(".container").append('<div><img/></div>');
                // $("img:last").attr("src", "tmp/" + e);

                // case2 图片比例显示 200*200
                $(".container").append('<div><img/></div>');// 显示正常。图片宽高会同比例缩小。（推荐）
                // $(".container").append('<img/>');// 显示非常不友好。图片变形，宽高不会同比例缩小。（不推荐）
                $("img:last").attr("src", "tmp/" + e).on("load", function () {
                    var w = $(this).width();
                    var h = $(this).height();
                    console.log("w=" + w + "px, h=" + h + "px");

                    var htmlWidth = $("html").width();
                    var rangeValue = document.querySelectorAll(".range input")[0].value;
                    var dynamicWidth = (htmlWidth / rangeValue).toFixed(0);

                    var max = Math.max(w, h, dynamicWidth);

                    if (max > dynamicWidth) {
                        var rate = max / dynamicWidth;
                        $(this).width(w / rate);
                        $(this).height(h / rate);
                    }
                })
            })


            // 2023-06-29 09:30:24 明天再战。都是人，看见了不太好。正在弄动态进度条。
            // 2023-06-29 09:37:55 还是实现了，跟邹俊演示了一下。这里是实现telegram 移动端的放缩功能。
        })
    </script>
</head>
<body>

<div class="container"></div>
<div class="range">
    <input type="range" min="1" max="10" step="1" value="5"/>
    <output></output>
</div>

</body>
</html>

实战题：gif实现 v3 动态比例缩小 浏览器窗口变化

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>035_24.14_实战题：gif实现 v3 动态比例缩小 浏览器窗口变化.html</title>
    <style type="text/css">
        .container {
            display: flex;
            /*flex: 0 1 auto;*/ /*默认 grow=0 shrink=1 basis=auto*/
            flex-flow: row wrap; /*默认 direction=row warp=nowarp*/
        }

        .range {
            position: fixed;
            /*right: 0px;*/
            /*bottom: 0px;*/

            /*right: 50%;*/
            /*bottom: 0px;*/

            top: 0px;
            right: 50%;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // TODO 使用gif来实现
        // 04_jQuery/043_8.3_gif 显示隐藏 淡入淡出.html
        $(function () {
            // 函数：浏览器宽度
            function htmlWidth() {
                return $("html").width();
            }

            // 函数：改变图片宽度 单个
            function changeWidthSingle(img) {
                // e.css("width", "initial");
                // e.css("height", "initial");
                img.css({"width": "initial", "height": "initial"});// 宽高恢复默认值
                var w = img.width();
                var h = img.height();
                // console.log("w=" + w + "px, h=" + h + "px");// 查看图片宽高

                // var rangeValue = document.querySelectorAll(".range input")[0].value;
                var rangeValue = $(".range input").val();
                var dynamicWidth = (htmlWidth() / rangeValue).toFixed(0);

                // 浏览器 500px, 滑动条 5,    dynamicWidth = 500px / 5 = 100px
                // 图片宽高超出 100px，进行缩小
                var max = Math.max(w, h, dynamicWidth);
                if (max > dynamicWidth) {
                    var rate = max / dynamicWidth;
                    img.width(w / rate);
                    img.height(h / rate);
                }
            }

            // 函数：改变图片宽度 所有
            function changeWidthMulti() {
                /*
                         $().each(function(index, element){
                             …… 
                         }) 
                         index是一个可选参数，它表示元素的索引号（即下标）。通过形参index以及配合this关键字，我们就可以轻松操作每一个元素。此外注意一点，形参index是从0开始的。
                         element是一个可选参数，它表示当前元素，可以使用$(this)来代替。也就是说，$(element)等价于$(this)。
                         如果需要退出each循环，可以在回调函数中返回false，也就是return false即可。
                */
                $("img").each(function () {
                    changeWidthSingle($(this));
                })
            }

            // 打印浏览器宽度
            {
                alert(htmlWidth());// 浏览器的宽度，随着拖动浏览器大小，这个值会跟着变。
            }

            // 滑动条默认设置
            {
                var input = document.querySelectorAll(".range input")[0];
                var output = document.querySelectorAll(".range output")[0];
                output.value = input.value; //获取range的初始值
                input.onchange = function () {//拖动滑动条，改变output值
                    output.value = input.value;

                    changeWidthMulti();
                };
            }

            // 拼接图片
            {
                var arr = [
                    "1cokc3sajtw.gif", "005MZqZdgw1ezsjivqjhng30cs073e81.gif", "9-16041QF919.gif", "24.gif", "29.gif",
                    "056bb67cade72f9e25.gif", "0065a7iMjw1fbx1o0pcdhg306j07n1kx.gif", "0065mxFoly1ff2o7vxg0ng30b4069e81.gif",
                    "0065mxFoly1ffmxcm6m0wg30a307fe81.gif", "0065mxFoly1fkuli61c7ig30bc0844qr.gif",
                    "0067Ob0cjw1ey314wdecdg309v05k7sb.gif", "680_1000.gif", "9378-gom-kogaru-tits.gif",
                    "34365-1.gif", "36614-3.gif", "45079-1.gif", "179941.gif", "516892.gif", "16806761-1.gif", "21870857.gif", "26703071.gif",
                    "62047472tw1ectrpobmjtg206o08wnpd.gif", "20210429143411_73240.gif", "big-tits_001-19.gif", "danai2695.gif", "DVAJ-137.7.gif",
                    "f50d368de9eb6220a528a19c98b4c82d.gif", "Gifs-for-Tumblr-1664.gif", "qDmCUGD.gif", "tits-shaking-animated-gif.gif",
                    "tumblr_n3yyzoUFK21tobld4o3_250.gif", "tumblr_n3yyzoUFK21tobld4o5_250.gif"
                ];
                arr.forEach(function (e) {
                    // $().append("字符串")       把一个新元素插入到父元素内部的子元素的“末尾”
                    // $("#ul1").append("<li>jQuery</li>");

                    // case1 图片原样显示
                    // $(".container").append('<div><img/></div>');
                    // $("img:last").attr("src", "tmp/" + e);

                    // case2 图片比例显示 200*200
                    $(".container").append('<div><img/></div>');// 显示正常。图片宽高会同比例缩小。（推荐）
                    // $(".container").append('<img/>');// 显示非常不友好。图片变形，宽高不会同比例缩小。（不推荐）
                    $("img:last").attr("src", "tmp/" + e).on("load", function () {
                        changeWidthSingle($(this));
                    })
                })
            }

            // 浏览器窗口大小改变
            {
                window.addEventListener('resize', function () {
                    changeWidthMulti();
                })
            }

            // 2023-06-29 09:30:24 明天再战。都是人，看见了不太好。正在弄动态进度条。
            // 2023-06-29 09:37:55 还是实现了，跟邹俊演示了一下。这里是实现telegram 移动端的放缩功能。
            // 2023-06-29 10:06:20 进行了函数的封装。注释都保留着，没有删除。
        })
    </script>
</head>
<body>

<div class="container"></div>
<div class="range">
    <input type="range" min="1" max="20" step="1" value="5"/>
    <output></output>
</div>

</body>
</html>

实战题：gif实现 v4 奥特曼图片

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>035_24.14_实战题：gif实现 v4 奥特曼图片.html</title>
    <style type="text/css">
        .container {
            display: flex;
            /*flex: 0 1 auto;*/ /*默认 grow=0 shrink=1 basis=auto*/
            flex-flow: row wrap; /*默认 direction=row warp=nowarp*/
        }

        .range {
            position: fixed;
            /*right: 0px;*/
            /*bottom: 0px;*/

            /*right: 50%;*/
            /*bottom: 0px;*/

            top: 0px;
            right: 50%;
        }

        figure {
            border: 1px solid gray;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // TODO 使用gif来实现
        // 04_jQuery/043_8.3_gif 显示隐藏 淡入淡出.html
        $(function () {
            // 函数：浏览器宽度
            function htmlWidth() {
                return $("html").width();
            }

            // 函数：改变图片宽度 单个
            function changeWidthSingle(img) {
                // e.css("width", "initial");
                // e.css("height", "initial");
                img.css({"width": "initial", "height": "initial"});// 宽高恢复默认值
                var w = img.width();
                var h = img.height();
                // console.log("w=" + w + "px, h=" + h + "px");// 查看图片宽高

                // var rangeValue = document.querySelectorAll(".range input")[0].value;
                var rangeValue = $(".range input").val();
                var dynamicWidth = (htmlWidth() / rangeValue).toFixed(0);

                // 浏览器 500px, 滑动条 5,    dynamicWidth = 500px / 5 = 100px
                // 图片宽高超出 100px，进行缩小
                var max = Math.max(w, h, dynamicWidth);
                if (max > dynamicWidth) {
                    var rate = max / dynamicWidth;
                    img.width(w / rate);
                    img.height(h / rate);
                }
            }

            // 函数：改变图片宽度 所有
            function changeWidthMulti() {
                /*
                         $().each(function(index, element){
                             …… 
                         }) 
                         index是一个可选参数，它表示元素的索引号（即下标）。通过形参index以及配合this关键字，我们就可以轻松操作每一个元素。此外注意一点，形参index是从0开始的。
                         element是一个可选参数，它表示当前元素，可以使用$(this)来代替。也就是说，$(element)等价于$(this)。
                         如果需要退出each循环，可以在回调函数中返回false，也就是return false即可。
                */
                $("img").each(function () {
                    changeWidthSingle($(this));
                })
            }

            // 打印浏览器宽度
            {
                alert(htmlWidth());// 浏览器的宽度，随着拖动浏览器大小，这个值会跟着变。
            }

            // 滑动条默认设置
            {
                var input = document.querySelectorAll(".range input")[0];
                var output = document.querySelectorAll(".range output")[0];
                output.value = input.value; //获取range的初始值
                input.onchange = function () {//拖动滑动条，改变output值
                    output.value = input.value;

                    changeWidthMulti();
                };
            }

            // 拼接图片
            {
                /*
                        // 2023-06-29 15:30 修改时间读图片 奥特曼
                        public static void main(String[] args) throws Exception {
                            List<File> img_list = FileUtil.loopFiles(StrUtil.format("C:/Users/TaoPanfeng/Pictures/奥特曼"));// 图片列表
                    
                            String str = img_list.stream()
                                    .sorted(Comparator.comparing(e -> Long.valueOf(e.lastModified())))
                                    .map(e -> StrUtil.wrap(e.getName(), "\"", "\""))
                                    .collect(Collectors.joining(","));
                            System.out.println(str);// "初代.png","佐菲.png","赛文.png","杰克.png","艾斯.png","泰罗.png","奥特之父.png","奥特之母.png","雷欧.png","阿斯特拉.png","奥特之王.png","乔尼亚斯.png","爱迪.png","尤莉安.png","察克.png","贝斯.png","史考特.png","葛雷.png","帕瓦特.png","利布特.png","哉阿斯.png","迪迦.png","戴拿.png","盖亚.png","阿古茹.png","纳伊斯.png","奈欧斯.png","赛文21.png","高斯.png","杰斯提斯.png","雷杰多.png","奈克斯特.png","奈克瑟斯.png","诺亚.png","麦克斯.png","杰诺.png","梦比优斯.png","希卡利.png","赛文X.png","赛罗.png","赛迦.png","银河.png","维克特利.png","银河维克特利.png","艾克斯.png","欧布.png","捷德.png","罗索.png","布鲁.png","罗布.png","格丽乔.png","格罗布.png","泰迦.png","泰塔斯.png","风马.png","令迦.png","泽塔.png","特利迦.png","雷古洛思.png","德凯.png","帝纳斯.png","布莱泽.png","艾米娅.png","佩欧妮.png","拉腊.png","索拉.png","玛丽叶.png","阿尔弗奴.png","露迪娅.png","奥拉奥.png","博伊.png","沃斯.png","美洛斯.png","法伊塔斯.png","阿丘拉.png","扎吉.png","菲利斯.png","阿鲁斯.png","霍托 莫托 基托.png","皮克特.png","艾雷克.png","洛特.png","贝利亚 早期形态 白贝.png","托雷基亚 早期形态.png","怨灵奥特曼.png","怨灵赛文.png","幻影阿古茹.png","幻影赛罗.png","夏德.png","艾斯机器人.png","邪恶迪迦.png","黑暗迪迦.png","爱憎战士 卡蜜拉.png","希特拉.png","达拉姆.png","卡欧斯.png","黑暗浮士德.png","黑暗梅菲斯特.png","黑暗扎基 诺亚的黑暗面.png","黑暗路西法.png","黑暗洛普斯赛罗.png","黑暗洛普斯.png","机械雷欧奥特曼.png","机械奥特兄弟.png","捷德的兄弟.png","黑暗奥特曼.png","黑暗赛文奥特曼.png","贝利亚奥特曼.png","暗黑欧布.png","托雷基亚.png","黑暗格丽乔.png","黑暗捷德.png","凯撒黑暗捷德.png","黑暗艾克斯.png","黑暗欧布.png","黑暗赛罗.png","妖丽战士 卡尔蜜拉.png","刚力斗士 达贡.png","俊敏策士 希特拉姆.png","黑暗勇士 黑暗特利迦.png","邪恶特利迦.png"
                    
                        }
                 */
                var arr = [
                    "初代.png", "佐菲.png", "赛文.png", "杰克.png", "艾斯.png", "泰罗.png", "奥特之父.png", "奥特之母.png", "雷欧.png", "阿斯特拉.png", "奥特之王.png",
                    "乔尼亚斯.png", "爱迪.png", "尤莉安.png", "察克.png", "贝斯.png", "史考特.png", "葛雷.png", "帕瓦特.png", "利布特.png", "哉阿斯.png", "迪迦.png",
                    "戴拿.png", "盖亚.png", "阿古茹.png", "纳伊斯.png", "奈欧斯.png", "赛文21.png", "高斯.png", "杰斯提斯.png", "雷杰多.png", "奈克斯特.png", "奈克瑟斯.png",
                    "诺亚.png", "麦克斯.png", "杰诺.png", "梦比优斯.png", "希卡利.png", "赛文X.png", "赛罗.png", "赛迦.png", "银河.png", "维克特利.png", "银河维克特利.png",
                    "艾克斯.png", "欧布.png", "捷德.png", "罗索.png", "布鲁.png", "罗布.png", "格丽乔.png", "格罗布.png", "泰迦.png", "泰塔斯.png", "风马.png", "令迦.png",
                    "泽塔.png", "特利迦.png", "雷古洛思.png", "德凯.png", "帝纳斯.png", "布莱泽.png", "艾米娅.png", "佩欧妮.png", "拉腊.png", "索拉.png", "玛丽叶.png",
                    "阿尔弗奴.png", "露迪娅.png", "奥拉奥.png", "博伊.png", "沃斯.png", "美洛斯.png", "法伊塔斯.png", "阿丘拉.png", "扎吉.png", "菲利斯.png", "阿鲁斯.png",
                    "霍托 莫托 基托.png", "皮克特.png", "艾雷克.png", "洛特.png", "贝利亚 早期形态 白贝.png", "托雷基亚 早期形态.png", "怨灵奥特曼.png", "怨灵赛文.png",
                    "幻影阿古茹.png", "幻影赛罗.png", "夏德.png", "艾斯机器人.png", "邪恶迪迦.png", "黑暗迪迦.png", "爱憎战士 卡蜜拉.png", "希特拉.png", "达拉姆.png",
                    "卡欧斯.png", "黑暗浮士德.png", "黑暗梅菲斯特.png", "黑暗扎基 诺亚的黑暗面.png", "黑暗路西法.png", "黑暗洛普斯赛罗.png", "黑暗洛普斯.png",
                    "机械雷欧奥特曼.png", "机械奥特兄弟.png", "捷德的兄弟.png", "黑暗奥特曼.png", "黑暗赛文奥特曼.png", "贝利亚奥特曼.png", "暗黑欧布.png",
                    "托雷基亚.png", "黑暗格丽乔.png", "黑暗捷德.png", "凯撒黑暗捷德.png", "黑暗艾克斯.png", "黑暗欧布.png", "黑暗赛罗.png", "妖丽战士 卡尔蜜拉.png",
                    "刚力斗士 达贡.png", "俊敏策士 希特拉姆.png", "黑暗勇士 黑暗特利迦.png", "邪恶特利迦.png"
                ];
                arr.forEach(function (e) {
                    // $().append("字符串")       把一个新元素插入到父元素内部的子元素的“末尾”
                    // $("#ul1").append("<li>jQuery</li>");

                    // case1 图片原样显示
                    // $(".container").append('<div><img/></div>');
                    // $("img:last").attr("src", "tmp/" + e);

                    // case2 图片比例显示 200*200
                    // $(".container").append('<div><figure><img><figcaption></figcaption></figure></div>');// 显示不挤着挨着，显示有间隔，不友好
                    $(".container").append('<div><img/></div>');// 显示正常。图片宽高会同比例缩小。（推荐）
                    // $(".container").append('<img/>');// 显示非常不友好。图片变形，宽高不会同比例缩小。（不推荐）
                    // $("img:last").attr("src", "tmp/" + e).on("load", function () {
                    $("img:last").attr({"src": "奥特曼/" + e, "alt": e, "title": e}).on("load", function () {
                        // $(this).next().text(e);
                        changeWidthSingle($(this));
                    })

                    // 上面比较简单，也可以只拼接 <div><img></div>
                    // 然后，在 img外面 wrap 包裹 figure，再在 img 后面拼接 <figcaption>e</figcaption>
                })
            }

            // 浏览器窗口大小改变
            {
                window.addEventListener('resize', function () {
                    changeWidthMulti();
                })
            }

            // 2023-06-29 09:30:24 明天再战。都是人，看见了不太好。正在弄动态进度条。
            // 2023-06-29 09:37:55 还是实现了，跟邹俊演示了一下。这里是实现telegram 移动端的放缩功能。
            // 2023-06-29 10:06:20 进行了函数的封装。注释都保留着，没有删除。
        })
    </script>
</head>
<body>
<!--figure figcaption-->
<!--<figure><img src="" alt=""><figcaption></figcaption></figure>-->

<div class="container"></div>
<div class="range">
    <input type="range" min="1" max="20" step="1" value="5"/>
    <output></output>
</div>

</body>
</html>

outline 外轮廓

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        input[type="text"]:focus {
            outline: 1px solid red;
        }
    </style>
</head>
<body>
<!--
25.1 outline属性
        当文本框获取焦点时，我们可以看到文本框周围会出现一条淡蓝色的轮廓线。
        之前很多小伙伴想要改变这条轮廓线默认的样式，却完全不知道怎么去实现。
        
        在CSS3中，我们可以使用outline属性来定义表单中文本框的轮廓线样式。
        
        outline: width style color;
            第1个值指的是轮廓线宽度（outline-width），
            第2个值指的是轮廓线样式（outline-style），
            第3个值指的是轮廓线颜色（outline-color）。
            outline属性跟border属性很相似，我们可以把轮廓线看成是一条特殊的边框来理解。
        
        
        此外，outline属性相当有用，特别是在美化搜索框样式的时候经常用到。
-->
<input id="txt" type="text"/>

</body>
</html>

initial CSS属性默认值

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
        #select{color:initial;}
    </style>
</head>
<body>
<!--
25.2 initial取值

        在实际开发中，我们有时需要将某个CSS属性重新设置为它的默认值。
        大多数情况下，我们都是采用直接给一个值的方式来实现。例如，浏览器默认字体颜色为黑色，如果重置color属性为默认值，我们大多数都是使用color:black;。
        但是很多时候，我们对元素的默认样式并不是特别清楚，例如p元素默认会有一定的margin，但是我们并不知道默认的margin是多少。
        
        在CSS3中，我们可以使用initial属性直接将某个CSS属性重置为它的默认值，并不需要事先知道这个CSS属性的默认值是多少，因为浏览器会自动设置的。
        
        CSS属性名: initial;
           “CSS属性名:initial;”表示设置这个属性的取值为默认值。
            此外，initial取值可以用于任何HTML元素上的任何CSS属性。
-->
<div>绿叶学习网</div>
<div>绿叶学习网</div>
<div id="select">绿叶学习网</div>

</body>
</html>

calc()函数

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        /*-------- 公共属性 ----------*/
        .box {
            width: 200px;
            height: 60px;
            border: 1px solid black;

            overflow: hidden;
        }

        /* 2023-06-29 07:14:42 为什么不能用，很疑惑！    暂时解决 .box加 overflow: hidden; */
        /*.box::after {*/
        /*    clear: both;*/
        /*    content: "";*/
        /*    display: block;*/
        /*    height: 0;*/
        /*    visibility: hidden;*/
        /*}*/

        .left {
            float: left;
            height: 100%;
            background-color: lightskyblue;
        }

        .right {
            float: right;
            height: 100%;
            background-color: hotpink;
        }

        /*-------- box1 ----------*/
        .box1 .left {
            width: 50%;
            border-right: 1px solid black;
            /*
                在这个例子中，box元素中有两个子元素：box-left和box-right。
                如果想要在box-left和box-right中插入一条中线，很多小伙伴首先想到的就是使用border属性来实现。
                但是box-left和box-right的宽度各占50%，再添加一条边框后，总宽度就是50%+50%+1px=100%+1px。
                此时两个子元素的总宽度超过了父元素的宽度，所以最终看到box-right被无情地挤了下来。
            */
        }

        .box1 .right {
            width: 50%;
        }

        /*-------- box2 ----------*/

        .box2 .left {
            width: 50%;
            border-right: 0px solid black; /* right不会被挤下去，不过边框线也没了 */
        }

        .box2 .right {
            width: 50%;
        }

        /*-------- box3 ----------*/
        .box3 .left {
            width: calc((100% - 1px) / 2);
            border-right: 1px solid black;
        }

        .box3 .right {
            width: calc((100% - 1px) / 2);
        }

        /*-----------------------------------------------------------------*/
        /*
            这个例子实现的是三列平分的布局，中间间距为5px。
            这里涉及了不同单位之间的计算，使用calc()函数很轻松就实现了。如果使用其他方法，则很难实现。
        */
        .col-3 {
            float: left;
            width: calc(100% / 3 - 5px);
            margin-right: calc(5px * 3 / 2);
            margin-bottom: calc(5px * 3 / 2);
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 24px;
            background: #EEEEEE;
            color: #333333;
        }

        .col-3:nth-child(3) {
            margin-right: 0;
        }
    </style>
</head>
<body>
<!--
25.3 calc()函数

    在CSS3中，我们可以使用calc()函数通过“计算”的方式来定义某一个属性的取值。
    
    属性: calc(表达式)
    
    我们可以使用calc()函数以计算的方式给元素的width、margin、padding、font-size等来定义属性值。
    对于calc()函数，有以下5条运算规则。
        ▶ 只能使用加（+）、减（-）、乘（*）和除（/）这4种运算。
        ▶ 可以使用px、em、rem、百分比等单位。
        ▶ 可以混合使用各种单位进行运算。
        ▶ 表达式中有加号（+）和减号（-）时，其前后必须有空格。
        ▶ 表达式中有乘号（*）和除号（/）时，其前后可以没有空格，但建议保留。
-->
<hr>

<h3>width: 50%;      border 1px</h3>
<div class="box box1 clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<hr>

<h3>width: 50%;      border 0px</h3>
<div class="box box2 clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<hr>

<h3>width: calc((100% - 1px) / 2);      border 1px</h3>
<div class="box box3 clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<hr>

<h3>三列平分布局</h3>
<div class="container">
    <div class="col-3">1</div>
    <div class="col-3">2</div>
    <div class="col-3">3</div>
</div>
<hr>


</body>
</html>

overflow-x overflow-y

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        body {
            font-family: 微软雅黑;
            font-size: 14px;
        }

        #view {
            display: inline-block;
            width: 160px;
            height: 160px;
            background-color: #F1F1F1;
            border: 1px solid gray;
            overflow-x: visible;
        }

        #circle {
            width: 200px;
            height: 200px;
            background-color: Red;
            border-radius: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            var oRadio = document.getElementsByName("group");
            var oDiv = document.getElementById("view");
            for (var i = 0; i < oRadio.length; i++) {
                oRadio[i].onclick = function () {
                    if (this.checked) {
                        oDiv.style.overflowX = this.value;// overflow-x 等于 选中单选框的value
                    }
                }
            }
        }
    </script>
</head>
<body>
<!--
25.4 overflow-x和overflow-y

        在CSS2.1中，我们可以使用overflow属性来定义内容超出元素大小时应该如何处理。
        而在CSS3中又新增了overflow-x和overflow-y这两个属性。
            overflow-x属性用来定义内容超出元素“宽度”时应该如何处理，
            overflow-y属性用来定义内容超出元素“高度”时应该如何处理。


        overflow-x: 取值;
        overflow-y: 取值;
            visible	内容超出时，不剪切内容，也不添加滚动条
            hidden	内容超出时，剪切内容，但隐藏 x 或 y滚动条
            scroll	内容超出时，显示所有滚动条
            auto	跟scroll效果一样
-->
<div id="select">
    <h3>overflow-X取值：</h3>
    <input id="ckb1" name="group" type="radio" value="visible" checked="checked"/><label for="ckb1">visible</label>
    <input id="ckb2" name="group" type="radio" value="hidden"/><label for="ckb2">hidden</label>
    <input id="ckb3" name="group" type="radio" value="scroll"/><label for="ckb3">scroll</label>
    <input id="ckb4" name="group" type="radio" value="auto"/><label for="ckb4">auto</label>
</div>
<div id="view">
    <div id="circle"></div>
</div>
<pre>
    
    
    
    
    
            visible	内容超出时，不剪切内容，也不添加滚动条
            hidden	内容超出时，剪切内容，但隐藏滚动条
            scroll	内容超出时，显示所有滚动条
            auto	跟scroll效果一样
</pre>
</body>
</html>

pointer-events 禁用鼠标点击

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .disable {
            pointer-events: none;
            color: #666666;
        }
    </style>
    <script>
        window.onload = function () {
            var oA = document.getElementsByTagName("a")[0];
            oA.onclick = function () {
                this.className = "disable";
                setTimeout(function () {
                    oA.removeAttribute("class");
                }, 3000);
            }
        }
    </script>
</head>
<body>
<!--
25.5 pointer-events属性
            
            下面介绍一个前端的“黑科技”——pointer-events属性。
            在CSS3中，我们可以使用pointer-events属性来定义元素是否禁用鼠标单击事件。
            pointer-events属性是一个与JavaScript有关的属性。
            
            
            pointer-events: 取值;
                auto	不禁用鼠标单击事件（默认值）
                none	禁用鼠标单击事件
            
            
            
            在实际开发中，我们可以使用pointer-events: none;来禁用元素的鼠标单击事件，比较常见的用法是获取验证码。
            当用户单击【获取验证码】按钮后，一般需要等待60秒才能再次单击【重发验证码】按钮。
-->
<a href="javascript:;">发送验证码</a>

</body>
</html>

总结

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
<!--

如果你使用的是“从0到1”系列，那么下面是推荐的学习顺序：
    《HTML+CSS快速上手》
        →《CSS进阶之旅》
            →《JavaScript快速上手》
                →《jQuery快速上手》
                    →《HTML5+CSS3修炼之道》
                        →《HTML5 Canvas动画开发》
                            →未完待续

    我现在要不要学下一个 《HTML5 Canvas动画开发》，还是直接学 vue系列呢。
    先看一眼，不太行，就去学vue。




    ![附录A HTML5新增元素](https://img-blog.csdnimg.cn/92d94b57c1554616b1592edccde3f39b.png)
    ![附录B CSS3新增选择器](https://img-blog.csdnimg.cn/d1b551e252404169a0812e153510a26e.png)
    ![附录C CSS3新增属性](https://img-blog.csdnimg.cn/24810346e1fa41078b19a613e9540d51.png)

    【日期标记】2023-06-29 07:58:42 以上同步完成
-->
</body>
</html>