html - CSS 覆盖命令
问题描述
我想在我的页面正文中放置一个框，但不包括上部区域的两个元素。
我为元素编写了代码，但似乎已被忽略：
编辑：我添加了 HTML。我无法创建其他 div，所以我不知道如何指定这两个元素必须从 body 的 css 中编写的代码中排除。
body {
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/background.png");
margin: 0;
padding: 0;
font-size: 8pt;
font-family: "Tahoma";
width: 800px;
border: 4px solid red;
}
#banner {
text-align: center;
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/bannerbg.png");
background-repeat: repeat-x;
height: 50px;
}
h1 {
text-align: center;
font-style: bold;
font-family: "Verdana";
font-size: 24pt;
text-shadow: 3px 3px #999999;
}<!DOCTYPE html>
<head>
<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 id="banner">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/banner.png" alt="Rancid Tomatoes">
</div>
<h1>TMNT (2007)</h1>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/overview.png" alt="general overview">
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br> Mako <br> Sarah Michelle Gellar <br> Kevin Smith</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>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<ul>
<li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
<li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
<li><a href="http://www.rottentomatoes.com/">RT Home</a></li>
<li><a href="http://www.cs.washington.edu/190m/">CSE 190 M</a></li>
</ul>
</dd>
</dl>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rottenbig.png" alt="Rotten">
33%
</div>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic">
Peter Debruge <br>
Variety
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic">
Todd Gilchrist <br>
IGN Movies
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>It stinks!</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
Jay Sherman (unemployed)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic">
Joshua Tyler <br>
CinemaBlend.com
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
NAME <br>
PUBLICATION
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic">
Jeannette Catsoulis <br>
New York Times
</p>
<p class="rotten">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic">
Ed Gonzalez <br>
Slant Magazine
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/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/11sp/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/11sp/homework/2/critic.gif" alt="Critic">
Steve Rhodes <br>
Internet Reviews
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic">
NAME <br>
PUBLICATION
</p>
<p>(1-10) of 88</p>
<div>
<a href="ttp://validator.w3.org/check/referer"><img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/w3c-xhtml.png" alt="Validate HTML">></a> <br>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
</div>
</body>
</html>页面应该是这样的： 在此处输入图像描述
解决方案
问题是您限制了 的宽度，不建议body这样做。而是将除要排除的元素之外的所有内容包装在单独的容器 div中并限制其宽度。
body {
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/background.png");
margin: 0;
padding: 0;
font-size: 8pt;
font-family: "Tahoma";
}
.container {
margin: auto;
max-width: 800px;
border: 4px solid red;
}
#banner {
text-align: center;
background-image: url("https://courses.cs.washington.edu/courses/cse190m/11sp/homework/2/bannerbg.png");
background-repeat: repeat-x;
height: 50px;
}
h1 {
text-align: center;
font-style: bold;
font-family: "Verdana";
font-size: 24pt;
text-shadow: 3px 3px #999999;
}<div id="banner">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/banner.png" alt="Rancid Tomatoes">
</div>
<div class="container">
<h1>TMNT (2007)</h1>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/overview.png" alt="general overview">
</div>
<dl>
<dt>STARRING</dt>
<dd>Patrick Stewart <br> Mako <br> Sarah Michelle Gellar <br> Kevin Smith</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>RUNTIME</dt>
<dd>90 mins</dd>
<dt>GENRE</dt>
<dd>Action/Adventure, Comedies, Childrens, Martial Arts, Superheroes, Ninjas, Animated Characters</dd>
<dt>BOX OFFICE</dt>
<dd>$54,132,596</dd>
<dt>LINKS</dt>
<dd>
<ul>
<li><a href="http://www.ninjaturtles.com/">The Official TMNT Site</a></li>
<li><a href="http://www.rottentomatoes.com/m/teenage_mutant_ninja_turtles/">RT Review</a></li>
<li><a href="http://www.rottentomatoes.com/">RT Home</a></li>
<li><a href="http://www.cs.washington.edu/190m/">CSE 190 M</a></li>
</ul>
</dd>
</dl>
<div>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rottenbig.png" alt="Rotten"> 33%
</div>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic"> Peter Debruge <br> Variety
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic"> Todd Gilchrist <br> IGN Movies
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>It stinks!</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> Jay Sherman (unemployed)
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic"> Joshua Tyler <br> CinemaBlend.com
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> NAME <br> PUBLICATION
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic"> Jeannette Catsoulis <br> New York Times
</p>
<p class="rotten">
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/homework/2/critic.gif" alt="Critic"> Ed Gonzalez <br> Slant Magazine
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/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/11sp/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/11sp/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/11sp/homework/2/critic.gif" alt="Critic"> Steve Rhodes <br> Internet Reviews
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/rotten.gif" alt="Rotten">
<q>YOUR REVIEW HERE</q>
</p>
<p>
<img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/critic.gif" alt="Critic"> NAME <br> PUBLICATION
</p>
<p>(1-10) of 88</p>
<div>
<a href="ttp://validator.w3.org/check/referer"><img src="http://www.cs.washington.edu/education/courses/cse190m/11sp/homework/2/w3c-xhtml.png" alt="Validate HTML">></a> <br>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
</div>
</div>推荐阅读
- sql - 过滤日期时间未按预期工作
- php - Symfony 4如何根据条件在约束中使用UniqueEntity
- c++ - 在 Qt for WebAssembly 中加载多个文件
- javascript - 在具有相同 iD 的多个元素上使用变量值
- openssl - 由于 openSSL 椭圆曲线不匹配（EC_POINT_is_on_curve）导致守护进程崩溃
- java - hadoop 错误：找不到与图像文件对应的 MD5 文件
- javascript - 如何限制异步任务，直到循环中没有工作？
- generics - ForEach 中的内容不应该符合 View
- express - 如何使用相同的路线，一条带参数，一条不带？
- html - 如何在没有背景“故障”的情况下添加 HTML 按钮？