Question

所以我对编码很新，而且还处于学习的早期阶段。

我目前正在使用CSS，但我正在努力将框模型应用于以下代码。

我试图让它看起来像这样 Box Model

任何人都可以帮助我吗？

   <dependency>
     <groupId>com.fasterxml.jackson.core</groupId>
     <artifactId>jackson-databind</artifactId>
     <version>2.8.9</version>
   </dependency>
   <dependency>
     <groupId>com.fasterxml.jackson.dataformat</groupId>
     <artifactId>jackson-dataformat-csv</artifactId>
     <version>2.8.9</version>
   </dependency>

Answer 1

我不知道这是否对您有所帮助，或者至少可以给您一个想法，并且基于此，您可以根据自己的需要进行操作。我在这里添加了您提供和修改的相同代码，在您说“我们的菜单”的部分中添加了一个框。因为不清楚你想做什么，试试这个，我希望这对你有帮助。

<!DOCTYPE html>
<html>
  <head>
    <title>Logans Dinner</title>

    <style>
    /* added a div to your code with the CSS code in order to configure */
      div {
          background-color: lightblue;
          width: 300px;
          border: 5px solid red;
          padding: 20px;
          margin: 2px;
      }

      table, th, td {
          border: 2px solid black;
          border-collapse: collapse;
      }
      th, td {
          padding: 15px;
      }
    </style>

  </head>
  <body>
    <header>Welcome to Logans Dinner</header>
    <nav>
      <ul>
        <li><a href='/Menu.html'>Menu</a></li>
        <li><a href='/About.html'>About Us</a></li>
        <li><a href='/Contact.html'>Contact Us</a></li>
      </ul>
    </nav>
    </header>
  <section>

  <div> 
      <p>Our Menu</p>
      <table>
        <thead>
          <tr>
            <th>Food</th>
           <th>Description</th>
           <th>Price</th>
          </tr>
        </thead>
        <tbody>
         <tr>
          <td>Burger</td>
          <td>1/2 lb Angus Beef</td>
          <td>$10.99</td>
          </tr>
        </tbody>
      </table>
    </div>

  </section>
</body>
</html>

将Box模型应用于以下HTML

1 个答案: