Skip to content

Commit ee24be5

Browse files
FrankLikuohaoFrankLikuohao
committed
update Class5
1 parent 18e76fb commit ee24be5

File tree

8 files changed

+488
-55
lines changed

8 files changed

+488
-55
lines changed

‎Practice/Class5/lounge/lounge-2.css

+2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ h3 {
2626

2727
.main {
2828

29+
float: left;
2930
}
3031

3132
.menu {
@@ -36,6 +37,7 @@ h3 {
3637
padding: 1.5em;
3738
margin: 1em;
3839
float: left;
40+
top: 0;
3941
}
4042

4143
.menu h2 {

‎Practice/Class5/lounge/lounge.html

+47-46
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
if (cssFile == 'lounge-1.css') {
2424
$('.menu').insertBefore($('h1'));
2525
}else if (cssFile == 'lounge-2.css') {
26-
$('.menu').insertAfter($('.main'));
26+
$('.menu').insertBefore($('.main'));
2727
}else {
2828
$('.menu').insertBefore($('.playing'));
2929
}
@@ -54,7 +54,7 @@
5454
<select name="CSSFile" id="CSSFile" onChange="ChangeCSSFile()">
5555
<option selected value="lounge.css">Original</option>
5656
<option value="lounge-1.css">Menu</option>
57-
<option value="lounge-2.css" disabled="true">Fixed Menu</option>
57+
<option value="lounge-2.css" disabled>Fixed Menu</option>
5858
</select>
5959
</div>
6060
</div>
@@ -96,54 +96,55 @@ <h1>Welcome to the Head First Lounge</h1>
9696
<a href="about/directions.html" title="Detailed Directions to the Lounge">detailed directions</a> to get you
9797
here in record time. No reservations necessary; come and join us anytime.
9898
</p>
99-
<div>
100-
<div class="menu">
101-
<h2>Weekly Elixir Specials</h2>
102-
<p>
103-
<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
104-
</p>
105-
<h3>Lemon Breeze</h3>
106-
<p>
107-
The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth
108-
citrus wonder that will keep your immune system going all day and all night.
109-
</p>
110-
<p>
111-
<img src="images/chai.gif" alt="Chai Chiller Elixir">
112-
</p>
113-
<h3>Chai Chiller</h3>
114-
<p>
115-
Not your traditional chai, this elixir mixes mat&eacute; with chai spices and adds an extra chocolate kick for a caffeinated
116-
taste sensation on ice.
117-
</p>
118-
<p>
119-
<img src="images/black.gif" alt="Black Brain Brew Elixir">
120-
</p>
121-
<h3>Black Brain Brew</h3>
122-
<p>
123-
Want to boost your memory? Try our Black Brain Brew elixir, made with black oolong tea and just a touch of espresso. Your
124-
brain will thank you for the boost.
125-
</p>
126-
<p>
127-
Join us any evening for these and all our other wonderful
128-
<a href="beverages/elixir.html" title="Head First Lounge Elixirs">elixirs</a>.
129-
</p>
130-
</div>
131-
<h2 class="playing">What's playing at the Lounge</h2>
99+
100+
<div class="menu">
101+
<h2>Weekly Elixir Specials</h2>
102+
<p>
103+
<img src="images/yellow.gif" alt="Lemon Breeze Elixir">
104+
</p>
105+
<h3>Lemon Breeze</h3>
106+
<p>
107+
The ultimate healthy drink, this elixir combines herbal botanicals, minerals, and vitamins with a twist of lemon into a smooth
108+
citrus wonder that will keep your immune system going all day and all night.
109+
</p>
110+
<p>
111+
<img src="images/chai.gif" alt="Chai Chiller Elixir">
112+
</p>
113+
<h3>Chai Chiller</h3>
114+
<p>
115+
Not your traditional chai, this elixir mixes mat&eacute; with chai spices and adds an extra chocolate kick for a caffeinated
116+
taste sensation on ice.
117+
</p>
118+
<p>
119+
<img src="images/black.gif" alt="Black Brain Brew Elixir">
120+
</p>
121+
<h3>Black Brain Brew</h3>
132122
<p>
133-
We're frequently asked about the music we play at the lounge, and no wonder, it's great stuff. Just for you, we keep a list
134-
here on the site, updated weekly. Enjoy.
123+
Want to boost your memory? Try our Black Brain Brew elixir, made with black oolong tea and just a touch of espresso. Your
124+
brain will thank you for the boost.
135125
</p>
136-
<ul>
137-
<li><span class="song">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
138-
<li><span class="song">When It Falls</span>, <span class="artist">Zero 7</span></li>
139-
<li><span class="song">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
140-
<li><span class="song">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
141-
<li><span class="song">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
142-
</ul>
143126
<p>
144-
&copy; 2012, Head First Lounge
145-
<br> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
127+
Join us any evening for these and all our other wonderful
128+
<a href="beverages/elixir.html" title="Head First Lounge Elixirs">elixirs</a>.
146129
</p>
130+
</div>
131+
<h2 class="playing">What's playing at the Lounge</h2>
132+
<p>
133+
We're frequently asked about the music we play at the lounge, and no wonder, it's great stuff. Just for you, we keep a list
134+
here on the site, updated weekly. Enjoy.
135+
</p>
136+
<ul>
137+
<li><span class="song">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
138+
<li><span class="song">When It Falls</span>, <span class="artist">Zero 7</span></li>
139+
<li><span class="song">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
140+
<li><span class="song">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
141+
<li><span class="song">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
142+
</ul>
143+
<p>
144+
&copy; 2012, Head First Lounge
145+
<br> All trademarks and registered trademarks appearing on this site are the property of their respective owners.
146+
</p>
147+
</div>
147148
</body>
148149

149150
</html>

‎Practice/Class5/starbuzz/index.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,10 @@
2020

2121
var cssFile = $('select[name=CSSFile]').val();
2222
$('#cssFile').attr('href', cssFile);
23-
if (cssFile == 'lounge-1.css') {
24-
$('.menu').insertBefore($('h1'));
25-
}else if (cssFile == 'lounge-2.css') {
26-
$('.menu').insertAfter($('.main'));
23+
if (cssFile == 'starbuzz-2.css') {
24+
$('#sidebar').insertBefore($('#main'));
2725
}else {
28-
$('.menu').insertBefore($('.playing'));
26+
$('#main').insertBefore($('#sidebar'));
2927
}
3028
reloadStylesheets();
3129

@@ -53,7 +51,10 @@
5351
<span>CSS Stylesheet</span>
5452
<select name="CSSFile" id="CSSFile" onChange="ChangeCSSFile()">
5553
<option selected value="starbuzz.css">Original</option>
56-
<option value="starbuzz-1.css">Menu</option>
54+
<option value="starbuzz-1.css">Layout 1</option>
55+
<option value="starbuzz-2.css">Layout 2 (sidebar right float)</option>
56+
<option value="starbuzz-3.css">Layout 3 (main left float)</option>
57+
<option value="starbuzz-4.css">Layout 4 (main left float & sidebar right float)</option>
5758
</select>
5859
</div>
5960
</div>

‎Practice/Class5/starbuzz/starbuzz-1.css

+4-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ body {
1212
#header {
1313
background-color: #675c47;
1414
margin: 10px;
15-
margin-bottom: 0px;
1615
height: 108px;
1716
}
1817

@@ -62,6 +61,10 @@ h1 {
6261
line-height: 1.8em;
6362
}
6463

64+
p:hover {
65+
color: red;
66+
}
67+
6568
a:link {
6669
color: #b76666;
6770
text-decoration: none;

‎Practice/Class5/starbuzz/starbuzz-2.css

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
body {
2+
background-color: #b5a789;
3+
font-family: Georgia, "Times New Roman", Times, serif;
4+
font-size: small;
5+
margin: 0px;
6+
}
7+
8+
#main >h3 {
9+
color: #cc33ff;
10+
}
11+
12+
#header {
13+
background-color: #675c47;
14+
margin: 10px;
15+
height: 108px;
16+
}
17+
18+
#drinks {
19+
background: #efe5d0 url(images/background.gif) top left;
20+
font-size: 105%;
21+
padding: 15px;
22+
margin: 0px 10px 10px 10px;
23+
}
24+
25+
#main {
26+
background: #efe5d0 url(images/background.gif) top left;
27+
font-size: 105%;
28+
padding: 15px;
29+
margin: 0px 350px 10px 10px;
30+
}
31+
32+
#sidebar {
33+
background: #efe5d0 url(images/background.gif) bottom right;
34+
font-size: 105%;
35+
padding: 15px;
36+
margin: 0px 10px 10px 10px;
37+
float: right;
38+
width: 300px;
39+
}
40+
41+
#footer {
42+
background-color: #675c47;
43+
color: #efe5d0;
44+
text-align: center;
45+
padding: 15px;
46+
margin: 10px;
47+
margin-top: 0px;
48+
font-size: 90%;
49+
clear: both;
50+
}
51+
52+
h1 {
53+
font-size: 120%;
54+
color: #954b4b;
55+
}
56+
57+
.slogan {
58+
color: #954b4b;
59+
}
60+
61+
.beanheading {
62+
text-align: center;
63+
line-height: 1.8em;
64+
}
65+
66+
p:hover {
67+
color: red;
68+
}
69+
70+
a:link {
71+
color: #b76666;
72+
text-decoration: none;
73+
border-bottom: thin dotted #b76666;
74+
}
75+
76+
a:visited {
77+
color: #675c47;
78+
text-decoration: none;
79+
border-bottom: thin dotted #675c47;
80+
}
81+
82+
83+
#allcontent {
84+
width: 800px;
85+
margin-left: auto;
86+
margin-right: auto;
87+
}
88+
89+
#award {
90+
position: absolute;
91+
top: 30px;
92+
left: 300px;
93+
}
94+
95+
#ticket {
96+
position: fixed;
97+
top: 50%;
98+
left: -250px;
99+
100+
}
101+
102+
nav {
103+
position: relative;
104+
height: 1em;
105+
margin: 10px;
106+
}
107+
108+
#menu {
109+
position: absolute;
110+
top: 0;
111+
right: 0;
112+
}
113+
114+
#menu,
115+
#menu ul {
116+
list-style: none;
117+
background-color: #efe5d0;
118+
padding: 0;
119+
margin: 0;
120+
}
121+
122+
#menu li {
123+
float: left;
124+
}
125+
126+
#menu li a {
127+
display: block;
128+
padding: 4px;
129+
width: 10em;
130+
}
131+
132+
#menu li ul {
133+
position: absolute;
134+
left: -999em;
135+
width: 10em;
136+
}
137+
138+
#menu li:hover ul,
139+
#menu li ul:hover {
140+
left: auto;
141+
}

0 commit comments

Comments
 (0)