html HTML中的NAV BAR

Posted 2021-05-11

<section class="navBar">
<nav>
  <ul>
    <li><img id="logo" height="30px" width="30px"></li>
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/print">Print Design</a>
    </li>
    <li>
        <a href="/web">Web Design</a>
    </li>
    <li>
        <a href="/bio">Bio</a>
    </li>
    <li>
        <a href="/contact">Contact</a>
    </li>
  </ul>
</nav>
  </section>
CSS


.navBar ul{
  list-style: none;
 
}
.navBar li{
  padding: 0 15px;
  display: inline-block;
}
#logo{
  position: relative;
  top: 10px;
  left: 0;
}
.navBar li a{
  text-decoration: none;
  color: red;
}
.navBar li a:hover{
  color: #000000;
  
}