Skip to content

Commit 4ccd59b

Browse files
author
liujintong
committed
ch5
1 parent d98ac63 commit 4ccd59b

File tree

1 file changed

+204
-0
lines changed

1 file changed

+204
-0
lines changed

‎ch5/5-1 网页的标记.html

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

0 commit comments

Comments
 (0)