Navigationsleiste Grenze

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

Hallo, alle zusammen, habe ich das Problem der Navigationsleiste zu entwerfen erste und die letzte Grenze. Ich möchte Grenzen wie im geteilten Bild machen. Ich kann es nicht herausfinden, wie man nav01 erste Grenze und nav 05 letzte Grenze entwirft, weil ich eine Kombination von zwei Grenzen wie in nav02, nav03 und nav04 will. Bitte helfen Sie mir

Answer 1

Ein Weg ist, Grenze zu verwenden und verschiedene Eigenschaften von Grenze zu verwenden, um Ihr gewünschtes Ergebnis zu erhalten. Sie können experimentieren und so kreativ sein wie Sie können. Nur einmal, gehen Sie durch alle Möglichkeiten und was CSS kann. Dann können Sie leicht herausfinden, welche Eigenschaften kombiniert werden müssen, um Ihren eigenen Prototyp zu Code zu machen.

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>