Skip to content

Commit c6909c8

Browse files
author
liujintong
committed
ch9
1 parent bfe99f6 commit c6909c8

8 files changed

+427
-3
lines changed

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@
2121
border-radius: 0.2em;
2222
}
2323

24+
2425
.top-banner {
2526
padding: 1em 0;
2627
background-color: #fff698;
28+
text-align: center;
2729
}
2830

2931
.top-banner-inner {
@@ -32,12 +34,21 @@
3234
margin: 0 auto;
3335
}
3436

37+
@media (max-width: 35em) {
38+
#open {
39+
display: block;
40+
margin: 1em auto;
41+
}
42+
}
43+
44+
3545
.modal {
3646
display: none;
3747
}
3848

3949
/* 模态框打开时，用半透明蒙层遮挡网页剩余内容 */
40-
.modal-backdrop {
50+
/* 其实直接对.modal进行下面的设置也是可以的 */
51+
.modal {
4152
position: fixed;
4253
top: 0;
4354
right: 0;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414

1515
/* 创建包含块 */
1616
.dropdown {
17-
/* inline-block 自适应宽度 */
18-
display: inline-block;
17+
18+
display: inline-block; /* inline-block 自适应宽度 */
1919
position: relative;
2020
}
2121

‎ch7/练习.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
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+
.container {
10+
width: 80%;
11+
max-width: 1000px;
12+
margin: 1em auto;
13+
}
14+
15+
.dropdown {
16+
display: inline-block;
17+
position: relative;
18+
}
19+
20+
.dropdown-label {
21+
padding: .5em 1.5em;
22+
border: 1px solid #ccc;
23+
background-color: #eee;
24+
}
25+
26+
.dropdown-menu {
27+
display: none;
28+
position: absolute;
29+
left: 0;
30+
top: 2.1em;
31+
min-width: 100%;
32+
background-color: #eee;
33+
}
34+
35+
.dropdown:hover .dropdown-menu {
36+
display: block;
37+
}
38+
39+
.submenu {
40+
padding-left: 0;
41+
margin: 0;
42+
list-style: none;
43+
border: 1px solid #999;
44+
}
45+
46+
.submenu>li+li {
47+
border-top: 1px solid #999;
48+
}
49+
50+
.submenu>li>a {
51+
display: block;
52+
padding: .5em 1.5em;
53+
background-color: #eee;
54+
color: #369;
55+
text-decoration: none;
56+
}
57+
58+
.submenu>li>a:hover {
59+
background-color: #fff;
60+
}
61+
</style>
62+
</head>
63+
64+
<body>
65+
<div class="container">
66+
<nav>
67+
<div class="dropdown">
68+
<div class="dropdown-label">Main Menu</div>
69+
<div class="dropdown-menu">
70+
<ul class="submenu">
71+
<li><a href="/">Home</a></li>
72+
<li><a href="/coffees">Coffees</a></li>
73+
<li><a href="/brewers">Brewers</a></li>
74+
<li><a href="/specials">Specials</a></li>
75+
<li><a href="/about">About us</a></li>
76+
</ul>
77+
</div>
78+
</div>
79+
</nav>
80+
<h1>Wombot Coffee Rosters</h1>
81+
</div>
82+
</body>
83+
84+
</html>

‎ch9/9-11 用两个模块构造一个下拉菜单.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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 rel="stylesheet" href="基础样式.css">
9+
<style>
10+
/* 9-12 定义下拉模块 */
11+
.dropdown {
12+
display: inline-block;
13+
position: relative;
14+
}
15+
16+
.dropdown__toggle {
17+
padding: 0.5em 2em 0.5em 1.5em;
18+
border: 1px solid #ccc;
19+
font-size: 1rem;
20+
background-color: #eee;
21+
}
22+
23+
.dropdown__toggle::after {
24+
content: " ";
25+
position: absolute;
26+
right: 1em;
27+
top: 1em;
28+
border: 0.3em solid;
29+
border-color: black transparent transparent;
30+
}
31+
32+
.dropdown__drawer {
33+
display: none;
34+
position: absolute;
35+
left: 0;
36+
top: 2.1em;
37+
min-width: 100%;
38+
background-color: #eee;
39+
}
40+
41+
.dropdown.is-open .dropdown__toggle::after {
42+
top: 0.7em;
43+
border-color: transparent transparent black;
44+
}
45+
46+
.dropdown.is-open .dropdown__drawer {
47+
display: block;
48+
}
49+
50+
/* 9-12 定义下拉模块 */
51+
52+
/* 9-13 菜单模块的样式 */
53+
.menu {
54+
margin: 0;
55+
padding-left: 0;
56+
list-style-type: none;
57+
border: 1px solid #999;
58+
}
59+
60+
.menu>li+li {
61+
border-top: 1px solid #999;
62+
}
63+
64+
.menu>li>a {
65+
display: block;
66+
padding: 0.5em 1.5em;
67+
background-color: #eee;
68+
color: #369;
69+
text-decoration: none;
70+
}
71+
72+
.menu>li>a:hover {
73+
background-color: #fff;
74+
}
75+
76+
/* 9-13 菜单模块的样式 */
77+
</style>
78+
</head>
79+
80+
<body>
81+
<!-- 9-11 用两个模块构造一个下拉菜单 -->
82+
<div class="dropdown">
83+
<button class="dropdown__toggle">Main Menu</button>
84+
<div class="dropdown__drawer">
85+
<ul class="menu">
86+
<li><a href="/">Home</a></li>
87+
<li><a href="/coffees">Coffees</a></li>
88+
<li><a href="/brewers">Brewers</a></li>
89+
<li><a href="/specials">Specials</a></li>
90+
<li><a href="/about">About u
91+
</ul>
92+
</div>
93+
</div>
94+
<script type="text/javascript">
95+
(function () {
96+
var toggle = document.querySelector('.dropdown__toggle');
97+
toggle.addEventListener('click', function (e) {
98+
e.preventDefault();
99+
var dropdown = e.target.parentNode;
100+
dropdown.classList.toggle('is-open');
101+
})
102+
}());
103+
</script>
104+
<!-- 9-11 用两个模块构造一个下拉菜单 -->
105+
</body>
106+
107+
</html>

‎ch9/9-14 工具类实例.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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+
.text-center {
10+
text-align: center;
11+
}
12+
13+
.float-left {
14+
float: left;
15+
}
16+
17+
.clearfix::before,
18+
.clearfix::after {
19+
content: "";
20+
display: table;
21+
}
22+
23+
.clearfix::after {
24+
clear: both
25+
}
26+
27+
.hidden {
28+
display: none !important;
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
35+
<div class="container text-center">
36+
<p>
37+
Strength training is an important part of injury prevention. Focus on your core&mdash; especially your
38+
abs and glutes.
39+
</p>
40+
<div class="clearfix" style="background-color: #eee;">
41+
<div class="float-left" style="width: 100px; height: 100px; background-color: black;"></div>
42+
<div class="float-left" style="width: 100px; height: 100px; background-color: black;"></div>
43+
</div>
44+
<div class="hidden" style="width: 100px; height: 100px; background-color: greenyellow;"></div>
45+
</div>
46+
</div>
47+
</body>
48+
49+
</html>

0 commit comments

Comments
 (0)