如果说HTML专注与内容，那么CSS就是网页的样式集合。这是一种分层设计的思想。

1. 语法

selector {property: value;}
即选择器 {属性：值}(代码放在style标签里)

学习CSS即学习有哪些选择器，哪些属性以及可以使用什么样的值。

当CSS中要调整的格式太多时，把CSS写在HTML中就比较臃肿而且不易管理了。将它独立成CSS文件，就不用将它装进style标签里了。

2. 练习01

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
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
/* 设置默认格式：14像素，灰色，占据空间的50% */
body {
    font-size: 14px;
    color: gray;
    width: 50%;
}

/* 设置边框属性：下边框1ps，实线，粉色 */
div.border {
    border-bottom: 1px solid pink;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

/* 设置标题属性：16px，加粗，绿色 */
span.title {
    font: normal bold 16px "default";
    color: #B0D0A0;
}

/* 向左浮动 */
.fl {
    float: left;
}

/* 向右浮动 */
.fr {
    float: right;
}

/* 设置头像属性：向左浮动，外边框向右10px，高300px */
div.leftblock {
    float: left;
    margin-right: 10px;
    height: 300px;
}

/* 设置头像下方背景：内边距5px */
div.background_img {
    background-image: url(5.png);
    padding: 5px;
}

/* 设置超链属性：无下划线，蓝色，内边框左侧10px */
a {
    text-decoration: none;
    color: skyblue;
    padding-left: 10px;
}

/* 设置文字属性：10像素，红色 */
p.p1 {
    font: normal 10px "default";
    color: red;
}

/* 设置文字属性：加粗，14像素，蓝色 */
p.p2 {
    font: normal bold 14px "default";
    color: lightskyblue;
}

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
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div class="border">
            <span class="title">
                <img src="1.png" alt="" style="margin-right: 10px;">最新动态
            </span>
            <span class="fr">
                <img src="2.png" alt="" style="margin-right: 10px;">设置
            </span>
        </div>
        <div class="border">
            <div class="leftblock">
                <img src="4.png" alt="" class="fl">
                <br><br><br>
                <div class="background_img">6551</div>
            </div>

            <div>
                <img src="3.png" alt="" class="fr">
                <p class="p1">热门回答，来自 机械 <a href="">关注话题</a></p>
                <p class="p2">人类史上令人叹为观止的极限精度制造成果有哪些？</p>
                <p><strong>Vincent Fu，</strong>Materials Science，PhD</p>
            </div>

            <div>
                <img src="6.png" alt="" class="fl" style="margin-right: 10px;">
                <p>
                    说到精度，就不得不在材料学中最重要的一个方面：表征。该项研究一种材料性能，
                    握在手里把玩是远远不够的，就算你拿出放大镜离近了看，也只能看到表面的一些
                    坑坑洼洼，而为了知晓一种材料的纤维结构，科学家至少要下到纳米级（放大千倍），
                    如果要获得更深... <a href="">显示全部</a>
                </p>
            </div>

            <br><br>
            <div class="p1" style="color: lightGray;">
                <img src="7.png" alt="">
                <span>关注问题</span>
                <img src="8.png" alt="">
                <span>867条评论</span>
                <img src="9.png" alt="">
                <span>作者保留权利</span>
            </div>
        </div>
    </body>
</html>

  1. <link rel="stylesheet" href="style.css" type="text/css">关联同路径下的CSS文件
  2. 设置默认格式 body {property: value;}
  3. 需要设置格式的地方定义好class，设置对应的格式
  4. border-bottom 底部边框 宽度(像素表示) 样式(solid dotted dashed double)
  5. font 字体格式 大小 风格 字体 字库 ex: font: normal(非斜体) bold(加粗) 15px(大小) “default”(字库); (记得按顺序)
  6. float 浮动 文字、图片移动到域的最左边或最右边，可以利用它实现文字围绕图片的效果。
  7. color 颜色 16进制颜色
  8. text-decoration 文本修饰 overline(上划线) line-through(删除线) underline(下划线) none(无)
  9. background-img: url(图片路径) 设置图片为背景。
  10. 盒子模型

整个元素的总宽度应该是width + padding 2 + border 2 +margin * 2，高度同理

2. 练习02

分层设计的思想十分重要！每一个区域都可以单独成一个元素，元素的嵌套就构成了复杂的网页结构。

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
/* 设置默认格式：背景颜色棕色 */
div.fond {
    background-color: #333333;
    width: 800px;
    height: 550px;
}

/* 设置黑色背景 */
.background_dark {
    background-color: #11141B;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

div.boldwhite {
    font-style: bold;
    color: white;
    text-align: center;
    font-size: 15px;
    margin: 10px;
    margin-bottom: 15px;
}

.white {
    font-size: 10px;
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
}

.gold {
    font-size: 10px;
    font-weight: bold;
    color: #FF9100;
    text-align: left;
}

.gold1 {
    font-size: 10px;
    color: #FF9100;
    text-align: center;
}

span.option {
    margin-right: 15px;
    font-size: 10px;
}

div.border {
    border-top-style: dashed;
    border-color: #666666;
    border-width: 1;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 5px;
}

.image {
    border-color: #666666;
    border-style: solid;
    border-width: thin;
}
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
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div class="fond">
            <div class="background_dark fl" style="padding-bottom:10px;">
                <div class="boldwhite">英雄资料</div>

                <div style="margin-left: 10px;" class="white">
                    <span class="option"><input type="checkbox"> 坦克 </span>
                    <span class="option"><input type="checkbox"> 法师 </span>
                    <span class="option"><input type="checkbox"> 刺客 </span>
                </div> 
                <div style="margin-left: 10px;" class="white">
                    <span class="option"><input type="checkbox"> 辅助 </span>
                    <span class="option"><input type="checkbox"> 新手 </span>
                    <span class="option"><input type="checkbox"> 近战 </span>
                </div>
                <div style="margin-left: 10px;" class="white">
                    <span class="option"><input type="checkbox"> 远程 </span>
                    <span class="option"><input type="checkbox"> 推进 </span>
                    <span class="option"><input type="checkbox"> 打野 </span>
                </div>
                <div style="margin-left: 10px;" class="white">
                    <span class="option"><input type="checkbox"> 后期 </span>
                    <span class="option"><input type="checkbox"> 潜行 </span>
                    <span class="option"><input type="checkbox"> 战士 </span>
                </div>
                
                <div>
                    <div class="gold1" style="margin-left: 15px;margin-top: 15px;">英雄价格：</div>
                    <div class="border">
                        <div style="margin-left: 10px;" class="white">
                            <span class="option"><input type="checkbox"> 6300 </span>
                            <span class="option"><input type="checkbox"> 4800 </span>
                            <span class="option"><input type="checkbox"> 3150 </span>
                        </div>
                        <div style="margin-left: 10px;" class="white">
                            <span class="option"><input type="checkbox"> 1350 </span>
                            <span class="option"><input type="checkbox"> 450 </span>
                        </div> 
                    </div>
                </div>

                <div>
                    <div class="boldwhite" style="margin-top: 20px;margin-bottom: 20px;">物品资料</div>

                    <div style="margin-left: 10px;" class="white">
                        <span class="option"><input type="checkbox"> 生命值 </span>
                        <span class="option" style="margin-left: -10px"><input type="checkbox"> 攻击速度 </span>
                        <span class="option" style="margin-left: -20px"><input type="checkbox"> 护甲穿透 </span>
                    </div>
                    <div style="margin-left: 10px;" class="white">
                        <span class="option"><input type="checkbox"> 暴击 </span>
                        <span class="option"><input type="checkbox"> 法术穿透 </span>
                        <span class="option" style="margin-left: -20px"><input type="checkbox"> 魔法抗性 </span>
                    </div>
                    <div style="margin-left: 10px;" class="white">
                        <span class="option"><input type="checkbox"> 法术伤害 </span>
                        <span class="option" style="margin-left: -20px"><input type="checkbox"> 物理伤害 </span>
                        <span class="option" style="margin-left: -20px"><input type="checkbox"> 消耗品 </span>
                    </div>
                    <div style="margin-left: 10px;" class="white">
                        <span class="option"><input type="checkbox"> 韧性 </span>
                        <span class="option"><input type="checkbox"> 法力值 </span>
                        <span class="option" style="margin-left: -10px"><input type="checkbox"> 生命偷取 </span>
                    </div>
                    <div style="margin-left: 10px;" class="white">
                        <span class="option"><input type="checkbox"> 冷却缩减 </span>
                        <span class="option" style="margin-left: -20px"><input type="checkbox"> 生命回复 </span>
                        <span class="option" style="margin-left: -20px"><input type="checkbox"> 附魔 </span>
                    </div>
                    <div style="margin-left: 10px;" class="white">
                        <span class="option"><input type="checkbox"> 法力回复 </span>
                        <span class="option" style="margin-left: -20px"><input type="checkbox"> 法术吸血 </span>
                        <span class="option" style="margin-left: -20px"><input type="checkbox"> 移动速度 </span>
                    </div>
                    <div style="margin-left: 10px;" class="white">
                        <span class="option"><input type="checkbox"> 护甲值 </span>
                    </div>

                </div> 

                <div>
                    <div class="boldwhite" style="margin-top: 25px;margin-bottom: 25px;">符文资料</div>
                </div>

            </div>

            <table class="background_dark" align="right" style="margin-right: 5px;">
                <tr>
                    <td style="padding: 8px;"><img src="0.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="1.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="2.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="3.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="4.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="5.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="6.jpg" alt="" class="image" width="60" height="60"></td>
                </tr>
                <tr>
                    <td ><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿里斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                </tr>
                <tr style="margin: 10px;">
                    <td style="padding: 8px;"><img src="7.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="8.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="9.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="10.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="11.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="12.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="13.jpg" alt="" class="image" width="60" height="60"></td>
                </tr>
                <tr>
                    <td ><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿里斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                </tr>
                <tr>
                    <td style="padding: 8px;"><img src="14.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="15.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="16.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="17.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="18.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="19.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="20.jpg" alt="" class="image" width="60" height="60"></td>
                </tr>
                <tr>
                    <td ><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿里斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                </tr>
                <tr>
                    <td style="padding: 8px;"><img src="21.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="22.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="23.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="24.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="25.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="26.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="27.jpg" alt="" class="image" width="60" height="60"></td>
                </tr>
                <tr>
                    <td ><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿里斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                </tr>
                <tr>
                    <td style="padding: 8px;"><img src="28.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="29.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="30.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="31.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="32.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="33.jpg" alt="" class="image" width="60" height="60"></td>
                    <td style="padding: 8px;"><img src="34.jpg" alt="" class="image" width="60" height="60"></td>
                </tr>
                <tr>
                    <td ><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿里斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                    <td><div class="gold1">牛头酋长</div>
                        <div class="gold1">阿利斯塔</div></td>
                </tr>
            </table>
            
        </div>
    </body>
</html>

设置整个网页背景颜色遇到的问题。表格字间距的问题。

  1. 在设置整个网页背景颜色时，如果定义在body标签中，那么背景颜色始终都充满整个页面，调整宽度和高度也无效；需要重新设定class，设置宽度、高度和背景颜色。
  2. 设定表格字间距时，不用设置padding。。。当时复制的太high了，找这个错误找了很久😭（可以将两种格式单独提取到css文件中方便调用和管理。）

3. 练习03

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
/* 设置布局属性：居中 宽度 高度 */
div.layout {
    width: 700px;
    height: 600px;
    padding: 20px;
    margin: auto;
}

div.border {
    border-color: lightblue;
    border-width: 2px;
    border-style: solid;
    width: 610px;
    height: 480px;
    padding-bottom: 30px;
}

.title {
    background-color: lightblue;
    font-size: 15px;
    color: steelblue;
    text-align: left;
    font-weight: bold;
    margin: 2px;
}

.p {
    font-size: 12px;
    letter-spacing: 1px;
}

.red {
    font-size: 12px;
    color: red;
    letter-spacing: 1px;
}

input {
    background-color: ghostwhite;
    color: lightgray;
    width: 120px;
    margin-top: 2px;
    margin-bottom: 5px;
}

.one {
    width: 20%;
}

.two {
    width: 20%;
}

.thr {
    width: 60%;
}

table{
    width:100%;
    border-bottom:2px solid lightcyan;
    margin:1px;
    padding:1px;
}

td{
    height:90px;
    padding:6px;
    margin:2px;
}

a {
    font-size: 11px;
    letter-spacing: 1.5px;
}

td.background {
    background-color: whitesmoke;
    width: 330px;
}
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
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div class="layout">
            <div class="red" style="margin-top: 8px;margin-bottom: 2px;">请注意：带有“*”的项目必须填写</div>

            <div class="border">
                <div class="title">填写您的用户名：</div>
                <table>
                    <tr>
                        <td class="one">
                            <span class="red">*</span><span class="p">通行证用户名：</span>
                        </td>
                        <td class="two">
                            <input type="text" value="请输入用户名">
                            <div><a href="">查看用户名是否被占用</a></div>
                        </td>
                        <td class="thr background p">
                            用户名由a~z的英文字母（不区分大小写）、0~9的数字、<strong>点、减号</strong>或<strong>下划线</strong>组成，长度为3~18个字符，只能以数字或者字母开头和结尾，例如：kyzy_001.
                        </td>
                    </tr>
                </table>
                <div class="title">
                    请填写安全设置： <span style="font-size: small;font-weight: normal;">（安全设置用于验证账号和找回密码）</span>
                </div>
                <div class="red" style="margin-top: 10px;">以下信息对保证您账号的安全极为重要，请您务必认真填写.</div>
                <table>
                    <tr>
                        <td class="one">
                            <span class="red">*</span><span class="p">输入登录密码：</span>
                            <br>
                            <span class="red">*</span><span class="p">登录密码确认：</span>
                        </td>
                        <td class="two">
                            <input type="text"><br>
                            <input type="text">
                        </td>
                        <td class="thr background p">
                            密码长度为6~16位，区分字母大小写，登录密码可以由字母、数字、特殊字符组成.【<a href="">更多说明</a>】
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td class="one">
                            <span class="red">*</span><span class="p">密码提示问题：</span>
                            <br>
                            <span class="red">*</span><span class="p">密码提示答案：</span>
                        </td>
                        <td class="two">
                            <input type="text"><br>
                            <input type="text">
                        </td>
                        <td class="thr background p">
                            当您忘记密码时可以由找回密码.例如，问题是“我的哥哥是谁”，答案为“peter2”.问题长度<strong>不大于36</strong>个字符，一个汉字占两个字符，答案长度在6~30位之间，区分大小写.【<a href="">更多说明</a>】
                        </td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td class="one">
                            <span class="red">*</span><span class="p">输入安全码：</span>
                            <br>
                            <span class="red">*</span><span class="p">安全码确认：</span>
                        </td>
                        <td class="two">
                            <input type="text"><br>
                            <input type="text">
                        </td>
                        <td class="thr background p">
                            安全码是您找回密码的重要途径，安全码长度为6~16位，区分字母大小写，由字母，数字特殊字符组成. <span class="red">特别提醒：安全码一旦设定，将不可自行修改.</span> 【<a href="">更多说明</a>】
                        </td>
                    </tr>
                </table>
                <center><input style="margin:10px;" type="button" value="提 交 表 单"></center>
            </div>
        </div>
    </body>
</html>
  1. center标签居中元素。

4. 参考