Fork me on GitHub

前端基本布局


两列布局

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
<!DOCTYPE html>
<html>
<head>
<title>两列布局</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
border: 0px;
}
body,html{
width:100%;
}

#zuo{
width: 400px;
height: 600px;
background-color: #960;
float: left;
}
#you{
height: 600px;
background-color: #0FC;
}
</style>
</head>
<body>
<div id="zuo"></div>
<div id="you"></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
<!DOCTYPE html>
<html>
<head>
<title>两列自适应居中</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
border: 0px;
}
body,html{
width:100%;
}

#zuo{
width: 30%;
height: 600px;
background-color: #960;
float: left;
}
#you{
width: 70%;
height: 600px;
background-color: #0FC;
float: left;
}
</style>
</head>
<body>
<div id="zuo"></div>
<div id="you"></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
<!DOCTYPE html>
<html>
<head>
<title>三列布局中间自适应</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
border: 0px;
}

html,body{
height: 100%;
width: 100%;
}

#zuo{
width: 200px;
height: 100%;
background-color: #960;
position: absolute;
top: 0px;
left: 0px;
}

#you{
width: 200px;
height: 100%;
background-color: #960;
position: absolute;
top: 0px;
right: 0px;
}

#ong{
height: 100%;
background-color: #0FC;
margin-left: 200px;
margin-right: 200px;
}
</style>
</head>
<body>
<div id="zuo"></div>
<div id="ong"></div>
<div id="you"></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
<!DOCTYPE html>
<html>
<head>
<title>复杂页面排版</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
border: 0px;
}
#box{
height: 1330px;
width: 950px;
margin: auto;
}
#hen{
height: 245px;
width: 950px;
background-color: #963;
}
#zuo{
height: 915px;
width: 386px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #C30;
float: left;
}
#xia1{
height: 540px;
width: 272px;
margin-top: 10px;
margin-left: 10px;
background-color: #099;
float: left;
}
#xia2{
height: 540px;
width: 272px;
margin-top: 10px;
margin-left: 10px;
background-color: #099;
float: left;
}
#xia3{
height: 365px;
width: 554px;
margin-top: 10px;
background-color: #C66;
float: right;
}
#dib{
height: 150px;
width: 950px;
margin-top: 10px;
background-color: #639;
clear: both
}
</style>
</head>
<body>
<div id="box">
<div id="hen"></div>
<div id="zuo"></div>
<div id="xia1"></div>
<div id="xia2"></div>
<div id="xia3"></div>
<div id="dib"></div>
</div>
</body>
</html>

效果图为:

这里写图片描述


坚持原创技术分享,您的支持将鼓励我继续创作
-------------本文结束感谢您的阅读-------------
0%