Question

我正在尝试为页面添加背景颜色，并填充段落和分区。但它不起作用。如果你能通过代码解释什么是错误的，我将不胜感激。关于我应该如何做的任何提示，或者我可以从中学习或遵循的内容也将受到赞赏。谢谢！

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Jake's Coffee Shop</title>
  <meta charset="utf-8">
  <style>
    <! CSS For Menu > p {
      background-color: black;
    }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 50px;
      background-color: #f1f1f1;
    }
    #UnorderedList li {
      display: inline-block;
    }
    li a {
      display: block;
      color: #000;
      padding: 8px 16px;
      text-decoration: none;
    }
    li a:hover {
      background-color: #555;
      color: navajowhite;
    }
  </style>
</head>

<body>
  <h1>Jake's Coffee Shop</h1>
  <div id="MenuBar">
    <ul id="UnorderedList">
      <li> <a href="https://www.google.com"> Home </a> 
      </li>
      <li> <a href="https://www.yahoo.com"> Menu </a> 
      </li>
      <li> <a href="https://www.music.com.bd"> Music </a> 
      </li>
      <li> <a href="https://www.google.com"> Jobs </a> 
      </li>
    </ul>
  </div>
  <div id="content">
    <p>
      <div>Come In And Experience...</div>
      <br>
      <div>
        <img src="images.jpeg" alt="Heartmelting Coffee Picture">
      </div>
      <br>
      <ul id="ItemMenu">
        <li>Specialty Coffee And Tea</li>
        <li>Freshly Made Sandwiches</li>
        <li>Bagels, Muffins, And Organic Snacks</li>
        <li>Music And Poetry Readings</li>
        <li>Open Mic Nights</li>
        <li>...</li>
      </ul>
  </div>
  </p>
  <footer>
    <address>23 Pine Road <br>Nottingham, NGI 5YU <br>0115 9324567 <br></address>
    <p>Copyright &copy; 2011 Jake's Coffee House</p>
    <p><a href="mailto:ratul_shams@yahoo.com"> yahoo@ratul_shams.com </a>
    </p>
  </footer>
</body>

</html>

＆＃13;

Answer 1

这是一个格式正确且入侵的代码。您的html评论标注错误，并且您在<div>内嵌套<p>，这是不允许的（请参阅this question）。另外：不要使用<br>标签来创建垂直空间 - 使用div上的margin属性来实现这一点。

＆＃13;

p {
  background-color: black;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 50px;
  background-color: #f1f1f1;
}
#UnorderedList li {
  display: inline-block;
}
li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #555;
  color: navajowhite;
}

＆＃13;

<h1>Jake's Coffee Shop</h1>
<div id="MenuBar">
  <ul id="UnorderedList">
    <li>
      <a href="https://www.google.com"> Home </a> 
    </li>
    <li>
      <a href="https://www.yahoo.com"> Menu </a> 
    </li>
    <li>
      <a href="https://www.music.com.bd"> Music </a> 
    </li>
    <li>
      <a href="https://www.google.com"> Jobs </a> 
    </li>
  </ul>
</div>

<div id="content">
  <div>Come In And Experience...</div>
  <div>
    <img src="images.jpeg" alt="Heartmelting Coffee Picture">
  </div>
  <ul id="ItemMenu">
    <li>Specialty Coffee And Tea</li>
    <li>Freshly Made Sandwiches</li>
    <li>Bagels, Muffins, And Organic Snacks</li>
    <li>Music And Poetry Readings</li>
    <li>Open Mic Nights</li>
    <li>...</li>
  </ul>
</div>

<footer>
  <address>
    23 Pine Road <br>
    Nottingham, NGI 5YU <br>
    0115 9324567 <br>
  </address>
  <p>Copyright &copy; 2011 Jake's Coffee House</p>
  <p>
    <a href="mailto:ratul_shams@yahoo.com"> yahoo@ratul_shams.com </a>
  </p>
</footer>

＆＃13;

为什么我不能将任何CSS属性添加到我的网页？

1 个答案: