導航欄邊框

Question

JavaScript

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; 
 
}

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

Nav bar

大家好，我要第一個設計導航欄的問題，最後的邊界。我想在共享圖片中製作邊框。我無法弄清楚如何設計nav01的第一個邊框和導航05的最後一個邊框，因爲我需要兩個邊框的組合，就像我在nav02，nav03和nav04中所做的那樣。請幫助我

Answer 1

一種方法是使用邊框並使用不同的邊框屬性來獲得所需的結果。您可以嘗試並儘可能創造性。只需一次，通過所有的可能性和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>