Skip to content

Commit cfca37b

Browse files
author
liujintong
committed
ch12
1 parent 3933a96 commit cfca37b

File tree

2 files changed

+322
-0
lines changed

2 files changed

+322
-0
lines changed

‎ch12/12-1 link 协作软件.html

Lines changed: 322 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,322 @@
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+
/* 12-2 包括颜色变量的基础样式 */
10+
html {
11+
/* 为每种颜色指定变量 */
12+
--brand-green: #076448;
13+
--dark-green: #099268;
14+
--medium-green: #20c997;
15+
--text-color: #212529;
16+
--gray: #868e96;
17+
--light-gray: #f1f3f5;
18+
--extra-light-gray: #f8f9fa;
19+
--white: #fff;
20+
box-sizing: border-box;
21+
color: var(--text-color);
22+
}
23+
24+
/* 12-6 把十六进制颜色转换成 HSL 值 */
25+
html {
26+
--brand-green: hsl(162, 87%, 21%);
27+
--dark-green: hsl(162, 88%, 30%);
28+
--medium-green: hsl(162, 73%, 46%);
29+
--text-color: hsl(210, 11%, 15%);
30+
--gray: hsl(210, 7%, 56%);
31+
--light-gray: hsl(210, 17%, 95%);
32+
--extra-light-gray: hsl(210, 17%, 98%);
33+
--white: hsl(0, 0%, 100%);
34+
--red: hsl(342, 63%, 46%);
35+
box-sizing: border-box;
36+
color: var(--text-color);
37+
}
38+
39+
/* 12-6 把十六进制颜色转换成 HSL 值 */
40+
41+
*,
42+
::before,
43+
::after {
44+
box-sizing: inherit;
45+
}
46+
47+
body {
48+
margin: 0;
49+
font-family: Arial, Helvetica, sans-serif;
50+
line-height: 1.4;
51+
background-color: var(--extra-light-gray);
52+
}
53+
54+
h1,
55+
h2,
56+
h3,
57+
h4 {
58+
font-family: Georgia, serif;
59+
}
60+
61+
a {
62+
color: var(--medium-green);
63+
}
64+
65+
a:visited {
66+
color: var(--brand-green);
67+
}
68+
69+
a:hover {
70+
color: var(--brand-green);
71+
}
72+
73+
a:active {
74+
color: var(--red);
75+
}
76+
77+
/* 12-10 设置板块和段落间距 */
78+
p {
79+
margin-top: 1.5em;
80+
margin-bottom: 1.5em;
81+
}
82+
83+
/* 12-10 设置板块和段落间距 */
84+
85+
/* 12-2 包括颜色变量的基础样式 */
86+
87+
/* 12-3 头部样式 */
88+
.nav-container {
89+
background-color: var(--medium-green)
90+
}
91+
92+
.nav-container__inner {
93+
/* 使用 justify-content: space-between 将内容置于两端：home-link 在左侧，top-nav 在右侧 */
94+
display: flex;
95+
justify-content: space-between;
96+
align-items: center;
97+
max-width: 1080px;
98+
margin: 0 auto;
99+
/* 12-8 为整个导航条的顶部和底部添加 10px 的内边距 */
100+
padding: 0.625em 0;
101+
}
102+
103+
.home-link {
104+
color: var(--text-color);
105+
font-size: 1.6rem;
106+
font-family: Georgia, 'Times New Roman', Times, serif;
107+
font-weight: bold;
108+
text-decoration: none;
109+
}
110+
111+
.top-nav {
112+
display: flex;
113+
list-style-type: none;
114+
/* 12-8 移除用户代理样式表为列表元素默认添加的外边距 */
115+
margin: 0;
116+
}
117+
118+
/* 12-8 每个导航项之间添加 10px 的水平外边距 */
119+
.top-nav>li+li {
120+
margin-left: 0.625em;
121+
}
122+
123+
.top-nav a {
124+
display: block;
125+
padding: 0.3em 1.25em;
126+
color: var(--white);
127+
background: var(--brand-green);
128+
text-decoration: none;
129+
border-radius: 3px;
130+
}
131+
132+
.top-nav a:hover {
133+
background-color: var(--dark-green);
134+
}
135+
136+
.top-nav__featured>a {
137+
color: var(--brand-green);
138+
background-color: var(--white);
139+
}
140+
141+
.top-nav__featured>a:hover {
142+
color: var(--medium-green);
143+
background-color: var(--white);
144+
}
145+
146+
/* 12-3 头部样式 */
147+
148+
/* 12-4 主图和按钮样式 */
149+
.hero {
150+
background: url(collaboration.jpg) no-repeat;
151+
background-size: cover;
152+
margin-bottom: 2.5rem;
153+
}
154+
155+
.hero__inner {
156+
max-width: 1080px;
157+
margin: 0 auto;
158+
/* padding: 50px 0 200px; */
159+
/* 12-11 使用刚刚计算得到的距离替换之前的估值 */
160+
padding: 5.5625em 12.5em 12.5em 0;
161+
text-align: right;
162+
}
163+
164+
.hero h2 {
165+
font-size: 1.95rem;
166+
/* 12-11 移除上方的外边距，因为 hero__inner 的内边距已经提供了所需的间距 */
167+
margin-top: 0;
168+
/* 12-11 设置标语和按钮之间的间距 */
169+
margin-bottom: 0.625rem;
170+
}
171+
172+
.button {
173+
display: inline-block;
174+
padding: 0.4em 1em;
175+
color: var(--brand-green);
176+
border: 2px solid var(--brand-green);
177+
border-radius: 0.2em;
178+
text-decoration: none;
179+
font-size: 1rem;
180+
}
181+
182+
.button:hover {
183+
background-color: var(--dark-green);
184+
color: var(--white);
185+
}
186+
187+
.button-cta {
188+
padding: 0.6em 1em;
189+
background-color: var(--brand-green);
190+
color: var(--white);
191+
border: none;
192+
}
193+
194+
/* 12-4 主图和按钮样式 */
195+
196+
/* 12-5 三栏和板块样式 */
197+
.container {
198+
margin: 0 auto;
199+
max-width: 1080px;
200+
}
201+
202+
.tile-row {
203+
display: flex;
204+
}
205+
206+
.tile-row>* {
207+
/* 使所有栏等宽 */
208+
flex: 1;
209+
}
210+
211+
/* 12-9 为主图下方和栏目之间添加外边距 */
212+
.tile-row>*+* {
213+
margin-left: 1.5625em;
214+
}
215+
216+
.tile {
217+
background-color: var(--white);
218+
border-radius: 0.3em;
219+
/* 12-10 在板块内部增加内边距 */
220+
padding: 1.5625em;
221+
}
222+
223+
/* 12-10 在板块标题下方添加外边距 */
224+
.tile>h4 {
225+
margin-bottom: 1.5em;
226+
}
227+
228+
/* 12-10 在板块标题下方添加外边距 */
229+
230+
/* 12-12 为标签添加样式 */
231+
.tag-list {
232+
list-style: none;
233+
padding-left: 0;
234+
}
235+
236+
.tag-list>li {
237+
display: inline;
238+
padding: 0.3rem 0.5rem;
239+
font-size: 0.8rem;
240+
border-radius: 0.2rem;
241+
background-color: var(--light-gray);
242+
line-height: 2.6;
243+
}
244+
245+
/* 12-12 为标签添加样式 */
246+
247+
.page-footer {
248+
margin-top: 3em;
249+
padding: 1em 0;
250+
background-color: var(--light-gray);
251+
color: var(--gray);
252+
}
253+
254+
.page-footer__inner {
255+
margin: 0 auto;
256+
max-width: 1080px;
257+
text-align: center;
258+
font-size: 0.8em;
259+
}
260+
261+
/* 12-5 三栏和板块样式 */
262+
</style>
263+
</head>
264+
265+
<body>
266+
<!-- 12-1 页面标记 -->
267+
<nav class="nav-container">
268+
<div class="nav-container__inner">
269+
<a href="/" class="home-link">Link</a>
270+
<ul class="top-nav">
271+
<li><a href="/features">Features</a></li>
272+
<li><a href="/pricing">Pricing</a></li>
273+
<li><a href="/support">Support</a></li>
274+
<li class="top-nav__featured"><a href="/login">Login</a></li>
275+
</ul>
276+
</div>
277+
</nav>
278+
<div class="hero">
279+
<div class="hero__inner">
280+
<h2>Team collaboration done right</h2>
281+
<a href="/sign_up" class="button button-cta">Get started</a>
282+
</div>
283+
</div>
284+
<div class="container">
285+
<div class="tile-row">
286+
<div class="tile">
287+
<h4>Work together, even if you're apart</h4>
288+
<p>Organize your team conversations into threads. Collaborate
289+
together on documents in real-time. Use face-to-face <a href="/features/video-calling">video
290+
calls</a> when typing just won't
291+
do.</p>
292+
<a href="/collaboration" class="button">Read more</a>
293+
</div>
294+
<div class="tile">
295+
<h4>Take it with you</h4>
296+
<p>Ink is available on a wide array of devices, so you can work from
297+
anywhere:</p>
298+
<ul class="tag-list">
299+
<li>Web</li>
300+
<li>iOS</li>
301+
<li>Android</li>
302+
<li>Windows Phone</li>
303+
</ul>
304+
<a href="/supported-devices" class="button">Read more</a>
305+
</div>
306+
<div class="tile">
307+
<h4>Priced right</h4>
308+
<p>Whether you work on a team of three or a three hundred, you'll
309+
find our tiered pricing reasonable at every level.</p>
310+
<a href="/pricing" class="button">Read more</a>
311+
</div>
312+
</div>
313+
</div>
314+
<footer class="page-footer">
315+
<div class="page-footer__inner">
316+
Copyright &copy; 2017 Ink, Inc.
317+
</div>
318+
</footer>
319+
<!-- 12-1 页面标记 -->
320+
</body>
321+
322+
</html>

‎ch12/collaboration.jpg

237 KB
Loading

0 commit comments

Comments
 (0)