Skip to content

Commit bacffa1

Browse files
huang303513huang303513
committed
update
1 parent 18879f5 commit bacffa1

File tree

3 files changed

+279
-4
lines changed

3 files changed

+279
-4
lines changed

‎Head First html&css学习代码/chapter9/lounge-mediaquery.css

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
@media screen and (min-width: 481px) {
2+
3+
body {
4+
font-size: small;
5+
font-family: Verdana, Helvetica, Arial, sans-serif;
6+
line-height: 1.6em;
7+
}
8+
9+
h1, h2 {
10+
color: #007e7e;
11+
}
12+
13+
h1 {
14+
font-size: 150%;
15+
}
16+
17+
h2 {
18+
font-size: 130%;
19+
}
20+
21+
#guarantee {
22+
line-height: 1.9em;
23+
font-style: italic;
24+
font-family: Georgia, "Times New Roman", Times, serif;
25+
color: #444444;
26+
border-color: white;
27+
border-width: 1px;
28+
border-style: dashed;
29+
background-color: #a7cece;
30+
padding: 25px;
31+
padding-left: 80px;
32+
margin: 30px;
33+
margin-right: 250px;
34+
background-image: url(images/background.gif);
35+
background-repeat: no-repeat;
36+
background-position: top left;
37+
}
38+
39+
}
40+
41+
@media screen and (max-width: 480px) {
42+
43+
body {
44+
font-size: small;
45+
font-family: Verdana, Helvetica, Arial, sans-serif;
46+
line-height: 1.6em;
47+
}
48+
49+
h1, h2 {
50+
color: #007e7e;
51+
}
52+
53+
h1 {
54+
font-size: 150%;
55+
}
56+
57+
h2 {
58+
font-size: 130%;
59+
}
60+
61+
#guarantee {
62+
line-height: 1.9em;
63+
font-style: italic;
64+
font-family: Georgia, "Times New Roman", Times, serif;
65+
color: #444444;
66+
border-color: white;
67+
border-width: 1px;
68+
border-style: dashed;
69+
background-color: #a7cece;
70+
padding: 25px;
71+
margin: 30px;
72+
}
73+
74+
}
75+
76+
@media print {
77+
78+
body {
79+
font-size: 12pt;
80+
font-family: Times, "Times New Roman", serif;
81+
line-height: 1.4em;
82+
margin: 10px 40px 10px 40px;
83+
width: 700px;
84+
}
85+
86+
h1, h2 {
87+
color: black;
88+
}
89+
90+
h1 {
91+
font-size: 150%;
92+
}
93+
94+
h2 {
95+
font-size: 130%;
96+
}
97+
98+
#guarantee {
99+
padding: 25px 25px 25px 25px;
100+
border: thin solid black;
101+
margin-right: 240px;
102+
margin-left: 30px;
103+
line-height: 1.5em;
104+
font-style: italic;
105+
font-family: Georgia, "Times New Roman", Times, serif;
106+
color: #222222;
107+
}
108+
109+
#elixirs {
110+
font-family: Verdana, Helvetica, Arial, sans-serif;
111+
width: 200px;
112+
background-color: #ffffff;
113+
background: url("images/elixirbackground.gif") repeat-x top center;
114+
padding: 0px 20px 20px 20px;
115+
margin-left: 25px;
116+
color: #000000;
117+
border: thin double #007e7e;
118+
text-align: center;
119+
font-size: 80%;
120+
}
121+
122+
#elixirs a:link { color: #007e7e;}
123+
#elixirs a:visited { color: #333333;}
124+
#elixirs a:hover { background: #f88396; color: #0d5353;}
125+
126+
#elixirs h2 {
127+
color: #000000;
128+
}
129+
130+
#elixirs h3 {
131+
color: #d12c47;
132+
}
133+
134+
#elixirs img {
135+
padding-top: 20px;
136+
}
137+
138+
#elixirs p {
139+
line-height: 1em;
140+
}
141+
142+
#footer {
143+
font-size: 50%;
144+
text-align: center;
145+
line-height: normal;
146+
margin-top: 30px;
147+
}
148+
149+
.artist {
150+
font-weight: bold;
151+
}
152+
153+
.cd {
154+
font-style: italic;
155+
}
156+
157+
body p a:link { color: #007e7e; }
158+
body p a:visited { color: #333333; }
159+
160+
}

‎Head First html&css学习代码/chapter9/lounge-mediaquery.html

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Head First Lounge</title>
6+
<link type="text/css" rel="stylesheet" href="lounge-mediaquery.css">
7+
</head>
8+
<body>
9+
<p><img src="images/logo.gif" alt="Head First Lounge"></p>
10+
<h1>Welcome to the Head First Lounge</h1>
11+
<p>
12+
The Head First Lounge is, no doubt, the biggest trendsetter in Webville.
13+
Stop in to sample the eclectic offering of elixirs, teas, and coffees,
14+
or, stay a bit longer and enjoy the multicultural culinary menu that
15+
combines a harmony of taste, texture, and color with the best in fresh
16+
and healthy ingredients.
17+
</p>
18+
19+
<p>
20+
During your stay at the lounge, you'll enjoy a smooth mixture of
21+
ambient and mystic sounds, filling the lounge and adding an extra dimension
22+
to your dining experience. The decor surrounds you with the relaxing sentiments
23+
of sights from eras past. And, don't forget, the lounge offers free wireless
24+
access to the Internet, so bring your laptop.
25+
</p>
26+
27+
<p id="guarantee">
28+
Our guarantee: at the lounge, we're committed to providing you,
29+
our guest, with an exceptional experience every time you visit.
30+
Whether you're just stopping by to check in on email over an
31+
elixir, or are here for an out-of-the-ordinary dinner, you'll
32+
find our knowledgeable service staff pay attention to every detail.
33+
If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
34+
</p>
35+
36+
<p>
37+
But that's not all; at night, join us in the backroom as our resident
38+
DJ spins a choice selection of trance and drum&amp;bass beats across
39+
our spacious tiki-themed dance floor. Or just hang out in one of our
40+
comfy white vinyl booths at the dance bar. You can have your elixirs
41+
delivered from the main lounge right to the dance floor. If you've
42+
had enough of the beat, just head back to the lounge area to relax.
43+
And, no matter where you find yourself in the lounge, you'll always be
44+
connected with our wireless Internet access.
45+
</p>
46+
47+
<p>
48+
Now that you've experienced the lounge <em>virtually</em>, isn't
49+
it time to check us out <em>for real</em>? We're located right
50+
in the heart of Webville, and we've created some
51+
<a href="about/directions.html"
52+
title="Detailed Directions to the Lounge">detailed directions</a>
53+
to get you here in record time. No reservations necessary;
54+
come and join us anytime.
55+
</p>
56+
57+
<h2>Weekly Elixir Specials</h2>
58+
<p>
59+
<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
60+
</p>
61+
<h3>Lemon Breeze</h3>
62+
<p>
63+
The ultimate healthy drink, this elixir combines
64+
herbal botanicals, minerals, and vitamins with
65+
a twist of lemon into a smooth citrus wonder
66+
that will keep your immune system going all
67+
day and all night.
68+
</p>
69+
70+
<p>
71+
<img src="images/chai.gif" alt="Chai Chiller Elixir">
72+
</p>
73+
<h3>Chai Chiller</h3>
74+
<p>
75+
Not your traditional chai, this elixir mixes mat&eacute;
76+
with chai spices and adds an extra chocolate kick for
77+
a caffeinated taste sensation on ice.
78+
</p>
79+
80+
<p>
81+
<img src="images/black.gif" alt="Black Brain Brew Elixir">
82+
</p>
83+
<h3>Black Brain Brew</h3>
84+
<p>
85+
Want to boost your memory? Try our Black Brain Brew
86+
elixir, made with black oolong tea and just a touch
87+
of espresso. Your brain will thank you for the boost.
88+
</p>
89+
90+
<p>
91+
Join us any evening for these and all our
92+
other wonderful
93+
<a href="beverages/elixir.html"
94+
title="Head First Lounge Elixirs">elixirs</a>.
95+
</p>
96+
97+
<h2>What's playing at the Lounge</h2>
98+
<p>
99+
We're frequently asked about the music we play at the lounge, and no wonder,
100+
it's great stuff. Just for you, we keep a list here on the site, updated weekly.
101+
Enjoy.
102+
</p>
103+
<ul>
104+
<li>Buddha Bar, Claude Challe</li>
105+
<li>When It Falls, Zero 7</li>
106+
<li>Earth 7, L.T.J. Bukem</li>
107+
<li>Le Roi Est Mort, Vive Le Roi!, Enigma</li>
108+
<li>Music for Airports, Brian Eno</li>
109+
</ul>
110+
111+
<p>
112+
&copy; 2012, Head First Lounge<br>
113+
All trademarks and registered trademarks appearing on this site are
114+
the property of their respective owners.
115+
</p>
116+
</body>
117+
</html>

‎Head First html&css学习代码/chapter9/lounge.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,17 @@
33
<head>
44
<meta charset="utf-8">
55
<title>Head First Lounge</title>
6-
<!--
6+
77
<link rel="stylesheet" type="text/css" href="lounge.css" media="screen and (min-width:481px)">
88
<link rel="stylesheet" type="text/css" href="lounge-mobile.css" media="screen and (max-width:480px)">
99

1010
<link rel="stylesheet" type="text/css" href="lounge-print.css" media="print">
11-
-->
1211

13-
<link rel="stylesheet" type="text/css" href="lounge-print.css" media="screen and (min-width:481px)">
1412

1513

1614
</head>
1715
<body>
18-
<p><img src="images/gogo.gif" alt="Head First Louge"></p>
16+
<p><img src="images/logo.gif" alt="Head First Louge"></p>
1917
<h1>Welcome to the Head First Lounge</h1>
2018
<p>
2119
The Head First Lounge is, no doubt, the biggest trendsetter in Webville.

0 commit comments

Comments
 (0)