Skip to content

Commit a071bd9

Browse files
author
liujintong
committed
feat:add ch6
1 parent 21b0f88 commit a071bd9

13 files changed

+859
-0
lines changed

‎ch6/6-10 网格布局紧凑算法.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
:root {
10+
box-sizing: border-box;
11+
}
12+
13+
*,
14+
::before,
15+
::after {
16+
box-sizing: inherit;
17+
}
18+
19+
body {
20+
background-color: #709b90;
21+
font-family: Arial, Helvetica, sans-serif;
22+
}
23+
24+
.portfolio {
25+
display: grid;
26+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
27+
grid-auto-rows: 1fr;
28+
grid-gap: 1em;
29+
grid-auto-flow: dense;
30+
}
31+
32+
.portfolio>figure {
33+
display: flex;
34+
flex-direction: column;
35+
margin: 0;
36+
}
37+
38+
.portfolio img {
39+
flex: 1;
40+
object-fit: cover;
41+
max-width: 100%;
42+
}
43+
44+
.portfolio figcaption {
45+
padding: .3em .8em;
46+
background-color: rgba(0, 0, 0, 0.5);
47+
color: #fff;
48+
text-align: right;
49+
}
50+
51+
.portfolio .featured {
52+
grid-row: span 2;
53+
grid-column: span 2;
54+
}
55+
</style>
56+
</head>
57+
58+
<body>
59+
<div class="portfolio">
60+
<figure class="featured">
61+
<img src="images/monkey.jpg" alt="monkey" />
62+
<figcaption>Monkey</figcaption>
63+
</figure>
64+
<figure>
65+
<img src="images/eagle.jpg" alt="eagle" />
66+
<figcaption>Eagle</figcaption>
67+
</figure>
68+
<figure class="featured">
69+
<img src="images/bird.jpg" alt="bird" />
70+
<figcaption>Bird</figcaption>
71+
</figure>
72+
<figure>
73+
<img src="images/bear.jpg" alt="bear" />
74+
<figcaption>Bear</figcaption>
75+
</figure>
76+
<figure class="featured">
77+
<img src="images/swan.jpg" alt="swan" />
78+
<figcaption>Swan</figcaption>
79+
</figure>
80+
<figure>
81+
<img src="images/elephants.jpg" alt="elephants" />
82+
<figcaption>Elephants</figcaption>
83+
</figure>
84+
<figure>
85+
<img src="images/owl.jpg" alt="owl" />
86+
<figcaption>Owl</figcaption>
87+
</figure>
88+
</div>
89+
</body>
90+
91+
</html>

