web2.0作业一：设计index主页和Pie内容页

Posted on | In | |
Words count in article: 1.5k | Reading time ≈ 9

1
1

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
* {
    box-sizing: border-box;
    -moz-box-sizing:border-box; 
}

h1{
    transition: 2s;
}

h1:hover{
    transform: scale(1.1);
}

.head {
    padding: 20px;
    text-align: center;
    font-size: 22pt;
    background: #EE9A00;
    color: white;
    font-family: sans-serif;
}

.menu {
    overflow: hidden;
    background-color: #333;
}

.menu a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 8px 20px;
    text-decoration: none;
}

.menu a:hover {
    background-color: #ddd;
    color: black;
}

.content {  
    display: -ms-flexbox; 
    display: flex;
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap;
}

.leftt {
    -ms-flex: 25%; 
    flex: 25%;
    background-color: #BBBBBB;
    padding: 20px;
}

.leftt p{
	font-size: 22pt;
    color: white;
    font-family: sans-serif;
}

.leftt p:hover {
    color: #FF9F0F;
}

.leftt img{
    transition: 2s;
}

.leftt img:hover{
    transform: scale(1.1);
}

.rightt {   
    -ms-flex: 75%; 
    flex: 75%;
    background-color: #f1f1f1;
    padding: 20px;
}

.rightt a{
	font-size: 15pt;
    font-family: sans-serif;
    color: black;
}

.rightt a:hover {
    color: #FF7F00;
}

.week2 ul{
	list-style-image: url('http://courses.cs.washington.edu/courses/cse190m/09sp/homework/1/pie_icon.gif');
	list-style-type: none;
}

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Index of Homework</title>
		<meta name="description" content="index of homework" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="index.css">
		<link href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567590043834&di=eb8b284c4cf45cadbd526bfe14d54772&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F18%2F02%2F18%2F597a908f980e964090d3eb910f39acf3.jpg%2521%2Ffwfh%2F804x804%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue" type="image/gif" rel="shortcut icon" />
		
	</head>

	<body>
		<div class="head">
		  <h1>Homework Of Web2.0</h1>
		</div>

		<div class="menu">
		  <a href="https://www.google.com">Google</a>
		  <a href="https://www.baidu.com/">Baidu</a>
		  <a href="http://validator.w3.org/">HTML</a>
		  <a href="http://jigsaw.w3.org/css-validator/">CSS</a>
		</div>

		<div class="content">
		  <div class="leftt">
		      <div align="center">
		      	<img src="https://wx4.sinaimg.cn/mw690/c79a1380gy1g6npxzglzzj20j70j8wft.jpg" width="280px" height="280px" />
		      	<p> Homework Index Of <br /> Zhuomin Zheng</p>
		      </div>
		  </div>
		  <div class="rightt">
		  		<div class="week2">
			      <h2>Week2:</h2>
			      	<ul>
			      		<li> <a href="pie.html"> A Recipe Of Grandma's Lemon Meringue Pie </a> </li>
			      	</ul>
			    </div>
		      	<div class="week3">
			      <h2>Week3:</h2>
			    </div>
			    <div class="week4">
			      <h2>Week4:</h2>
			    </div>
			    <div class="week5">
			      <h2>Week5:</h2>
			    </div>
			    <div class="week6">
			      <h2>Week6:</h2>
			    </div>
		  </div>
		</div>

	</body>
</html>

pie.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
body{
	background-image: url('http://courses.cs.washington.edu/courses/cse190m/09sp/homework/1/silverware.jpg');

}

h1, h2{
	letter-spacing: 0.2em;
	background-color: #F0F0F0;
	color: #A4A400;
	font-family: "Century Gothic", "Futura", "Verdana", "sans-serif";
	text-decoration: underline;
}

h1{
	font-size: 22pt;
	font-weight: bold;
	text-align: center;
}

h2{
	text-align: left;
	font-size: 18pt;
	font-weight: normal;
}

p, li, blockquote, a{
	color:  #404040;
	font-size: 11pt;
	font-family: "Georgia", "Garamond", "sans-serif";
}


ul{
	list-style-image: url('http://courses.cs.washington.edu/courses/cse190m/09sp/homework/1/pie_icon.gif');
	list-style-type: none;
}

a{
	color: #A4A400;

}

blockquote{
	background-color: #FFFFC8;
}

hr{
	border: none;
	border-top:2pt solid #D3D3D3;
}

pie.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Grandma's Lemon Meringue Pie</title>
		<meta name="description" content="homework of web2.0" />
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="recipe.css">
		<link href="http://courses.cs.washington.edu/courses/cse190m/09sp/homework/1/pie_icon.gif" type="image/gif" rel="shortcut icon" />
	</head>

	<body>
		<h1> Grandma's Lemon Meringue Pie </h1>

		<hr />
		<div>
			<img src="http://courses.cs.washington.edu/courses/cse190m/09sp/homework/1/pie.jpg" alt="Grandma's Pie" />
			<p> One 9-inch pie <br />
			 30 Min - Prep time <br />
			 10 Min - Cook time <br />
			 40 Min - Total <br />
			 8 Servings </p>
		</div>

		<hr />

		<h2> INGREDIENTS </h2>

		<div>
			<ul>
				<li> 1 cup white sugar </li>
				<li> 2 tablespoons all-purpose flour </li>
				<li> 3 tablespoons cornstarch </li>
				<li> 1/4 teaspoon salt </li>
				<li> 1 1/2 cups water </li>
				<li> 2 lemons, juiced and zested </li>
				<li> 2 tablespoons butter </li>
				<li> 4 egg yolks, beaten </li>
				<li> 1 (9 inch) pie crust, bakes </li>
				<li> 4 egg whites</li>
				<li> 6 tablespoons white sugar </li>
			</ul>
		</div>

		<hr />

		<h2> DIRECTIONS </h2>

		<div>
			<ol>
				<li> <strong>Preheat Oven</strong>: Preheat oven to 350 degrees F(175 degrees C). </li>
				<li> <strong> Make Lemon Filling:</strong> In a medium saucepan ...
					<ul>
						<li> Whisk together 1 cup sugar, flour, cornstarch, and salt. </li>
						<li> Stir in water, lemon juice and lemon zest. </li>
						<li> Cook over medium-high heat, stirring frequently, until mixture comes to a boil. </li>
						<li> Stir in butter. </li>
						<li> Place egg yolks in a small bowl and gradually whisk in 1/2 cup of hot sugar mixture. </li>
						<li> Whisk egg yolk mixture back into remaining sugar mixture. </li>
						<li> Bring to a boil and continue to cook while stirring constantly until thick. </li>
					</ul>
				</li>
				<li> <strong>  Make Meringue:</strong> In a large glass or metal bowl...
					<ul>
						<li> Whip egg whites until foamy. </li>
						<li> Add sugar gradually, and continue to whip until stiff peaks form. </li>
						<li> Spread meringue over pie, sealing the edges at the crust. </li>
					</ul>
				</li>
				<li> <strong>Bake ：</strong>Bake in preheated oven for 10 minutes, or until meringue is golden brown. </li>
			</ol>
		</div>

		<hr />

		<h2> USER COMMENTS</h2>

		<div>
			<blockquote >
				<em>
					This is a very fun recipe to follow, because Grandma makes it sweet and simple. This pie is thickened with cornstarch and flour in addition to egg yolks, and contains no milk.
					<br /><br />
					- Emilie S.
				</em>
			</blockquote>
			<blockquote >
				<em>
					Q: What do you call an ape who loves pie?
					<br />
					A: A meringue-utan.
					<br /><br />
					- Vickie K.
				</em>
			</blockquote>
		</div>

		<hr />
		<h2> LINKS </h2>

		<div>
			<a href=" https://www.google.com.hk/search?q=lemon+meringue+pie+recipe"> Search for other lemon meringue pie recipes </a><br />
			<a href="index.html"> Home </a><br /><br />
			<a href="http://validator.w3.org/check/referer">
				<img src="http://www.w3.org/Icons/valid-xhtml11" alt="html"/> 
			</a>
			<a href="http://jigsaw.w3.org/css-validator/check/referer">
				<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="css"/>
			</a>
		</div>
	</body>
</html>
Donate? comment?