Skip to content

Commit adadd72

Browse files
author
liujintong
committed
ch13
1 parent cfca37b commit adadd72

10 files changed

+2120
-0
lines changed

‎ch12/test.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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+
.nav {
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
max-width: 1080px;
14+
margin: 0 auto;
15+
line-height: 2;
16+
color: white;
17+
background-color: green;
18+
}
19+
20+
.nav>h2 {
21+
padding: 0.25em 0.5em;
22+
margin: 0;
23+
background-color: yellowgreen;
24+
}
25+
26+
.nav>ul {
27+
display: flex;
28+
list-style: none;
29+
padding: 0.25em 0.5em;
30+
margin: 0;
31+
}
32+
33+
.nav>ul>li+li {
34+
margin-left: 0.625em;
35+
}
36+
</style>
37+
</head>
38+
39+
<body>
40+
<nav class="nav">
41+
<h2>左青龙</h2>
42+
<ul>
43+
<li>AAAA</li>
44+
<li>AAAA</li>
45+
<li>AAAA</li>
46+
<li>AAAA</li>
47+
</ul>
48+
</nav>
49+
50+
</html>

‎ch13/13-10 使用 Font Face Observer 监测字体加载.html

Lines changed: 315 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,315 @@
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+
<link href="https://fonts.googleapis.com/css?family=Roboto:300|Sansita:800" rel="stylesheet">
9+
<style>
10+
html {
11+
--brand-green: hsl(162, 87%, 21%);
12+
--dark-green: hsl(162, 88%, 30%);
13+
--medium-green: hsl(162, 73%, 46%);
14+
--text-color: hsl(210, 11%, 15%);
15+
--gray: hsl(210, 7%, 56%);
16+
--light-gray: hsl(210, 17%, 95%);
17+
--extra-light-gray: hsl(210, 17%, 98%);
18+
--white: hsl(0, 0%, 100%);
19+
--red: hsl(342, 63%, 46%);
20+
21+
box-sizing: border-box;
22+
color: var(--text-color);
23+
}
24+
25+
*,
26+
*::before,
27+
*::after {
28+
box-sizing: inherit;
29+
}
30+
31+
body {
32+
margin: 0;
33+
/* 对页面全局应用 Roboto 字体 */
34+
font-family: Roboto, sans-serif;
35+
line-height: 1.4;
36+
/* 为字符之间添加 0.01em 的额外间距 */
37+
letter-spacing: 0.01em;
38+
background-color: var(--extra-light-gray);
39+
}
40+
41+
h1,
42+
h2,
43+
h3,
44+
h4 {
45+
/* 设置标题为 Sansita 字体 */
46+
font-family: Sansita, serif;
47+
/* 增加标题字符间距 */
48+
letter-spacing: 0.03em;
49+
}
50+
51+
a {
52+
color: var(--medium-green);
53+
}
54+
55+
a:visited {
56+
color: var(--brand-green);
57+
}
58+
59+
a:hover {
60+
color: var(--brand-green);
61+
}
62+
63+
a:active {
64+
color: var(--red);
65+
}
66+
67+
p {
68+
margin-top: 1.5em;
69+
margin-bottom: 1.5em;
70+
}
71+
72+
.nav-container {
73+
background-color: var(--medium-green);
74+
}
75+
76+
.nav-container__inner {
77+
display: flex;
78+
justify-content: space-between;
79+
/* 把导航容器中的元素对齐到底部 */
80+
align-items: center;
81+
max-width: 1080px;
82+
margin: 0 auto;
83+
padding: 0.625em 0;
84+
}
85+
86+
.home-link {
87+
color: var(--text-color);
88+
font-size: 1.6rem;
89+
font-family: Sansita, serif;
90+
font-weight: bold;
91+
letter-spacing: 0.03em;
92+
text-decoration: none;
93+
}
94+
95+
.top-nav {
96+
display: flex;
97+
list-style-type: none;
98+
margin: 0;
99+
}
100+
101+
.top-nav>li+li {
102+
margin-left: 0.625em;
103+
}
104+
105+
.top-nav a {
106+
display: block;
107+
/* 减小导航链接和按钮的字号 */
108+
font-size: 0.8rem;
109+
padding: 0.3rem 1.25rem;
110+
color: var(--white);
111+
background: var(--brand-green);
112+
text-decoration: none;
113+
border-radius: 3px;
114+
/* 把导航链接改成大写并增加字符间距 */
115+
text-transform: uppercase;
116+
letter-spacing: 0.03em;
117+
}
118+
119+
.top-nav a:hover {
120+
background-color: var(--dark-green);
121+
}
122+
123+
.top-nav__featured>a {
124+
color: var(--brand-green);
125+
background-color: var(--white);
126+
}
127+
128+
.top-nav__featured>a:hover {
129+
color: var(--medium-green);
130+
background-color: var(--white);
131+
}
132+
133+
.hero {
134+
background: url(collaboration.jpg) no-repeat;
135+
background-size: cover;
136+
margin-bottom: 2.5rem;
137+
}
138+
139+
.hero__inner {
140+
max-width: 1080px;
141+
margin: 0 auto;
142+
padding: 5.56em 12.5em 12.5em 0;
143+
text-align: right;
144+
}
145+
146+
.hero h2 {
147+
font-size: 1.95rem;
148+
/* 使用负值的 letter-spacing 来压缩字符间距 */
149+
letter-spacing: -0.01em;
150+
margin-top: 0;
151+
margin-bottom: 0.625rem;
152+
}
153+
154+
.button {
155+
display: inline-block;
156+
padding: 0.4em 1em;
157+
color: hsl(162, 87%, 21%);
158+
border: 2px solid hsl(162, 87%, 21%);
159+
border-radius: 0.2em;
160+
text-decoration: none;
161+
/* 减小导航链接和按钮的字号 */
162+
font-size: 0.8rem;
163+
}
164+
165+
.button:hover {
166+
background-color: hsl(162, 88%, 30%);
167+
color: white;
168+
}
169+
170+
.button--cta {
171+
padding: 0.6em 1em;
172+
background-color: hsl(162, 87%, 21%);
173+
color: white;
174+
border: none;
175+
}
176+
177+
178+
.container {
179+
margin: 0 auto;
180+
max-width: 1080px;
181+
}
182+
183+
.tile-row {
184+
display: flex;
185+
}
186+
187+
.tile-row>* {
188+
flex: 1;
189+
}
190+
191+
.tile-row>*+* {
192+
margin-left: 1.5625em;
193+
}
194+
195+
.tile {
196+
background-color: var(--white);
197+
border-radius: 0.3em;
198+
padding: 1.5625em;
199+
}
200+
201+
.tile>h4 {
202+
margin-top: 0;
203+
margin-bottom: 1.5em;
204+
}
205+
206+
.tag-list {
207+
list-style: none;
208+
padding-left: 0;
209+
}
210+
211+
.tag-list>li {
212+
display: inline;
213+
padding: 0.3rem 0.5rem;
214+
font-size: 0.8rem;
215+
border-radius: 0.2rem;
216+
background-color: var(--light-gray);
217+
line-height: 2.6;
218+
}
219+
220+
.page-footer {
221+
margin-top: 3em;
222+
padding: 1em 0;
223+
background-color: var(--light-gray);
224+
color: var(--gray);
225+
}
226+
227+
.page-footer__inner {
228+
margin: 0 auto;
229+
max-width: 1080px;
230+
text-align: center;
231+
font-size: 0.8rem;
232+
}
233+
</style>
234+
</head>
235+
236+
<body>
237+
<nav class="nav-container">
238+
<div class="nav-container__inner">
239+
<a class="home-link" href="/">Ink</a>
240+
<ul class="top-nav">
241+
<li><a href="/features">Features</a></li>
242+
<li><a href="/pricing">Pricing</a></li>
243+
<li><a href="/support">Support</a></li>
244+
<li class="top-nav__featured"><a href="/login">Login</a></li>
245+
</ul>
246+
</div>
247+
</nav>
248+
<div class="hero">
249+
<div class="hero__inner">
250+
<h2>Team collaboration done right</h2>
251+
<a href="/sign-up" class="button button--cta">Get started</a>
252+
</div>
253+
</div>
254+
255+
<div class="container">
256+
<div class="tile-row">
257+
<div class="tile">
258+
<h4>Work together, even if you're apart</h4>
259+
<p>Organize your team conversations into threads. Collaborate together on documents in real-time. Use
260+
face-to-face <a href="/features/video-calling">video calls</a> when typing just won't do.</p>
261+
<a href="/collaboration" class="button">Read more</a>
262+
</div>
263+
264+
<div class="tile">
265+
<h4>Take it with you</h4>
266+
<p>Ink is available on a wide array of devices, so you can work from anywhere:</p>
267+
<ul class="tag-list">
268+
<li>Web</li>
269+
<li>iOS</li>
270+
<li>Android</li>
271+
<li>Windows Phone</li>
272+
</ul>
273+
<a href="/supported-devices" class="button">Read more</a>
274+
</div>
275+
276+
<div class="tile">
277+
<h4>Priced right</h4>
278+
<p>Whether you work on a team of three or a three hundred, you'll find our tiered pricing reasonable at
279+
every level.</p>
280+
<a href="/pricing" class="button">Read more</a>
281+
</div>
282+
</div>
283+
</div>
284+
285+
<footer class="page-footer">
286+
<div class="page-footer__inner">
287+
Copyright &copy; 2017 Ink, Inc.
288+
</div>
289+
</footer>
290+
<script type="text/javascript">
291+
var html = document.documentElement;
292+
// 动态创建<script>标签，添加 Font Face Observer 到页面上
293+
var script = document.createElement("script");
294+
script.src = "fontfaceobserver.js"
295+
script.async = true;
296+
297+
script.onload = function () {
298+
var roboto = new FontFaceObserver("Roboto");
299+
var sansita = new FontFaceObserver("Sansita");
300+
var timeout = 2000;
301+
302+
Promise.all([
303+
roboto.load(null, timeout),
304+
sansita.load(null, timeout)
305+
]).then(function () {
306+
html.classList.add("fonts-loaded");
307+
}).catch(function (e) {
308+
html.classList.add("fonts-failed");
309+
});
310+
};
311+
document.head.appendChild(script);
312+
</script>
313+
</body>
314+
315+
</html>

0 commit comments

Comments
 (0)