实现样式要求：
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 Tomatoes</title> <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>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> <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 88</p> <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 Tomatoes</title> <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>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 = "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">Variety</span> </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 Movies</span> </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.com</span> </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 Times</span> </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 Magazine</span> </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 Reviews</span> </p> </div> </div> </div> <p id = "bar">(1-8) of 88</p> </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