【发布时间】：2016-07-04 04:32:13
【问题描述】：
2 多个小时以来一直试图解决这个问题。通过验证器等运行它。
这是一个课堂作业，我不知道如何让 section.main 类正确排列。
列出了 html 和 css。我还没有完成作业，但是当您查看该站点时，很明显我在正确浮动 section.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>【问题讨论】：
-
section#main，ID 不是类，类用 .前缀，id 用 # 前缀表示
标签： css html css-selectors