坚持做作业问题。这就是网页应该是这样的: http://www.acsu.buffalo.edu/~amnero/lincoln.htm
我只在我的HTML和CSS书的第4章。我正在学习CSS的基础知识,所以这个任务很大程度上基于CSS。 HTML文件已经附带本教程。我花了很多时间来看看我错过或错过的东西。有人可以看看我的代码,让我知道我做错了什么?你可以帮忙,因为我的教授从不回应。
样式表:
/*
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 1
History Style Sheet
Author: Mohammad Raza Hussain
Date: September 16th, 2013
Filename: history.css
Supporting Files:
*/
/* Display HTML5 structural elements as blocks */
header, section, nav {
display: blocks;
}
/* Styles for the Page Body */
body {
margin: 0px;
padding: 0px;
background-color: rgb(51, 51, 51);
}
/* Styles for the Page Header */
header {
background-color: rgb(51, 51, 51);
text-align: center;
width: 55em;
height: 4em;
}
/* Navigation lists */
nav {
float: left;
width: 15em;
background-color: rgb(51, 51, 51);
}
nav a {
text-decoration: none;
}
nav.vertical li {
font-family: CenturyGothic, sans-serif;
font-size: 0.7em;
list-style-type: none;
line-height: 1.4em;
margin-left: 1em;
margin-bottom: 1.2em;
}
nav.vertical li a {
color: rgb(212, 212, 212);
}
nav.vertical li a:hover {
color: white;
}
/* Speech */
#speech {
background-color: rgb(212, 212, 212);
width: 40em;
float: left;
font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
}
#speech h1 {
background-color: rgb(51, 51, 51);
color: rgb(212, 212, 212);
font-size: 2em;
text-align: center;
}
#speech p {
font-size: 0.9em;
margin: 1em;
}
#speech p:first-of-type:first-letter {
float: left;
font-size: 4em;
line-height: 0.8em;
margin-right: 0.3em;
padding-right: 0.2em;
padding-bottom: 0.2em;
border-right: 0.02em solid;
border-bottom: 0.02em solid;
}
#speech p:first-of-type:first-line {
text-transform: uppercase;
}
#speech img {
clear: right;
float: right;
height: 4em;
}
HTML文件,以备不时之需:
<!DOCTYPE html>
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 1
Lincoln Speech
Author: Mohammad Raza Hussain
Date: September 16th, 2013
Filename: lincoln.htm
Supporting files: arlogo.png, history.css,
lincoln01.png - lincoln10.png,
modernizr-1.5.js
-->
<meta charset="UTF-8" />
<title>Lincoln's Second Inaugural Address</title>
<script src="modernizr-1.5.js"></script>
<link href="history.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header><img src="arlogo.png" alt="American Rhetoric" /></header>
<nav class="vertical">
<ul>
<li><a href="#">Give Me Liberty or Give Me Death <br /> Patrick Henry</a></li>
<li><a href="#">Ain't I a Woman? <br /> Sojourner Truth</a></li>
<li><a href="#">A House Divided <br /> Abraham Lincoln</a></li>
<li><a href="#">The Gettysburg Address <br /> Abraham Lincoln</a></li>
<li><a href="#">The Second Inaugural <br /> Abraham Lincoln</a></li>
<li><a href="#">Cross of Gold <br /> William Jennings Bryan</a></li>
<li><a href="#">The Man in the Arena <br /> Theodore Roosevelt</a></li>
<li><a href="#">The Only Thing We Have to Fear <br /> Franklin Roosevelt</a></li>
<li><a href="#">A Date Which Will Live in Infamy <br /> Franklin Roosevelt</a></li>
<li><a href="#">Old Soldiers Never Die <br /> Douglas MacArthur</a></li>
<li><a href="#">Inaugural Address <br /> John Kennedy</a></li>
<li><a href="#">Ich Bin Ein Berliner <br /> John Kennedy</a></li>
<li><a href="#">The Ballot or the Bullet <br /> Malcolm X</a></li>
<li><a href="#">I Have a Dream <br /> Martin Luther King, Jr.</a></li>
<li><a href="#">A Time for Choosing <br /> Ronald Reagan</a></li>
<li><a href="#">Tear Down this Wall <br /> Ronald Reagan</a></li>
</ul>
</nav>
<section id="speech">
<h1>Lincoln's Second Inaugural</h1>
<p>The Almighty has his own purposes. "Woe unto the world because of offenses! For
<img src="lincoln01.png" alt="" />
<img src="lincoln02.png" alt="" />
<img src="lincoln03.png" alt="" />
<img src="lincoln04.png" alt="" />
<img src="lincoln05.png" alt="" />
<img src="lincoln06.png" alt="" />
<img src="lincoln07.png" alt="" />
<img src="lincoln08.png" alt="" />
<img src="lincoln09.png" alt="" />
<img src="lincoln10.png" alt="" />
it must needs be that offenses come; but woe to that man by whom the offense
cometh." If we shall suppose that American slavery is one of those offenses which,
in the providence of God, must needs come, but which, having continued through his
appointed time, he now wills to remove, and that he gives to both North and South
this terrible war, as the woe due to those by whom the offense came, shall we discern
therein any departure from those divine attributes which the believers in a living
God always ascribe to him?
</p>
<p>Fondly do we hope — fervently do we pray — that this
mighty scourge of war may speedily pass away. Yet, if God wills that it continue
until all the wealth piled by the bondsman's two hundred and fifty years of unrequited
toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by
another drawn with the sword, as was said three thousand years ago, so still it must
be said, "The judgments of the Lord are true and righteous altogether."
</p>
<p>With malice toward none; with charity for all; with firmness in the right, as God
gives us to see the right, let us strive on to finish the work we are in; to bind up
the nation's wounds; to care for him who shall have borne the battle, and for his
widow, and his orphan — to do all which may achieve and cherish a just and lasting peace
among ourselves, and with all nations.
</p>
</section>
</body>
</html>
答案 0 :(得分:1)
试试这个
nav.vertical li {
font-family: CenturyGothic, sans-serif;
font-size: 0.7em;
list-style-type: none;
line-height: 1.4em;
margin-left: 1em;
margin-bottom: 1.2em;
display: inline-block;
}
答案 1 :(得分:0)
我真的不明白问题所在。我唯一能想到的是当页面缩小时,#sections属于#vertical元素。在这种情况下,将min-width添加到body元素:
body {
/* other styles here */
min-width: 55em;
}
答案 2 :(得分:0)
这是问题!!我跟着它走向发球台,无法找出错误的位置。
http://books.google.com/books?id=Xe8JAAAAQBAJ&pg=PA307&lpg=PA307&dq=tutorial+4+lincoln+css&source#v