标题覆盖身体

时间：2017-02-12 04:18:21

标签： html

我正在尝试使用本书中提供的步骤重新创建网页文档。但是，我创建的页面与书中的示例不匹配。出于某种原因，标题覆盖了我页面的一半。 下面是我创建的样式表，试图模仿这个例子。我提供的图片是我书中的例子。我做错了什么？书的例子 -

enter image description here

以下是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&rsquo;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&rsquo;s Deep Dish Pizza</h1>
        <p>Authentic Chicago-style pies</p>
      </div>
      <p class="established">Established
        <br>1974</p>
      <p class="award">Toronto Times &ldquo;Best Pizza Joint&rdquo;</p>
      <p class="options">Eat in, carry out, or call for delivery</p>
      <p class="phone">(416) 555-3337</p>
      <p class="pointright">&#9755;</p>
      <p class="pointleft">&#9754;</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&rsquo;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>

1 个答案:

答案 0 :(得分：0)

我希望这就是你所指的。问题有两个，但最大的问题是position:fixed和position:absolute有一些奇怪的用法。这看起来就像你给我们的截图（即你可以看到“菜单”部分），但不幸的是，我不知道如何与你书的其余部分一起使用。

/* 
   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: relative;
  /* 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&rsquo;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&rsquo;s Deep Dish Pizza</h1>
        <p>Authentic Chicago-style pies</p>
      </div>
      <p class="established">Established
        <br>1974</p>
      <p class="award">Toronto Times &ldquo;Best Pizza Joint&rdquo;</p>
      <p class="options">Eat in, carry out, or call for delivery</p>
      <p class="phone">(416) 555-3337</p>
      <p class="pointright">&#9755;</p>
      <p class="pointleft">&#9754;</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&rsquo;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>

相关问题
最新问题