‎ch6/6-2 基础网格布局.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
.grid {
10+
display: grid;
11+
grid-template-columns: repeat(3, 1fr);
12+
grid-template-rows: repeat(2, 1fr);
13+
grid-gap: 0.5em;
14+
}
15+
16+
.grid>.grid-item {
17+
background-color: darkgray;
18+
color: white;
19+
padding: 2em;
20+
border-radius: 0.5em;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<div class="grid">
27+
<div class="grid-item">a</div>
28+
<div class="grid-item">b</div>
29+
<div class="grid-item">c</div>
30+
<div class="grid-item">d</div>
31+
<div class="grid-item">e</div>
32+
<div class="grid-item">f</div>
33+
</div>
34+
</body>
35+
36+
</html>

‎ch6/6-3 网格布局结构.html

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<style>
9+
:root {
10+
box-sizing: border-box;
11+
}
12+
13+
*,
14+
::before,
15+
::after {
16+
box-sizing: inherit;
17+
}
18+
19+
body {
20+
background-color: #709b90;
21+
font-family: Arial, Helvetica, sans-serif;
22+
}
23+
24+
.container {
25+
display: grid;
26+
grid-template-columns: 2fr 1fr;
27+
grid-template-rows: repeat(4, auto);
28+
grid-gap: 1.5em;
29+
max-width: 1080px;
30+
margin: 0 auto;
31+
}
32+
33+
header,
34+
nav {
35+
grid-column: 1 / 3;
36+
grid-row: span 1;
37+
}
38+
39+
.main {
40+
grid-column: 1 / 2;
41+
grid-row: 3 / 5;
42+
}
43+
44+
.sidebar-top {
45+
grid-column: 2 / 3;
46+
grid-row: 3 / 4;
47+
}
48+
49+
.sidebar-bottom {
50+
grid-column: 2 / 3;
51+
grid-row: 4 / 5;
52+
}
53+
54+
.page-heading {
55+
margin: 0;
56+
}
57+
58+
.site-nav {
59+
display: flex;
60+
margin: 0;
61+
padding: .5em;
62+
background-color: #5f4b44;
63+
list-style-type: none;
64+
border-radius: .2em;
65+
}
66+
67+
.site-nav > li {
68+
margin-top: 0;
69+
}
70+
71+
.site-nav>li>a {
72+
display: block;
73+
padding: .5em 1em;
74+
width: 6em;
75+
text-align: center;
76+
border-radius: .2em;
77+
background-color: #cc6b5a;
78+
color: white;
79+
text-decoration: none;
80+
}
81+
82+
.site-nav > li+li {
83+
margin-left: 1.5em;
84+
}
85+
86+
.site-nav > .nav-right {
87+
margin-left: auto;
88+
}
89+
90+
.tile {
91+
padding: 1.5em;
92+
background-color: #fff;
93+
}
94+
95+
.tile> :first-child {
96+
margin-top: 0;
97+
}
98+
99+
.tile *+* {
100+
margin-top: 1.5em;
101+
}
102+
103+
.login-form h3 {
104+
margin-top: 0;
105+
font-size: .9em;
106+
font-weight: bold;
107+
text-align: right;
108+
text-transform: uppercase;
109+
}
110+
111+
.login-form input:not([type=checkbox]):not([type=radio]) {
112+
display: block;
113+
margin-top: 0;
114+
width: 100%;
115+
}
116+
117+
.login-form button {
118+
margin-top: 1em;
119+
border: 1px solid #cc6b5a;
120+
background-color: white;
121+
padding: .5em 1em;
122+
cursor: pointer;
123+
}
124+
125+
.centered {
126+
text-align: center;
127+
}
128+
129+
.cost {
130+
display: flex;
131+
justify-content: center;
132+
align-items: center;
133+
line-height: .7;
134+
}
135+
136+
.cost> span {
137+
margin-top: 0;
138+
}
139+
140+
.cost-currency {
141+
font-size: 2rem;
142+
}
143+
144+
.cost-dollars {
145+
font-size: 4rem;
146+
}
147+
.cost-cents {
148+
font-size: 1.5rem;
149+
align-self: flex-start;
150+
}
151+
152+
.cta-button {
153+
display: block;
154+
padding: .5em 1em;
155+
border-radius: .2em;
156+
background-color: #cc6b5a;
157+
color: white;
158+
text-decoration: none;
159+
}
160+
</style>
161+
</head>
162+
163+
<body>
164+
<div class="container">
165+
<header>
166+
<h1 class="page-heading">Ink</h1>
167+
</header>
168+
<nav>
169+
<ul class="site-nav">
170+
<li><a href="/">Home</a></li>
171+
<li><a href="/features">Features</a></li>
172+
<li><a href="/pricing">Pricing</a></li>
173+
<li><a href="/support">Support</a></li>
174+
<li class="nav-right">
175+
<a href="/about">About</a>
176+
</li>
177+
</ul>
178+
</nav>
179+
<main class="main tile">
180+
<h1>Team collaboration done right</h1>
181+
<p>Thousands of teams from all over the
182+
world turn to <b>Ink</b> to communicate
183+
and get things done.</p>
184+
</main>
185+
<div class="sidebar-top tile">
186+
<form class="login-form">
187+
<h3>Login</h3>
188+
<p>
189+
<label for="username">Username</label>
190+
<input id="username" type="text" name="username" />
191+
</p>
192+
<p>
193+
<label for="password">Password</label>
194+
<input id="password" type="password" name="password" />
195+
</p>
196+
<button type="submit">Login</button>
197+
</form>
198+
</div>
199+
<div class="sidebar-bottom tile centered">
200+
<small>Starting at</small>
201+
<div class="cost">
202+
<span class="cost-currency">$</span>
203+
<span class="cost-dollars">20</span>
204+
<span class="cost-cents">.00</span>
205+
</div>
206+
<a class="cta-button" href="/pricing">
207+
Sign up
208+
</a>
209+
</div>
210+
</div>
211+
</body>
212+
213+
</html>

0 commit comments

Comments
 (0)