Skip to content

Commit fa90c16

Browse files
huang303513huang303513
committed
第五章
1 parent 2bcd637 commit fa90c16

29 files changed

+270
-0
lines changed

‎HFHTML/chapter4/starbuzz/index.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<html>
2+
<head>
3+
<title>Starbuzz Coffee</title>
4+
<style type="text/css">
5+
body {
6+
background-color: #d2b48c;
7+
margin-left: 20%;
8+
margin-right: 20%;
9+
border: 2px dotted black;
10+
padding: 10px 10px 10px 10px;
11+
font-family: sans-serif;
12+
}
13+
</style>
14+
</head>
15+
16+
<body>
17+
<h1>Starbuzz Coffee Beverages</h1>
18+
<h2>House Blend, $1.49</h2>
19+
<p>A smooth, mild blend of coffees from Mexico,
20+
Bolivia and Guatemala.</p>
21+
22+
<h2>Mocha Cafe Latte, $2.35</h2>
23+
<p>Espresso, steamed milk and chocolate syrup.</p>
24+
25+
<h2>Cappuccino, $1.89</h2>
26+
<p>A mixture of espresso, steamed milk and foam.</p>
27+
28+
<h2 id="chai">Chai Tea, $1.85</h2>
29+
<p>A spicy drink made with black tea, spices,
30+
milk and honey.</p>
31+
32+
<p>
33+
<a href="mission.html">Read about our Mission</a>.
34+
<br>
35+
Read the <a target="_blank" href="http://wickedlysmart.com/buzz/#Coffee"
36+
title="Read all about caffeine on the Buzz">Caffeine Buzz</a>.
37+
</p>
38+
</body>
39+
</html>

