-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-block-layout.html
61 lines (59 loc) · 2.12 KB
/
css-block-layout.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
<!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">
<link rel="stylesheet" href="./css-block-layout.css">
<title>css-block-layout</title>
</head>
<body>
<div class="header">
<p>hello world 请调整浏览器窗口大小查看效果hello world 请调整浏览器窗口大小查看效果hello world 请调整浏览器窗口大小查看效果hello world 请调整浏览器窗口大小查看效果hello world 请调整浏览器窗口大小查看效果hello world 请调整浏览器窗口大小查看效果</p>
</div>
<div class="contant">
<p>页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px</p>
<div class="chanpin">
<div>宽180高40（包含边框）</div>
<div>产品</div>
<div>产品</div>
<div>水平间隙30px</div>
<div>产品</div>
<div>产品</div>
<div>垂直间隙15px</div>
<div>产品</div>
<div>产品</div>
<div>边框宽度3px</div>
<div>产品</div>
<div>产品</div>
</div>
<div class="chanpin2">
<span>产品</span>
<span>产品</span>
<span>产品</span>
</div>
<div class="chanpin3">
<span>产品</span>
<span>产品</span>
<span>产品</span>
</div>
<div class="chanpin4">
<span>产品</span>
<span>产品</span>
<span>产品</span>
</div>
<div class="link">
<div>link</div>
<div>link</div>
<div>link</div>
<div>link</div>
<div>link</div>
</div>
</div>
<div class="bottom">
<div>©版权所有</div>
<div>本页所有布局均使用块元素</div>
</div>
</body>
</body>
</html>