列表的实现方式
- 事实上现在很多的列表功能采用了不同的方案来实现:
- 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
- 方案二: 使用列表元素, 使用元素语义化的方式实现;
- 事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局:
- 原因是列表元素默认的CSS样式, 让它用起来不是非常方便;
- 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等;
- 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div;
- HTML提供了3组常用的用来展示列表的元素
- 有序列表：ol、li
- 无序列表：ul、li
- 定义列表：dl、dt、dd
有序列表 – ol – li
- ol（ordered list）
- li（list item）
无序列表 – ul - li
- ul（unordered list）
- li（list item）
列表的练习
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
ul > li {
margin-top: 16px;
}
ul > li a {
display: inline-block;;
}
ul > li a:hover {
color: #f04142;
}
ul > li a span {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-weight: 700;
color: #999;
}
ul > li:nth-child(1) span {
color: #a82e2e;
}
ul > li:nth-child(2) span {
color: #f04142;
}
ul > li:nth-child(3) span {
color: #ff9a03;
}
i.item {
position: relative;
top: 2px;
left: 5px;
display: inline-block;
width: 16px;
height: 16px;
}
i.hot {
background-image: url("https://lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/hot.92a15c5e.svg");
}
i.new {
background-image: url("https://lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/new.b7973b24.svg");
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">
<span>1</span>
美方工作小组抵华参与东航事故调查
<i class="item hot"></i>
</a>
</li>
<li>
<a href="#">
<span>2</span>
美方工作小组抵华参与东航事故调查
</a>
</li>
<li>
<a href="#">
<span>3</span>
美方工作小组抵华参与东航事故调查
<i class="item hot"></i>
</a>
</li>
<li>
<a href="#">
<span>4</span>
美方工作小组抵华参与东航事故调查
<i class="item hot"></i>
</a>
</li>
<li>
<a href="#">
<span>5</span>
美方工作小组抵华参与东航事故调查
</a>
</li>
<li>
<a href="#">
<span>6</span>
美方工作小组抵华参与东航事故调查
</a>
</li>
<li>
<a href="#">
<span>7</span>
美方工作小组抵华参与东航事故调查
<i class="item new"></i>
</a>
</li>
</ul>
</body>
</html>
|
表格常见的元素
- 编写表格最常见的是下面的元素:
- table表格
- tr(table row) 表格中的行
- td(table data)行中的单元格
- 需要用到一个非常重要的属性:
- border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。
- table { border-collapse: collapse; }
- 合并单元格的边框
- thead表格的表头
- tbody 表格的主体
- tfoot 表格的页脚
- caption 表格的标题
- th 表格的表头单元格
如何使用单元格合并呢
- 单元格合并分成两种情况:
- 跨列合并: 使用colspan
- ✓ 在最左边的单元格写上colspan属性, 并且省略掉合并的td;
- 跨行合并: 使用rowspan
- ✓ 在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;
表格练习
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table tr:nth-child(1) {
font-weight: 700;
font-size: 20px;
}
table tr:nth-child(2) {
font-weight: 700;
font-size: 18px;
}
table tr td[rowspan], table tr td[colspan] {
font-weight: 700;
font-size: 18px;
}
table tr td {
width: 120px;
height: 36px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="6">课程表</td>
</tr>
<tr>
<td></td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td rowspan="2">晚自习</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
</table>
</body>
</html>
|
常见的表单元素
- form 表单, 一般情况下，其他表单相关元素都是它的后代元素
- input 单行文本输入框、单选框、复选框、按钮等元素
- textarea 多行文本框
- select、option 下拉选择框
- button 按钮
- label 表单元素的标题
https://developer.mozilla.org/zhCN/docs/Web/HTML/Element/Input
布尔属性（boolean attributes）
- 常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
- 布尔属性可以没有属性值，写上属性名就代表使用这个属性
表单按钮
- 表单可以实现按钮效果:
- 普通按钮（type=button）：使用value属性设置按钮文字
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
- 我们也可以通过按钮来实现:
- label元素一般跟input配合使用，用来表示input的标题
- labe可以跟某个input绑定，点击label就可以激活对应的input变成选中
radio的使用
- 我们可以将type类型设置为radio变成单选框:
checkbox的使用
- 我们可以将type类型设置为checkbox变成多选框:
- 属于同一种类型的checkbox，name值要保持一致
textarea的使用
- textarea的常用属性:
- 缩放的CSS设置
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both;
select和option的使用
- option是select的子元素，一个option代表一个选项
- select常用属性
- option常用属性
- form通常作为表单元素的父元素:
- form可以将整个表单作为一个整体来进行操作;
- 比如对整个表单进行重置;
- 比如对整个表单的数据进行提交;
- form常见的属性如下:
- action
- method
- target
