Question

＆＃13;

JavaScript

＆＃13;

nav{
   
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, #fff, #bbb);
    border-bottom: 1px solid #fff;
   
    }
    .wrapper{
    max-width:1200px;
    margin:0 auto;
    
    }
    


       li{
        float:left;
        width: 15%;
        list-style: none;
        margin-top: 5px;
        
    }
    a{
        text-decoration: none;
        box-sizing: border-box;
        display: block;
        padding: 10px 10px;
        text-align: center;
        color: #052537;
       
       
    }
.nav01,
.nav03,
.nav05{
     border-right: 1px solid #999999;
     border-left: 1px solid #fff;
}
.nav02,
.nav04{
     border-left: 1px solid #fff;
     border-right: 1px solid #999999;
}

＆＃13;

      <nav>
       <div class="wrapper">
           <div class="nav-global">
           <ul>
              <li class="nav01"><a href="#">go1</a></li>
              <li class="nav02"><a href="#">go2</a></li>
              <li class="nav03"><a href="#">go3</a></li>
              <li class="nav04"><a href="#">go4</a></li>
              <li class="nav05"><a href="#">go5</a></li>
           </ul>
          </div>
       </div>
      </nav>

＆＃13;

Nav bar

大家好，我有问题设计导航栏的第一个和最后一个边框。我想在共享图片中制作边框。我无法弄清楚如何设计nav01第一个边框和导航05最后一个边框，因为我想要两个边框的组合，就像我在nav02，nav03和nav04中所做的那样。请帮帮我

Answer 1

一种方法是使用border并使用border的不同属性来获得所需的结果。您可以尝试并尽可能地发挥创意。只需一次，了解所有可能性以及CSS的功能。然后，您可以轻松找出要组合的属性，以将您自己的原型转换为代码。

nav {
  width: 100%;
  background: #e4e4e4;
  font-family: 'arial';
}

.navbar-ul a {
  text-decoration: none;
  list-style-type: none;
  display: block;
  float: left;
  font-size: 20px;
  width: 120px;
  border: 1px solid #000;
  text-align: center;
  margin: 10px 0px;
  border-left: none;
  border-top: none;
  border-bottom: none;
  color: #1f1f1f;
}

ul a:last-child {
  border-right: none;
}

li {
  margin: 5px;
  
}

a:hover {
  text-decoration: none !important;
}

li:hover {
  margin: 5px;
  background: #1f1f1f;
  color: white;
  text-decoration: none !important;
  transition: all .2s;
  border-radius: 4px;

}

.navbar-ul a:hover {
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="clearfix">

  <ul class="navbar-ul">
    <a>
      <li>Home</li>
    </a>
    <a>
      <li>Profile</li>
    </a>
    <a>
      <li>Contact</li>
    </a>
    <a>
      <li>Blogs</li>
    </a>
  </ul>

</nav>

导航栏边框

1 个答案: