大部分網站當中，你看到的每一塊東西，基本上都是div。
練習
Steps:
- 先放一個大div，裡面放一個table
- table的第一行，放一個div當標題
- table的第二行，放一個table呈現內容
- 使用link連結css檔(寫好的css另外存一個檔案)
<link type="text/css" rel="stylesheet" href="Test.css"/>
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Test.css"/>
</head>
<body>
<div class="divIndex">
<table>
<tr>
<td><div class="div1"><p>.Net培訓開班訊息</p></div></td>
</tr>
<tr>
<td>
<table id="divTable">
<tr>
<td colspan="2" class="td1">.Net基礎班</td>
</tr>
<tr>
<td class="td2">台北-2011/07/22</td>
<td class="td3">預約報名中</td>
</tr>
<tr>
<td class="td2">台北-2011/3/22</td>
<td class="td4">爆滿已開班</td>
</tr>
<tr>
<td class="td2">台中-2011/06/22</td>
<td class="td3">預約報名中</td>
</tr>
<tr>
<td class="td2">高雄-2011/5/22</td>
<td class="td4">爆滿已開班</td>
</tr>
<tr>
<td colspan="2" class="td1">.Net就業班</td>
</tr>
<tr>
<td class="td2">台北-2011/07/22</td>
<td class="td3">預約報名中</td>
</tr>
<tr>
<td class="td2">台北-2011/3/22</td>
<td class="td4">爆滿已開班</td>
</tr>
<tr>
<td class="td2">台中-2011/06/22</td>
<td class="td3">預約報名中</td>
</tr>
<tr>
<td class="td2">高雄-2011/5/22</td>
<td class="td4">爆滿已開班</td>
</tr>
<tr>
<td colspan="2" class="td1">.Net遠端班</td>
</tr>
<tr>
<td class="td2">台北-2011/04/12</td>
<td class="td3">基礎班預約報名中</td>
</tr>
<tr>
<td class="td2">台北-2011/5/22</td>
<td class="td3">就業班預約報名中</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS樣式檔
Test.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
* { /* 星號代表所有的元素*/
margin: 0px; /*設置四周無間距*/
font-size: 12px;
}
div.divIndex { /* class選擇器*/
width: 290px;
height: 380px;
background-color: #F8F8F8;
/*float: right;*/ /*讓div飄到右邊*/
margin: 0px auto; /* 上邊下邊 | 左邊右邊 */
}
div.div1 {
width: 290px;
height: 35px;
background-color: blue;
color: white;
text-align: center;
}
div.div1 p {
padding: 8px; /*文字與周邊的間距*/
font-size: 18px;
}
#divTable { /*id選擇器*/
width: 280px;
border: 1px;
}
td.td1 {
font-weight: bolder; /*字體加粗*/
}
td.td2 {
color: #246DB2;
padding: 2px;
border-bottom: 1px dashed #cccccc; /*虛線*/
}
td.td3 {
font-weight: bolder;
color: red;
border-bottom: 1px dashed #cccccc;
text-align: right;
}
td.td4 {
font-weight: bolder;
border-bottom: 1px dashed #cccccc;
text-align: right;
}