‎HFHTML/chapter4/starbuzz/mission.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html>
2+
<head>
3+
<title>Starbuzz Coffee's Mission</title>
4+
<style type="text/css">
5+
body {
6+
background-color: #d2b48c;
7+
margin-left: 20%;
8+
margin-right: 20%;
9+
border: 1px dotted gray;
10+
padding: 10px 10px 10px 10px;
11+
font-family: sans-serif;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<h1>Starbuzz Coffee's Mission</h1>
17+
<p>To provide all the caffeine that you need to power your life.</p>
18+
<p>Just drink it.</p>
19+
</body>
20+
</html>

‎HFHTML/chapter5/mypod/html/applestore.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<title>myPod: Apple Store</title>
4+
<style type="text/css"> body { background-color: #eaf3da; } </style>
5+
</head>
6+
<body>
7+
<h1>Apple Store</h1>
8+
<p>
9+
<img src="../photos/applestore.jpg" alt="An iPod at the Birmingham Apple store">
10+
</p>
11+
</body>
12+
</html>

‎HFHTML/chapter5/mypod/html/britain.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<title>myPod: Britain</title>
4+
<style type="text/css"> body { background-color: #eaf3da; } </style>
5+
</head>
6+
<body>
7+
<h1>Britain</h1>
8+
<p>
9+
<img src="../photos/britain.jpg" alt="An iPod in Birmingham at a telephone box">
10+
</p>
11+
</body>
12+
</html>

‎HFHTML/chapter5/mypod/html/seattle_classic.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<title>myPod: Classic iPod</title>
4+
<style type="text/css"> body { background-color: #eaf3da; } </style>
5+
</head>
6+
<body>
7+
<h1>Classic iPod on the ferry</h1>
8+
<p>
9+
<img src="../photos/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
10+
</p>
11+
</body>
12+
</html>

‎HFHTML/chapter5/mypod/html/seattle_shuffle.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<title>myPod: iPod Shuffle</title>
4+
<style type="text/css"> body { background-color: #eaf3da; } </style>
5+
</head>
6+
<body>
7+
<h1>iPod Shuffle in Seattle</h1>
8+
<p>
9+
<img src="../photos/seattle_shuffle.jpg" alt="An iPod Shuffle in Seattle, WA">
10+
</p>
11+
</body>
12+
</html>

‎HFHTML/chapter5/mypod/html/seattle_video_med.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<html>
2+
<head>
3+
<title>myPod: Seattle Ferry</title>
4+
<style type="text/css"> body { background-color: #eaf3da; } </style>
5+
</head>
6+
<body>
7+
<h1>Video iPod on the Seattle Ferry</h1>
8+
<p>
9+
<img src="../photos/seattle_video_med.jpg" alt="A video iPod on the ferry">
10+
</p>
11+
</body>
12+
</html>

‎HFHTML/chapter5/mypod/index.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<html>
2+
<head>
3+
<title>myPod</title>
4+
<style type="text/css">
5+
body { background-color: #eaf3da;}
6+
</style>
7+
</head>
8+
<body>
9+
<p><img src="logo/mypod.png" alt="myPod logo"></p>
10+
<h1>Welcome to myPod</h1>
11+
<p>
12+
Welcome to the place to show off your iPod, wherever you might be.
13+
Wanna join the fun? All you need is any iPod, from the early classic
14+
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest
15+
iPod Video, and a digital camera. Just take a snapshot of your iPod in
16+
your favorite location and we'll be glad to post it on myPod. So, what
17+
are you waiting for?
18+
</p>
19+
20+
<h2>Seattle, Washington</h2>
21+
<p>
22+
Me and my iPod in Seattle! You can see the
23+
Space Needle. You can't see the 628 coffee shops.
24+
</p>
25+
26+
<p>
27+
<a href="html/seattle_video_med.html">
28+
<img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA">
29+
</a>
30+
<a href="html/seattle_classic.html">
31+
<img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
32+
</a>
33+
<a href="html/seattle_shuffle.html">
34+
<img src="thumbnails/seattle_shuffle.jpg" alt="A iPod Shuffle in Seattle, WA">
35+
</a>
36+
<a href="html/seattle_downtown.html">
37+
<img src="thumbnails/seattle_downtown.jpg" alt="An iPod in downtown Seattle, WA">
38+
</a>
39+
</p>
40+
41+
<h2>Birmingham, England</h2>
42+
<p>
43+
Here are some iPod photos around Birmingham. We've obviously got some
44+
passionate folks over here who love their iPods. Check out the classic
45+
red British telephone box!
46+
</p>
47+
48+
<p>
49+
<a href="html/britain.html">
50+
<img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box">
51+
</a>
52+
<a href="html/applestore.html">
53+
<img src="thumbnails/applestore.jpg" alt="An iPod at the Birmingham Apple store">
54+
</a>
55+
</p>
56+
</body>
57+
</html>

‎HFHTML/chapter5/mypod/index_bak.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<html>
2+
<head>
3+
<title>myPod</title>
4+
<style type="text/css">
5+
body { background-color: #eaf3da; }
6+
</style>
7+
</head>
8+
<body>
9+
10+
<h1>Welcome to myPod</h1>
11+
<p>
12+
Welcome to the place to show off your iPod, wherever you might be.
13+
Wanna join the fun? All you need is any iPod, from the early classic
14+
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest
15+
iPod Photo, and a digital camera. Just take a snapshot of your iPod in
16+
your favorite location and we'll be glad to post it on myPod. So, what
17+
are you waiting for?
18+
</p>
19+
20+
<h2>Seattle, Washington</h2>
21+
<p>
22+
Me and my iPod in Seattle! You can see rain clouds and the
23+
Space Needle. You can't see the 628 coffee shops.
24+
</p>
25+
</body>
26+
</html>
27+

‎HFHTML/chapter5/mypod/index_thumbs.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<html>
2+
<head>
3+
<title>myPod</title>
4+
<style type="text/css">
5+
body { background-color: #eaf3da; }
6+
</style>
7+
</head>
8+
<body>
9+
10+
<h1>Welcome to myPod</h1>
11+
<p>
12+
Welcome to the place to show off your iPod, wherever you might be.
13+
Wanna join the fun? All you need is any iPod, from the early classic
14+
iPod to the latest iPod Nano, the smallest iPod Shuffle to the largest
15+
iPod Video, and a digital camera. Just take a snapshot of your iPod in
16+
your favorite location and we'll be glad to post it on myPod. So, what
17+
are you waiting for?
18+
</p>
19+
20+
<h2>Seattle, Washington</h2>
21+
<p>
22+
Me and my iPod in Seattle! You can see the
23+
Space Needle. You can't see the 628 coffee shops.
24+
</p>
25+
<p>
26+
<img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA">
27+
<img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
28+
<img src="thumbnails/seattle_shuffle.jpg" alt="An iPod shuffle in Seattle, WA">
29+
<img src="thumbnails/seattle_downtown.jpg" alt="An iPod in downtown Seattle, WA">
30+
</p>
31+
32+
<h2>Birmingham, England</h2>
33+
<p>
34+
Here are some iPod photos around Birmingham. We've obviously got some
35+
passionate folks over here who love their iPods. Check out the classic
36+
red British telephone box!
37+
</p>
38+
<p>
39+
<img src="thumbnails/britain.jpg" alt="An iPod in Birmingham at a telephone box">
40+
<img src="thumbnails/applestore.jpg" alt="An iPod at the Birmingham Apple store">
41+
</p>
42+
</body>
43+
</html>
44+

‎HFHTML/chapter5/mypod/logo/mypod.png

4.98 KB
Loading

‎HFHTML/chapter5/mypod/logo/mypod.psd

62.9 KB
Binary file not shown.

‎HFHTML/chapter5/mypod/photos/applestore.jpg

80 KB
Loading

‎HFHTML/chapter5/mypod/photos/britain.jpg

64.7 KB
Loading

‎HFHTML/chapter5/mypod/photos/seattle_classic.jpg

47.4 KB
Loading

‎HFHTML/chapter5/mypod/photos/seattle_classic_large.jpg

131 KB
Loading

‎HFHTML/chapter5/mypod/photos/seattle_downtown.jpg

53.6 KB
Loading

‎HFHTML/chapter5/mypod/photos/seattle_medium.jpg

23 KB
Loading

‎HFHTML/chapter5/mypod/photos/seattle_shuffle.jpg

52.2 KB
Loading

‎HFHTML/chapter5/mypod/photos/seattle_video.jpg

171 KB
Loading

‎HFHTML/chapter5/mypod/photos/seattle_video_med.jpg

12 KB
Loading

‎HFHTML/chapter5/mypod/thumbnails/applestore.jpg

45.4 KB
Loading

‎HFHTML/chapter5/mypod/thumbnails/britain.jpg

38.8 KB
Loading

‎HFHTML/chapter5/mypod/thumbnails/seattle_classic.jpg

5.57 KB
Loading

‎HFHTML/chapter5/mypod/thumbnails/seattle_downtown.jpg

36.9 KB
Loading

‎HFHTML/chapter5/mypod/thumbnails/seattle_shuffle.jpg

35.6 KB
Loading

‎HFHTML/chapter5/mypod/thumbnails/seattle_video_med.jpg

2.16 KB
Loading

‎HFHTML/chapter5/test.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Sharpen your pencil trivia</title>
5+
</head>
6+
<body>
7+
<p>How long a line can you draw with the typical pencil?</p>
8+
9+
<p><img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png" alt="The typical new pencil can draw a line 35 miles long."></p>
10+
11+
<p><img src="http://wickedlysmart.com/hfhtmlcss/trivia/penci.png" alt="The typical new pencil can draw a line 35 miles long."></p>
12+
13+
<p><img src="http://wickedlysmart.com/hfhtmlcss/trivia/pencil.png " width="48" height="100"></p>
14+
15+
16+
</body>
17+
</html>

‎README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
11
# HTML5-CSS-JAVASCRIPT
22
这是我学前段的一些Demo和总结
3+
4+
第一章 介绍了html得一些基本概念和css的基本概念和使用。
5+
第二章 重点讲了一些最基本的元素的用法。
6+
第三章 重点讲了页面之间的跳转、页面中连接地址的转换。<ul>的用法、各种元素的特性。
7+
第四章 重点讲了</a>元素的各种处理
8+
第五章 重点讲了<img>元素的各种处理。

0 commit comments

Comments
 (0)