html - 使用 div 将形状放在链接后面

Question

所以我最近一直在使用 HTML 完成一项学校作业。我正在尝试在屏幕左侧创建一个导航栏，并使用 DIV 函数在其后面放置一个形状。请记住，我是 HTML 编码新手。购物车是静态的。继承人的代码:

.nav {
  line-height: 120px;
  width: 120px;
  background-color: #ea9999;
  border-radius: 15px;
  padding: 5px;
  display:inline-block;

}

<table width="100%" ">
  <tr>
    <td valign="top">
      <table width="200">
      <div class="nav">

           This is where the problem is(I think)

          <a href="index.html">
         <p><img src="logo.jpg" alt="Like a Veggie Logo"></p>
             <tr><td><a href="services.html">Services <a/></td></tr>
             <tr><td><a href="products.html"> Our Products<a/></td></tr>
             <tr><td><a href="order.html">Order</td></tr>
             <tr><td><a href="about.html">About Us</td></tr>

           </div>

Answer 1

您的开发之旅做得很好。我可能不会回答您的问题，但这将帮助您朝着正确的方向前进。但是我注意到例如您的 HTML 已损坏。损坏的 HTML 使样式变得困难并且不利于可访问性(使网络对有障碍的人友好)。

我建议重构您的标记。这是您上面的代码的示例重构。但是它可以做得更好。

<table width="100%">
  <tr>
    <td valign="top">
      <table width="200">
          <tr>
              <td>
                 <div class="nav">This is where the problem is(I think)<a href="index.html"><p><img src="logo.jpg" alt="Like a Veggie Logo" /></p></a>
                  </div>
              </td>
          </tr>
          <tr><td><a href="services.html">Services </a></td></tr>
          <tr><td><a href="products.html"> Our Products</a></td></tr>
          <tr><td><a href="order.html">Order</a></td></tr>
          <tr><td><a href="about.html">About Us</a></td></tr>
      </table>
    </td>
  </tr>
</table>

在我的代码片段中，

1. 我已经关闭了<a>使用 </a> 正确标记与您用 ` 结束的地方不同，斜杠出现在元素标记之前。

2. 插入了一个 <tr></tr>然后在表中 <div></div>这是表格的正确 html 结构。请在 W3Schools 重新访问此内容

您不必使用表格来获得您想要的结构。您可以使用简单的 <div>然后设计它以减少标记并提高页面加载速度。标记越少，页面加载速度越快。

试试这个 HTML5 代码

nav {
  background-image: url('https://images.pexels.com/photos/57426/paprika-vegetables-colorful-food-57426.jpeg?dl&fit=crop&w=200&h=');
  background-repeat: no-repeat;
}

<nav>
  <ul>
    <li><a href="index.html">
      <img src="logo.jpg" alt="Like a Veggie Logo">
      </a></li>
    <li><a href="services.html">Services<a/></li>
    <li><a href="products.html"> Our Products<a/></li>
    <li><a href="order.html">Order<a/></li>
    <li><a href="about.html">About Us<a/></li>
  </ul>
</nav>

请在评论中告诉我这是否是您想要的。