使用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>

如果这是你想要的评论，请告诉我。