Question

所以我最近一直在使用HTML进行学校作业。我试图在屏幕的左侧创建一个导航栏，并使用DIV功能在其后面放置一个形状。请记住，我是编码HTML的新手。推车是静态的。下面是代码：

＆＃13;

keyVault.EncryptAsync

＆＃13;

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

＆＃13;

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>

在我的代码段中，

我已使用<a>正确关闭了</a>代码，而不像使用“斜杠”在元素代码之前关闭的那样。
在表格中插入<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>

如果这是您在评论中想要的内容，请告诉我。

使用div在链接后面放置一个形状

1 个答案: