我花了2个多小时才想明白。通过验证器等运行
这是一个课堂作业，我不知道如何得到这个部分。正确排列的主类。
列出了html和css。我还没有完成作业，但是当你看这个网站时，很明显我在浮动部分有什么问题。Main类之类的。对不起，这是第一次。
如果更容易看到的网站，你可以查看它在这里。http://ddawes27.webstudentsites.com/tut04/review/rose.htm
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
.main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
h1.main {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
p.main {
margin: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li><a href="#">Events Page</a></li>
<li class="newgroup"><a href="#">Rose Hill Rally</a></li>
<li><a href="#">Tour the Palisades</a></li>
<li><a href="#">Gunnison Challenge</a></li>
<li><a href="#">Steamboat Springs Rally</a></li>
<li><a href="#">Copper Triangle</a></li>
<li><a href="#">Durango Tour</a></li>
<li><a href="#">Montrose Meander</a></li>
<li class="newgroup"><a href="#">Route Sheets & Maps</a></li>
<li><a href="#">Grand Junction Bike Fest</a></li>
<li><a href="#">Off-Road Cycling</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Photo Album</a></li>
<li><a href="#">Editor</a></li>
<li><a href="#">Sponsors</a></li>
<li class="newgroup"><a href="#">Cycling Links</a></li>
<li><a href="#">Colorado Cycling Groups</a></li>
<li><a href="#">U.S. Bike Federation</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li class="newgroup"><a href="#">About Cycle Pathology</a></li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Members Only</a></li>
<li><a href="#">Market Place</a></li>
<li><a href="#">Message Board</a></li>
<li><a href="#">Contact Info</a></li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>在#main后添加h1和p age
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
#main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
#main h1 {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
#main p {
margin: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li><a href="#">Events Page</a></li>
<li class="newgroup"><a href="#">Rose Hill Rally</a></li>
<li><a href="#">Tour the Palisades</a></li>
<li><a href="#">Gunnison Challenge</a></li>
<li><a href="#">Steamboat Springs Rally</a></li>
<li><a href="#">Copper Triangle</a></li>
<li><a href="#">Durango Tour</a></li>
<li><a href="#">Montrose Meander</a></li>
<li class="newgroup"><a href="#">Route Sheets & Maps</a></li>
<li><a href="#">Grand Junction Bike Fest</a></li>
<li><a href="#">Off-Road Cycling</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Photo Album</a></li>
<li><a href="#">Editor</a></li>
<li><a href="#">Sponsors</a></li>
<li class="newgroup"><a href="#">Cycling Links</a></li>
<li><a href="#">Colorado Cycling Groups</a></li>
<li><a href="#">U.S. Bike Federation</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li class="newgroup"><a href="#">About Cycle Pathology</a></li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Members Only</a></li>
<li><a href="#">Market Place</a></li>
<li><a href="#">Message Board</a></li>
<li><a href="#">Contact Info</a></li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>main是一个非类的id: #main而不是.main
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
#main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
#main h1 {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
#main p {
margin: 15px;
}<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li><a href="#">Events Page</a></li>
<li class="newgroup"><a href="#">Rose Hill Rally</a></li>
<li><a href="#">Tour the Palisades</a></li>
<li><a href="#">Gunnison Challenge</a></li>
<li><a href="#">Steamboat Springs Rally</a></li>
<li><a href="#">Copper Triangle</a></li>
<li><a href="#">Durango Tour</a></li>
<li><a href="#">Montrose Meander</a></li>
<li class="newgroup"><a href="#">Route Sheets & Maps</a></li>
<li><a href="#">Grand Junction Bike Fest</a></li>
<li><a href="#">Off-Road Cycling</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Photo Album</a></li>
<li><a href="#">Editor</a></li>
<li><a href="#">Sponsors</a></li>
<li class="newgroup"><a href="#">Cycling Links</a></li>
<li><a href="#">Colorado Cycling Groups</a></li>
<li><a href="#">U.S. Bike Federation</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li class="newgroup"><a href="#">About Cycle Pathology</a></li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Members Only</a></li>
<li><a href="#">Market Place</a></li>
<li><a href="#">Message Board</a></li>
<li><a href="#">Contact Info</a></li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>id vs class
你好像犯了个小错误。在css文件中，使用#main代替.main。因为目前，这些css行并没有被查看(除非你在某处有一个.main类)。
要进一步了解id和类之间的区别，请阅读此页