Skip to content

Commit bfe99f6

Browse files
author
liujintong
committed
ch8
1 parent 30ed962 commit bfe99f6

5 files changed

+319
-0
lines changed

‎Chapter 7/7-1 一个模态框盒子.html renamed to ‎ch7/7-1 一个模态框盒子.html

File renamed without changes.

‎Chapter 7/7-14 粘性定位的侧边栏.html renamed to ‎ch7/7-14 粘性定位的侧边栏.html

File renamed without changes.

‎Chapter 7/7-5 下拉菜单.html renamed to ‎ch7/7-5 下拉菜单.html

File renamed without changes.

‎Chapter 7/7-9 层叠上下文的例子.html renamed to ‎ch7/7-9 层叠上下文的例子.html

File renamed without changes.

‎ch8/8-1 响应式设计的网页标记.html

Lines changed: 319 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,319 @@
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+
font-size: calc(1vw + 0.6em);
12+
}
13+
14+
*,
15+
::before,
16+
::after {
17+
box-sizing: inherit;
18+
}
19+
20+
body {
21+
margin: 0;
22+
font-family: Arial, Helvetica, sans-serif;
23+
}
24+
25+
a:link {
26+
color: #1476b8;
27+
font-weight: bold;
28+
text-decoration: none;
29+
}
30+
31+
a:visited {
32+
color: #1430b8;
33+
}
34+
35+
a:hover {
36+
text-decoration: underline;
37+
}
38+
39+
a:active {
40+
color: #b81414;
41+
}
42+
43+
/* 网页头部和标题 */
44+
.page-header {
45+
padding: 0.4em 1em;
46+
background-color: #fff;
47+
}
48+
49+
@media (min-width: 35em) {
50+
.page-header {
51+
padding: 1em;
52+
}
53+
}
54+
55+
.title>h1 {
56+
color: #333;
57+
text-transform: uppercase;
58+
font-size: 1.5rem;
59+
margin: 0.2em 0;
60+
}
61+
62+
/* 断点 */
63+
@media (min-width: 35em) {
64+
.title>h1 {
65+
font-size: 2.25rem;
66+
}
67+
}
68+
69+
70+
.slogan {
71+
color: #888;
72+
font-size: 0.875em;
73+
margin: 0;
74+
}
75+
76+
/* 网页头部和标题 */
77+
78+
.hero {
79+
padding: 2em 1em;
80+
text-align: center;
81+
/* background-image: url(coffee-beans.jpg);
82+
background-size: 100%; */
83+
/* 使用background-color替代 */
84+
background-color: brown;
85+
color: #fff;
86+
text-shadow: 0.1em 0.1em 0.3em #000;
87+
}
88+
89+
@media (min-width: 35em) {
90+
.hero {
91+
padding: 5em 3em;
92+
font-size: 1.2rem;
93+
}
94+
}
95+
96+
main {
97+
padding: 1em;
98+
}
99+
100+
@media (min-width: 35em) {
101+
main {
102+
padding: 2em 1em;
103+
}
104+
}
105+
106+
.subtitle {
107+
margin-top: 1.5em;
108+
margin-bottom: 1.5em;
109+
font-size: 0.875rem;
110+
text-transform: uppercase;
111+
}
112+
113+
/* 移动菜单样式 */
114+
.menu {
115+
/* 创建包含块 */
116+
position: relative;
117+
}
118+
119+
.menu-toggle {
120+
position: absolute;
121+
/* 负top值将按钮拉到了包含块的上面 */
122+
top: -1.2em;
123+
right: 0.1em;
124+
/* 覆盖浏览器的按钮样式 */
125+
border: 0;
126+
background-color: transparent;
127+
font-size: 3em;
128+
width: 1em;
129+
height: 1em;
130+
/* 隐藏按钮的文本内容，将它的大小固定位1em */
131+
line-height: 0.4;
132+
text-indent: 5em;
133+
white-space: nowrap;
134+
overflow: hidden;
135+
}
136+
137+
.menu-toggle::after {
138+
/* 用一个表示汉堡图的图标的Unicode符号将按钮覆盖 */
139+
position: absolute;
140+
top: 0.2em;
141+
left: 0.2em;
142+
display: block;
143+
content: "\2261";
144+
text-indent: 0;
145+
}
146+
147+
.menu-dropdown {
148+
display: none;
149+
position: absolute;
150+
right: 0;
151+
left: 0;
152+
margin: 0;
153+
}
154+
155+
.menu.is-open .menu-dropdown {
156+
display: block;
157+
}
158+
159+
/* 为中等屏幕断点重构导航菜单 */
160+
@media (min-width: 35em) {
161+
.menu-toggle {
162+
display: none;
163+
}
164+
165+
.menu-dropdown {
166+
display: block;
167+
position: static;
168+
}
169+
}
170+
171+
.nav-menu {
172+
margin: 0;
173+
padding-left: 0;
174+
border: 1px solid #ccc;
175+
list-style: none;
176+
background-color: #000;
177+
color: #fff;
178+
}
179+
180+
.nav-menu>li+li {
181+
border-top: 1px solid #ccc;
182+
}
183+
184+
.nav-menu>li>a {
185+
display: block;
186+
padding: 0.8em 1em;
187+
color: #fff;
188+
font-weight: normal;
189+
}
190+
191+
@media (min-width: 35em) {
192+
.nav-menu {
193+
display: flex;
194+
border: 0;
195+
padding: 0 1em;
196+
}
197+
198+
.nav-menu>li {
199+
flex: 1;
200+
}
201+
202+
.nav-menu>li+li {
203+
border: 0;
204+
}
205+
206+
.nav-menu>li>a {
207+
padding: 0.3em;
208+
text-align: center;
209+
}
210+
}
211+
212+
@media (min-width: 35em) {
213+
.row {
214+
display: flex;
215+
margin-left: -.75em;
216+
margin-right: -.75em;
217+
}
218+
219+
.column {
220+
flex: 1;
221+
margin-right: 0.75em;
222+
margin-left: 0.75em;
223+
}
224+
}
225+
226+
/* 在大屏的断点处增加内边距 */
227+
@media (min-width: 50em) {
228+
:root {
229+
/* 超过最大断点，字号不再增长 */
230+
font-size: 1.125em;
231+
}
232+
233+
.page-header {
234+
padding: 1em 4em;
235+
}
236+
237+
.hero {
238+
padding: 7em 6em;
239+
}
240+
241+
main {
242+
padding: 2em 4em;
243+
}
244+
245+
.nav-menu {
246+
padding: 0 4em;
247+
}
248+
}
249+
</style>
250+
</head>
251+
252+
<body>
253+
<header class="page-header" id="header">
254+
<div class="title">
255+
<h1>Wombat Coffee Roasters</h1>
256+
<div class="slogan">We love coffee</div>
257+
</div>
258+
</header>
259+
<nav class="menu" id="main-menu">
260+
<!-- 给移动版增加汉堡图标 -->
261+
<button class="menu-toggle" id="toggle-menu">
262+
toggle menu
263+
</button>
264+
<!-- 在移动设备上主菜单默认隐藏 -->
265+
<div class="menu-dropdown">
266+
<ul class="nav-menu">
267+
<li><a href="/about.html">About</a></li>
268+
<li><a href="/shop.html">Shop</a></li>
269+
<li><a href="/menu.html">Menu</a></li>
270+
<li><a href="/brew.html">Brew</a></li>
271+
</ul>
272+
</div>
273+
</nav>
274+
<aside id="hero" class="hero">
275+
Welcome to Wombat Coffee Roasters! We are
276+
passionate about our craft, striving to bring you
277+
the best hand-crafted coffee in the city.
278+
</aside>
279+
<main id="main">
280+
<div class="row">
281+
<section class="column">
282+
<h2 class="subtitle">Single-origin</h2>
283+
<p>We have built partnerships with small farms
284+
around the world to hand-select beans at the
285+
peak of season. We then carefully roast in
286+
<a href="/batch-size.html">small batches</a>
287+
to maximize their potential.
288+
</p>
289+
</section>
290+
<section class="column">
291+
<h2 class="subtitle">Blends</h2>
292+
<p>Our tasters have put together a selection of
293+
carefully balanced blends. Our famous
294+
<a href="/house-blend.html">house blend</a>
295+
is available year round.
296+
</p>
297+
</section>
298+
<section class="column">
299+
<h2 class="subtitle">Brewing Equipment</h2>
300+
<p>We offer our favorite kettles, French
301+
presses, and pour-over cones. Come to one of
302+
our <a href="/classes.html">brewing
303+
classes</a> to learn how to brew the perfect
304+
pour-over cup.</p>
305+
</section>
306+
</div>
307+
</main>
308+
</body>
309+
<script type="text/javascript">
310+
(function () {
311+
var button = document.getElementById('toggle-menu');
312+
button.addEventListener('click', function (event) {
313+
event.preventDefault();
314+
document.querySelector('#main-menu').classList.toggle('is-open');
315+
});
316+
})();
317+
</script>
318+
319+
</html>

0 commit comments

Comments
 (0)