0
我试图重新创建一个网页文档使用我的书中提供的步骤。但是，我创建的页面与本书中的示例不匹配。由于某种原因，标题占据了我页面正文的一半。 下面是我试图模仿这个例子的样式表。我提供的图片是我书中的例子。我做错了什么？本书example--标题覆盖身体
下面是HTML和CSS代码：
/*
Big J's Deep Dish Pizza style sheet
Filename: styles.css
Author: Justus Self
Date: 2/10/2017
HTML5 and CSS3 Illustrated Unit D, Skills Review
*/
/* body and page container */
/* reset styles */
article,
body,
div,
footer,
header,
h1,
h2,
h3 p {
border: 0;
padding: 0;
margin: 0;
}
.container {
background-color: black;
text-align: center;
max-width: 640px;
margin: 0 auto;
position: relative;
}
/* headings */
header {
background-color: black;
width: 100%;
max-width: 640px;
position: fixed;
/* z-index: -1; */
}
header div {
border: 3px solid red;
color: white;
width: 70%;
margin: 0 auto 0.6em;
}
header p {
color: black;
background-color: white;
border: 3px solid black;
padding: 6px;
}
header p.phone {
color: white;
background-color: black;
border: 3px solid red;
padding: 6px;
width: 50%;
margin: 0.4em auto;
clear: both;
}
.established {
width: 25%;
float: left;
}
.award {
width: 25%;
float: right;
}
.options {
width: 25%;
margin: 0 auto;
}
.pointright {
background-color: black;
color: red;
position: absolute;
top: 0.4em;
left: 0.4em;
}
.pointleft {
background-color: black;
color: red;
position: absolute;
top: 0.4em;
right: 0.4em;
}
/* main content */
article {
color: black;
background-color: white;
text-align: left;
width: 65%;
margin: 0 auto;
padding: 5em 1em 1em;
}
h3 {
color: red;
margin: 1em 0 0.4em;
}
.menu {
margin: 0 0 0.5em;
}
.myo {
margin-left: 1em;
}
.list {
margin: 0 0 0 2em;
}
/* footer section */
footer {
background-color: white;
color: black;
border: 3px solid black;
padding: 0.5em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Big J’s Deep Dish Pizza</title>
<!--
Big J's Deep Dish Pizza main web page
Filename: index.html
Author: Justus Self
Date: 2/10/2017
HTML5 and CSS3 Illustrated Unit D, Skills Review
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<div>
<h1>Big J’s Deep Dish Pizza</h1>
<p>Authentic Chicago-style pies</p>
</div>
<p class="established">Established
<br>1974</p>
<p class="award">Toronto Times “Best Pizza Joint”</p>
<p class="options">Eat in, carry out, or call for delivery</p>
<p class="phone">(416) 555-3337</p>
<p class="pointright">☛</p>
<p class="pointleft">☚</p>
</header>
<article>
<h2>Menu</h2>
<p class="menu">(prices small/medium/large)</p>
<h3>Starters</h3>
<p class="menu">Garlic bread sticks: $5.00</p>
<p class="menu">Buffalo wings: $6.50</p>
<p class="menu">House salad: $4.00</p>
<p class="menu">Caesar salad: $5.50</p>
<p class="menu">Greek salad: $6.00</p>
<h3>Deep Dish Pizza</h3>
<p class="menu">Chicago classic: $15/18/20</p>
<p class="menu">Meat lover’s: $18/22/25</p>
<p class="menu">Greek: $16/19/22</p>
<p class="menu">Vegetarian: $15/18/20</p>
<p class="menu">Make your own (plain cheese): $12/15/18</p>
<p class="myo">meats: $3/4/5</p>
<p class="list">sausage, pepperoni, ham, Canadian bacon</p>
<p class="myo">other toppings: $2/3/4</p>
<p class="list">mushrooms, onions, green peppers, black olives, fresh tomatoes, extra cheese, garlic, anchovies, fresh spinach, pepperoncini</p>
</article>
<footer>
<p>150 St. Joseph St.</p>
<p>Toronto, ON M5S 2C3</p>
<p>(416) 555-3337</p>
</footer>
</div>
</body>
</html>
[看起来好像没什么问题？（http://imgur.com/a/GG35C） – Jhecht
@Jhecht，请注意，您发送的图片看起来并不像书例子。您发送的图片是我的代码创建的。我上传的照片应该是这样的。 –
它看起来不像这个例子吗？ – Jhecht