0
我基本上是試圖複製這個assignment網頁輸出。網頁中使用的圖片是here。這基本上是我在這一切中的最終目標，使網頁儘可能接近所需的輸出。
所有樣式都必須在CSS中實現。我可以使用的唯一HTML標籤是組織標籤。
問題
的格式和間距與我試圖創建和複製的網頁竟然是錯的。
每個文字氣泡都應該被20pts的垂直距離分開。這是我試圖在CSS中實現的東西，如下所示：
.reviewer-text {
padding-bottom: 20pt;
}
但是，這不起作用。幾乎所有的文字泡泡都錯開了一個不應該在的位置。
如果您看到由審閱者Jay Sherman編寫的單行文字氣泡，則垂直距離會更小，並且文本氣泡中的圖標未以其他徽標圖像的方式居中。
使用Firebug檢查元素時，我注意到填充僅應用於文本。我不知道如何解決這個問題。我需要將填充作爲整體應用於元素。填充表面看起來適用於其餘元素，因爲有多行文本，但它並不是真的。
這需要主要需要解決的問題
- 我需要修復的審查之間的填充。
- 我需要修復評論中的圖像，以便它們正確定向。
- 我需要修復標題，使其位於所需輸出中的標題的相同位置。
所有這些東西都需要修正而不影響網頁其他部分的格式。最終目標是儘可能保持接近期望的輸出。
Current Output overlayed on Desired Output
^這應該使兩個更直接明顯的差異。
代碼
#banner {
\t height: 50px;
\t background-image: url(https://webster.cs.washington.edu/images/rancidbannerbg.png);
\t background-repeat: repeat-x;
}
#banner img {
\t display: block;
\t margin-left: auto;
\t margin-right: auto;
}
body {
\t background-image: url(https://webster.cs.washington.edu/images/moviebg.png);
\t font-family: Arial, Helvetica, sans-serif;
\t font-size: 10pt;
\t margin: 0px;
\t padding: 0px;
}
#column-left, #column-right {
\t margin-right: 2%;
\t width: 47%;
}
#column-left {
\t float: left;
\t margin-left: 2%;
}
#column-right {
\t float: right;
}
#container {
\t background-color: #EEEEEE;
\t border-radius: 20px;
\t box-shadow: 5px 5px 5px gray;
\t margin: auto;
\t width: 800px;
}
#date {
\t background-color: #A2B964;
\t clear: both;
\t margin-bottom: 0;
\t padding: 5px;
\t text-align: center;
}
h1, .reviewer-text {
\t font-family: Georgia, "Times New Roman", serif;
}
h1 {
\t font-size: 24pt;
\t font-weight: bold;
\t text-align: center;
\t text-shadow: 3px 3px #999999;
}
#logo {
\t background-image: url(https://webster.cs.washington.edu/images/rottenlargebg.png);
\t background-repeat: repeat-x;
\t height: 83px;
\t font-size: 48pt;
\t font-weight: bold;
\t color: red;
}
#logo img {
\t vertical-align: bottom;
}
.publication {
\t font-style: italic;
}
#reviews {
\t width: 550px;
}
.reviewer-info {
\t padding-bottom: 20px;
}
.reviewer-info img, .reviewer-text img {
\t float: left;
\t margin-right: 5px;
}
.reviewer-text {
\t background-color: #FFFFFF;
\t border: 2px solid #CCCCCC;
\t border-radius: 20px;
\t padding-top: 8px;
\t padding-bottom: 8px;
\t padding-left: 8px;
\t padding-right: 8px;
}
#general-overview {
\t width: 250px;
\t background-color: #A2B964;
\t font-family: Arial, Helvetica, sans-serif;
\t float: right;
}
#general-overview dt {
\t font-weight: bold;
\t margin-top: 10pt;
\t padding-left: 10pt;
}
#general-overview dd {
\t padding-left: 10pt;
\t padding-right: 10pt;
}
#general-overview ul {
\t list-style: none;
\t margin: 0px;
\t padding: 0px;
}
#validators {
\t bottom: 0px;
\t right: 0px;
\t position: fixed;
\t opacity: 0.5;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>TMNT - Rancid Tomatoes</title>
\t \t <meta charset="utf-8" />
\t \t <link href="movie.css" type="text/css" rel="stylesheet" />
\t \t <link rel="icon" type="image/gif" href="rotten.gif" />
\t </head>
\t <body>
\t \t <div id = "banner">
\t \t \t <img src="https://webster.cs.washington.edu/images/rancidbanner.png" alt="Rancid Tomatoes" />
\t \t </div>
\t \t <h1>TMNT (2007)</h1>
\t \t <div id="container">
\t \t \t <div id="general-overview">
\t \t \t \t <div>
\t \t \t \t \t <img src="https://webster.cs.washington.edu/images/overview.png" alt="general overview" />
\t \t \t \t </div>
\t \t \t \t <dl>
\t \t \t \t \t <dt>STARRING</dt>
\t \t \t \t \t <dd>Patrick Stewart <br /> Mako <br /> Sarah Michelle Gellar <br /> Kevin Smith</dd>
\t \t \t \t \t <dt>DIRECTOR</dt>
\t \t \t \t \t <dd>Kevin Munroe</dd>
\t \t \t \t \t <dt>RATING</dt>
\t \t \t \t \t <dd>PG</dd>
\t \t \t \t \t <dt>THEATRICAL RELEASE</dt>
\t \t \t \t \t <dd>Mar 23, 2007</dd>
\t \t \t \t \t <dt>MOVIE SYNOPSIS</dt>
\t \t \t \t \t <dd>After the defeat of their old arch nemesis, The Shredder, the Turtles have grown apart as a family.</dd>
\t \t \t \t \t <dt>MPAA RATING</dt>
\t \t \t \t \t <dd>PG, for animated action violence, some scary cartoon images and mild language</dd>
\t \t \t \t \t <dt>RELEASE COMPANY</dt>
\t \t \t \t \t <dd>Warner Bros.</dd>
\t \t \t \t \t <dt>RUNTIME</dt>
\t \t \t \t \t <dd>90 mins</dd>
\t \t \t \t \t <dt>GENRE</dt>
\t \t \t \t \t <dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
\t \t \t \t \t <dt>BOX OFFICE</dt>
\t \t \t \t \t <dd>$54,132,596</dd>
\t \t \t \t \t <dt>LINKS</dt>
\t \t \t \t \t <dd>
\t \t \t \t \t \t <br />
\t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t <li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
\t \t \t \t \t \t \t <li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
\t \t \t \t \t \t \t <li><a href="http://www.rottentomatoes.com/">RT Home</a></li>
\t \t \t \t \t \t </ul>
\t \t \t \t \t </dd>
\t \t \t \t </dl>
\t \t \t </div>
\t \t \t
\t \t \t <div id="reviews">
\t \t \t \t <div id="logo">
\t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rottenlarge.png" alt="Rotten" />
\t \t \t \t \t 33%
\t \t \t \t </div>
\t \t \t \t <div id="column-left">
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t \t \t <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>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t Peter Debruge <br />
\t \t \t \t \t \t <span class="publication">Variety</span>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
\t \t \t \t \t \t <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t Todd Gilchrist <br />
\t \t \t \t \t \t <span class="publication">IGN Movies</span>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t \t \t <q>It stinks!</q>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t Jay Sherman (unemployed)
\t \t \t \t \t \t <br />
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t \t \t <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>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t Joshua Tyler <br />
\t \t \t \t \t \t <span class="publication">CinemaBlend.com</span>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t \t \t <q>This movie sucks because reasons.</q>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t T. Tally Nobias <br />
\t \t \t \t \t \t <span class="publication">objectivereviews.com</span>
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t \t <div id="column-right">
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t \t \t <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>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t Jeannette Catsoulis <br />
\t \t \t \t \t \t <span class="publication">New York Times</span>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t \t \t <q>Impersonally animated and arbitrarily plotted, the story appears to have been made up as the filmmakers went along.</q>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t Ed Gonzalez <br />
\t \t \t \t \t \t <span class="publication">Slant Magazine</span>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
\t \t \t \t \t \t <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t Mark Palermo <br />
\t \t \t \t \t \t <span class="publication">Coast (Halifax, Nova Scotia)</span>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t \t \t <q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t Steve Rhodes <br />
\t \t \t \t \t \t <span class="publication">Internet Reviews</span>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-text">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/rotten.gif" alt="Rotten" />
\t \t \t \t \t \t <q>This movie is literally the worst movie ever. I'm not going to explain why. -10000000/10.</q>
\t \t \t \t \t </p>
\t \t \t \t \t <p class="reviewer-info">
\t \t \t \t \t \t <img src="https://webster.cs.washington.edu/images/critic.gif" alt="Critic" />
\t \t \t \t \t \t A. Rheal Kritik <br />
\t \t \t \t \t \t <span class="publication">Facade Inc.</span>
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <p id="date">(1-10) of 88</p>
\t \t </div>
\t \t <div id="validators">
\t \t \t <a href="https://webster.cs.washington.edu/validate-html.php"><img src="https://webster.cs.washington.edu/images/w3c-html.png" alt="Valid HTML5" /></a><br />
\t \t \t <a href="https://webster.cs.washington.edu/validate-css.php"><img src="https://webster.cs.washington.edu/images/w3c-css.png" alt="Valid CSS" /></a>
\t \t </div>
\t </body>
</html>
謝謝，這似乎解決了標題。你有任何想法來修復評論中的填充和標誌嗎？ – user3450277
哪個logo意味着爛33％？ –
哦，對不起。腐爛33％是你修正的標題。我的意思是評論左上角的圖片。 .reviewer-text img – user3450277