-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss-block-layout.html
54 lines (52 loc) · 1.37 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
main {
width: 600px;
margin: auto;
}
ul.wrapper{
display: inline-grid;
grid-template-columns: 180px 180px 180px;
grid-template-rows: 40px 40px 40px 40px;
grid-column-gap: 30px;
grid-row-gap: 15px;
padding-inline-start: 0px;
}
ul.wrapper li {
border: 3px solid;
list-style: none;
box-sizing: border-box;
text-align: center;
background-color: pink;
}
</style>
</head>
<body>
<header>
</header>
<main>
<p>
页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px 页面主体 宽度600px
</p>
<ul class="wrapper">
<li>宽180高40(包含边框)</li>
<li>产品</li>
<li>产品</li>
<li>水平间隙30px</li>
<li>产品</li>
<li>产品</li>
<li>垂直间隙15px</li>
<li>产品</li>
<li>产品</li>
<li>边框宽度3px</li>
<li>产品</li>
<li>产品</li>
</ul>
</main>
</body>
</html>