实现样式要求：
image:
banner.png:
generaloverview.png:
background.png:
bannerbackground.png:
rottenbig.png:
rottenbackground.png:
| fresh.gif |
|
| rotten.gif |
|
| critic.gif |
|
文件目录：
-image
-movie.css
-skeleton.html
-tmnt.html
文件内容：
movie.css
body { background-image: url("images/background.png"); padding: 0; margin: 0; } * { font-size: 8pt; font-family: Verdana, Tahoma, sans-serif; } q { font-weight: bold; } .toppic { height: 50px; text-align: center; background-repeat: repeat-x; background-image: url("images/bannerbackground.png"); } .bigheading { text-align: center; font-size: 24pt; font-family: Tahoma, Verdana, sans-serif; font-weight: bold; } .main { position: relative; /*margin-right: auto; margin-left: auto;*/ overflow: hidden; border-bottom:0px; width:800px; margin:0 auto; border :4px gray solid; } .rottenbigDiv { margin-left: 0; width: 550px; float: left; background-image: url("images/rottenbackground.png"); background-repeat: repeat-x; } #redDiv { font-size: 48pt; color: red; font-weight: bold; /*vertical-align: bottom;*/ } .rottenbigDiv img { vertical-align: bottom; height: 83px; } #zitiDiv { color: white; /*vertical-align: 12px;*/ } .quote { /*font-size: 8pt;*/ background-color: #E1D697; border: 2px gray solid; padding: 8px; overflow: hidden; font-weight: bold; } .contentleft { width: 550px; margin: 0; overflow: hidden; } .contentDiv { margin-left: 2%; width: 47%; float: left; } .leftcontent { /*overflow: hidden;*/ /*margin-left: 2%;*/ margin-bottom: 3em; } .imagep { overflow: hidden; } .generaloverviewDiv { float: right; background-color: #A2B964; width:250px; padding-bottom: 10px; } dt { font-family: Arial, sans-serif; font-weight: bold; } dd { font-family: Arial, sans-serif; margin-bottom: 1em; } dl { margin: 1em; } #bar { padding: 5px; width:800px; text-align: center; background-color: #A2B964; float: right; margin: 0; } .bottom { float: right; position: fixed; right: 0px; bottom: 0px; } .kuangImage { float: left; vertical-align: top; margin-right: 5px; } .xieti { font-style: italic; }
skeleton.html
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TMNT - Rancid Tomatoestitle>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="movie.css" type="text/css" rel="stylesheet" />
head>
<body>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/banner.png" alt="Rancid Tomatoes" />
div>
<h1>TMNT (2007)h1>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/generaloverview.png" alt="general overview" />
div>
<dl>
<dt>STARRINGdt>
<dd>Mako <br /> Sarah Michelle Gellardd>
<dt>DIRECTORdt>
<dd>Kevin Munroedd>
<dt>RATINGdt>
<dd>PGdd>
<dt>THEATRICAL RELEASEdt>
<dd>Mar 23, 2007dd>
<dt>MOVIE SYNOPSISdt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.dd>
<dt>MPAA RATINGdt>
<dd>PG, for animated action violence, some scary cartoon images and mild languagedd>
<dt>RELEASE COMPANYdt>
<dd>Warner Bros.dd>
<dt>GENREdt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Charactersdd>
<dt>OFFICIAL MOVIE SITEdt>
<dd><a href="http://www.tmnt.com/">The Official TMNT Sitea>dd>
dl>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rottenbig.png" alt="Rotten" />
32% (88 reviews total)
div>
<p>
<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>
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
Peter Debruge <br />
Variety
p>
<p>
<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>
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
Todd Gilchrist <br />
IGN Movies
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/rotten.gif" alt="Rotten" />
<q>It stinks!q>
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
Jay Sherman (unemployed)
p>
<p>
<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>
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
Joshua Tyler <br />
CinemaBlend.com
p>
<p>
<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>
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
Jeannette Catsoulis <br />
New York Times
p>
<p>
<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>
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
Ed Gonzalez <br />
Slant Magazine
p>
<p>
<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>
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
Mark Palermo <br />
Coast (Halifax, Nova Scotia)
p>
<p>
<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>
p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/09sp/homework/2/critic.gif" alt="Critic" />
Steve Rhodes <br />
Internet Reviews
p>
<p>(1-8) of 88p>
<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>
body>
html>
tmnt.html
DOCTYPE html>
<html lang = "en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="movie.css" rel="stylesheet">
<title>TMNT - Rancid Tomatoestitle>
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="images/rotten.gif" type="image/gif" >
head>
<body>
<div class = "toppic">
<img src="images/banner.png" alt="Rancid Tomatoes" />
div>
<h1 class = "bigheading">TMNT (2007)h1>
<div class = "main">
<div class = "generaloverviewDiv">
<img src="images/generaloverview.png" alt="general overview" />
<dl>
<dt>STARRINGdt>
<dd>Mako <br /> Sarah Michelle Gellardd>
<dt>DIRECTORdt>
<dd>Kevin Munroedd>
<dt>RATINGdt>
<dd>PGdd>
<dt>THEATRICAL RELEASEdt>
<dd>Mar 23, 2007dd>
<dt>MOVIE SYNOPSISdt>
<dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.dd>
<dt>MPAA RATINGdt>
<dd>PG, for animated action violence, some scary cartoon images and mild languagedd>
<dt>RELEASE COMPANYdt>
<dd>Warner Bros.dd>
<dt>GENREdt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Charactersdd>
<dt>OFFICIAL MOVIE SITEdt>
<dd><a href="http://www.tmnt.com/">The Official TMNT Sitea>dd>
dl>
div>
<div class = "rottenbigDiv">
<img src="images/rottenbig.png" alt="Rotten" />
<span id = "redDiv">32%span><span id = "zitiDiv">(88 reviews total)span>
div>
<div class = "contentleft">
<div class = "contentDiv">
<div class = "leftcontent">
<p class = "quote">
<img class = "kuangImage" src="images/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>
p>
<p class = "imagep">
<img class = "kuangImage" src="images/critic.gif" alt="Critic" />
Peter Debruge <br />
<span class = "xieti">Varietyspan>
p>
div>
<div class = "leftcontent">
<p class = "quote">
<img class = "kuangImage" src="images/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>
p>
<p class = "imagep">
<img class = "kuangImage" src="images/critic.gif" alt="Critic" />
Todd Gilchrist <br />
<span class = "xieti">IGN Moviesspan>
p>
div>
<div class = "leftcontent">
<p class = "quote">
<img class = "kuangImage" src="images/rotten.gif" alt="Rotten" />
<q>It stinks!q>
p>
<p class = "imagep">
<img class = "kuangImage" src="images/critic.gif" alt="Critic" />
Jay Sherman (unemployed)
p>
div>
<div class = "leftcontent">
<p class = "quote">
<img class = "kuangImage" src="images/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>
p>
<p class = "imagep">
<img class = "kuangImage" src="images/critic.gif" alt="Critic" />
Joshua Tyler <br />
<span class = "xieti">CinemaBlend.comspan>
p>
div>
div>
<div class = "contentDiv">
<div class = "leftcontent">
<p class = "quote">
<img class = "kuangImage" src="images/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>
p>
<p class = "imagep">
<img class = "kuangImage" src="images/critic.gif" alt="Critic" />
Jeannette Catsoulis <br />
<span class = "xieti">New York Timesspan>
p>
div>
<div class = "leftcontent">
<p class = "quote">
<img class = "kuangImage" src="images/rotten.gif" alt="Rotten" />
<q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.q>
p>
<p class = "imagep">
<img class = "kuangImage" src="images/critic.gif" alt="Critic" />
Ed Gonzalez <br />
<span class = "xieti">Slant Magazinespan>
p>
div>
<div class = "leftcontent">
<p class = "quote">
<img class = "kuangImage" src="images/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>
p>
<p class = "imagep">
<img class = "kuangImage" src="images/critic.gif" alt="Critic" />
Mark Palermo <br />
<span class = "xieti">Coast (Halifax, Nova Scotia)span>
p>
div>
<div class = "leftcontent">
<p class = "quote">
<img class = "kuangImage" src="images/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>
p>
<p class = "imagep">
<img class = "kuangImage" src="images/critic.gif" alt="Critic" />
Steve Rhodes <br />
<span class = "xieti">Internet Reviewsspan>
p>
div>
div>
div>
<p id = "bar">(1-8) of 88p>
div>
<div class = "bottom">
<a href="http://validator.w3.org/check/referer"><img src="images/w3c-xhtml.png" alt="Valid XHTML 1.1" />a> <br />
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="images/w3c-css.png" alt="Valid CSS!" />a>
div>
body>
html>
推荐使用chrome扩展程序Page Ruler