佈局
Index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>佈局</title>
<link href="Test.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="divIndex">
<!--Logo-->
<div class="divLogo"></div>
<!--導航-->
<div class="divNav"></div>
</div>
</body>
</html>
Tes.CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
* { /*星號代表整個網頁所有的元素*/
margin:0px; /* 置頂 (div與網頁之間0間距)*/
}
div.divIndex {
height:1200px;
width:800px;
background-color:yellow;
margin: 0px auto; /*居中(上下|左右)*/
}
div.divLogo {
width:800px;
height:110px;
background-color:blue;
}
div.divNav { /*導航*/
width:800px;
height:30px;
background-color:pink;
}
導航
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>導航</title>
<style type="text/css">
* {
margin: 0px auto; /*置頂居中(上下|左右)*/
}
div {
background-color:yellow;
height:30px;
width:800px;
margin:0px auto; /*置頂居中(上下|左右)*/
}
ul li { /* 這一行要呈現的樣式*/
float:left; /*讓列表飄浮起來向左 呈現水平*/
list-style:none; /*把圓點取消掉*/
width:150px; /*讓他們彼此間有間啖，設寬度*/
line-height:30px; /*讓導航的字下來一點*/
}
a:hover { /*游標移上來的時候*/
font-size: large; /*字體變大*/
background-color:pink;
}
</style>
</head>
<body>
<div class="divNav">
<ul>
<li><a href="#">公司簡介</a></li>
<li><a href="#">企業文化</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">交易大廳</a></li>
<li><a href="#">聯繫我們</a></li>
</ul>
</div>
</body>
</html>