使导航栏的项目为html

时间:2019-12-15 12:15:31

标签: html css html-lists navigationbar

我要使用<nav> </nav>创建一个导航栏。但我不知道该使用<Li></Li>并在其中制作商品,还是<a></a>很好?这两者有什么区别?哪个更好?

<nav>
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#About">About</a></li>
    <li><a href="#Contact">Contact</a></li>
    <li><a href="#Buy">Buy</a></li>
</ul></nav>

<nav>
 <a href="#home">Home</a>
 <a href="#About">About</a>
 <a href="#Contact">Contact</a>
 <a href="#Buy">Buy</a>   </nav>

3 个答案:

答案 0 :(得分:0)

如果您确实需要做的事情都可以,但是正如合作伙伴所说,从语义上讲,第一个是正确的选项,如果您选择此选项,浏览器和用户将感谢您:)。< / p>

此链接是正确使用语义html及其所有标签的良好参考:

https://www.w3schools.com/html/html5_semantic_elements.asp

答案 1 :(得分:0)

您可以同时使用它们,这取决于要获得的结果。标签ul用于创建“无序列表”,默认情况下,其内部格式为li标签。我认为您可能要搜索的主要区别之一是,如果将display: flex;应用于元素,则会使li元素在另一个元素之后出现。在这里,我为您举例说明如何应用它:

<div>
            <ul style="display=flex;">
                <li>
                    <a href="xxx"></a>
                </li>
                <li>
                    <a href="xxx"></a>
                </li>
                <li>
                    <a href="xxx"></a>
                </li>
            </ul>
</div>

查看https://www.w3schools.com/css/css_navbar.asp以获得更直观的示例。

答案 2 :(得分:0)

Output

导航栏是网站的主要组成部分之一,在我看来,导航栏是最重要的组成部分,实际上,它是用户进入网站后看到的第一部分,并链接到其他主要部分。

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><body>

<div class="w3-container">
  
  <div class="w3-bar w3-black">
    <a href="#" class="w3-bar-item w3-button w3-mobile w3-green">Home</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">About</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">Services</a>
    <div class="w3-dropdown-hover w3-mobile">
      <button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button w3-mobile">India</a>
        <a href="#" class="w3-bar-item w3-button w3-mobile">USA</a>
        <a href="#" class="w3-bar-item w3-button w3-mobile">UK</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>