web2.0作业二：设计movie review

Posted on | In | |
Words count in article: 1.6k | Reading time ≈ 9 
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>TMNT - Rancid Tomatoes</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="movie.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div class="banner">
			<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/banner.png" alt="Rancid Tomatoes" />
		</div>
		<h1>TMNT (2007)</h1>
		<div class="box1">
			<div class="content">
				<div class="rright">
					<div>
						<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/generaloverview.png" alt="general overview" />
					</div>
					<dl>
						<dt>STARRING</dt>
						<dd>Mako <br /> Sarah Michelle Gellar</dd>

						<dt>DIRECTOR</dt>
						<dd>Kevin Munroe</dd>

						<dt>RATING</dt>
						<dd>PG</dd>

						<dt>THEATRICAL RELEASE</dt>
						<dd>Mar 23, 2007</dd>

						<dt>MOVIE SYNOPSIS</dt>
						<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>

						<dt>MPAA RATING</dt>
						<dd>PG, for animated action violence, some scary cartoon images and mild language</dd>

						<dt>RELEASE COMPANY</dt>
						<dd>Warner Bros.</dd>

						<dt>GENRE</dt>
						<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>

						<dt>OFFICIAL MOVIE SITE</dt>
						<dd><a href="http://www.tmnt.com/">The Official TMNT Site</a></dd>
					</dl>
				</div>
				<div class="all">
					<div class="contenthead">
						<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rottenbig.png" alt="Rotten" />
						<span class="num1">32%</span><span class="num2">(88 reviews total)</span>
					</div>
					<div class="leftt">	
						<div class="qbox">
								<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
								<q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
						</div>	
						<p class="reviewsinfo">
							<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
							Peter Debruge <br />
							<span>Variety</span>
						</p>
						<div class="qbox">
								<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/fresh.gif" alt="Fresh" />
								<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
						</div>
						<p  class="reviewsinfo">
							<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
							Todd Gilchrist <br />
							<span>IGN Movies</span>
						</p>
						<div class="qbox">
								<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
								<q>It stinks!</q>
						</div>
						<p  class="reviewsinfo">
							<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
							Jay Sherman (unemployed)
						</p>
						<div class="qbox">
								<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
								<q>The rubber suits are gone and they've been redone with fancy computer technology, but that hasn't stopped them from becoming dull.</q>
						</div>
						<p  class="reviewsinfo">
							<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
							Joshua Tyler <br />
							<span>CinemaBlend.com</span>
						</p>
					</div>
					<div class="rightt">
						<div class="qbox">
								<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
								<q>The turtles themselves may look prettier, but are no smarter; torn irreparably from their countercultural roots, our superheroes on the half shell have been firmly co-opted by the industry their creators once sought to spoof.</q>
						</div>
						<p  class="reviewsinfo"> 
							<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
							Jeannette Catsoulis <br />
							<span>New York Times</span>
						</p>
						<div class="qbox">
								<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
								<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
						</div>
						<p  class="reviewsinfo">
							<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
							Ed Gonzalez <br />
							<span>Slant Magazine</span>
						</p>
						<div class="qbox">
								<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/fresh.gif" alt="Fresh" />
								<q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
						</div>
						<p  class="reviewsinfo">
							<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
							Mark Palermo <br />
							<span>Coast (Halifax, Nova Scotia)</span>
						</p>
						<div class="qbox">
								<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
								<q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
						</div>
						<p  class="reviewsinfo">
							<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
							Steve Rhodes <br />
							<span>Internet Reviews</span>
						</p>
					</div>
				</div>
				<p class="last">(1-8) of 88</p>
			</div>
			<div class="c3">
				<a href="http://validator.w3.org/check/referer"><img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/w3c-xhtml.png" alt="Valid XHTML 1.1" /></a> <br />
				<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/w3c-css.png" alt="Valid CSS!" /></a>
			</div>
		</div>
	</body>
</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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
body{
	background-image: url('http://hcp.sysu.edu.cn/wiki/download/attachments/32833570/background.png?version=1&modificationDate=1268939512000&api=v2');	 
	font-size: 8pt;
	font-family: "Verdana", "Tahoma", "sans-serif";
	margin: 0pt;
	padding: 0pt;
}


.banner{
	background-image: url('http://hcp.sysu.edu.cn/wiki/download/attachments/32833570/bannerbackground.png?version=1&modificationDate=1268939512000&api=v2');
	text-align: center;
	height: 50px;
}

h1{
	font-size: 24pt;
	font-weight: bold;
	text-align: center;
	font-family: "Tahoma", "Verdana", "sans-serif";
}

.content{
	margin: 0 auto;
	width: 800px;
	border: 4px gray solid;
	overflow: hidden;
}

.all{
	width: 550px;
}

.contenthead{
	width: 550px;
	float: left;
	background-image: url('http://hcp.sysu.edu.cn/wiki/download/attachments/32833570/rottenbackground.png?version=1&modificationDate=1268939585000&api=v2');
	height: 83px;
}

.contenthead img{
	float: left;
}

.contenthead .num1{
	font-size: 48pt;
	color: red;
	font-weight: bold;
	line-height: 140%;
	/*display: inline;*/
}

.contenthead .num2{
	font-size: 8pt;
	color: white;	
}

.leftt{
	width: 47%;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 2%;
	float: left;
}

.rightt{
	width: 47%;
	padding-right: 2%;
	padding-top: 2%;
	float: right;
}


.qbox{
	font-size: 8pt;
	font-weight: bold;
	background-color: #E1D697;
	border: 2px solid gray;
	padding: 8px;
	overflow: hidden;
}


.qbox img{
	float: left;
	padding-right: 5px;
}

.reviewsinfo{
	margin-bottom: 3em;
	overflow: hidden;
}

.reviewsinfo img{
	float: left;
	padding-right: 5px;
}

.reviewsinfo span{
	font-style: italic;
}

.rright{
	background-color: #A2B964;
	font-size: 8pt;
	font-family: "Arial", "sans-serif";
	float: right;
	width: 250px;
}

.rright dl{
	padding-left: 10px;
	padding-right: 10px;
}

.rright dt{
	font-weight: bold;
}

.rright dd{
	padding-bottom: 1em;
}

.last{
	background-color: #A2B964;
	padding: 5px;
	clear: right;
	margin: 0;
	text-align: center;
}

.c3{
	position: absolute;
	right: 0;
	bottom: 0;
}

.box1{
	position: relative;
}

1

1

Donate? comment?