【开发小技巧】10—如何使用HTML和CSS创建导航菜单？-CFANZ编程社区

【开发小技巧】10—如何使用HTML和CSS创建导航菜单？_web前端开发

对于不擅长写CSS的程序员来说，通过CSS来创建一个有吸引力的导航是件非常困难的事情。

在本文中，我们主要是将通过HTML与CSS来创建一个导航。

首先，我们将为导航创建HTML的结构，然后根据需要设计结构。

创建结构：在这里，我们将使用<li>标签创建一个普通的结构。这将创建一个简单的界面，你可以通过运行以下代码进行检查：

HTML代码如下：

<!DOCTYPE html> <html> <head>    
 <title>如何使用HTML和CSS创建面导航</title> 
 </head>
  <body>    
  <h1>web前端开发公众号</h1>    
   <b>网址：www.webqdkf.com</b>   
  <ul class="addressLink">       
 <li>            
<a href="#">HOME</a>      
   </li>     
  <li>       
<a href="#">WEB</a>      
   </li>        
  <li>           
   <a href="#">CSS</a>      
  </li>      
       <li>     
      <a href="#">HTML</a>     
    </li>        
 <li>         
 <a href="#">JS</a>     
 </li>       
 <li>       
<a href="#">VUE</a>      
 </li>    
</ul> 
 </body> 
 </html>

设计结构：这是最困难的任务，是在导航的右侧创建箭头形状。为了创建箭头形状，我们将使用:: after选择器。使用z-index属性将一个列表放置在另一列表上。对于CSS开发人员而言，这些事情都是非常容易的。

CSS代码：


   <style> 
        body { 
            text-align: center; 
        } 
        h1{ 
            color: #; 
        } 
          
        /* Styling addressLink class */ 
        .addressLink { 
            list-style: none; 
            overflow: hidden; 
            font: 16px; 
            margin: 30px; 
            padding: 0px; 
            border: 2px solid black; 
            font-style: italic; 
        } 
          
        /* Floating addressLink list */ 
        .addressLink li { 
            float: left; 
        } 
          
        /* Styling addressLink list's anchor element*/ 
        .addressLink li a { 
            background: #19b0cb; 
            color: white; 
            text-decoration: none; 
            padding: 5px 0px 5px 65px; 
            position: relative; 
            float: left; 
        } 
          
        .addressLink li a:after { 
            content: " "; 
            border-top: 50px solid transparent; 
            border-bottom: 50px solid transparent; 
            border-left: 30px solid #19b0cb; 
            margin-top: -50px; 
            position: absolute; 
            top: 50%; 
            left: 100%; 
            z-index: 2; 
        } 
          
        .addressLink li a:before { 
            content: " "; 
            border-top: 50px solid transparent; 
            border-bottom: 50px solid transparent; 
            border-left: 30px solid white; 
            position: absolute; 
            top: 50%; 
            left: 100%; 
            z-index: 1; 
        } 
          
        /* First child padding */ 
        .addressLink li:first-child a { 
            padding-left: 10px; 
        } 
          
        /* Second child bg-color */ 
        .addressLink li:nth-child(2) a { 
            background: #7c7f7f; 
        } 
          
        /* Second child Second half bg-color */ 
        .addressLink li:nth-child(2) a:after { 
            border-left-color: #7c7f7f; 
        } 
          
        /* Third child bg-color */ 
        .addressLink li:nth-child(3) a { 
            background: #b4b4b4; 
        } 
          
        /* Third child Second half bg-color */ 
        .addressLink li:nth-child(3) a:after { 
            border-left-color: #b4b4b4; 
        } 
          
        /* Last child bg-color and text-color */ 
        .addressLink li:last-child a { 
            background: transparent !important; 
            color: #000; 
        } 
          
        .addressLink li:last-child a:after { 
            border: 0px; 
        } 
          
        /* Hover on list's anchor element */ 
        .addressLink li a:hover { 
            background: #7c7f7f; 
        } 
          
        .addressLink li a:hover:after { 
            border-left-color: #7c7f7f !important; 
        } 
</style>

最后，在本文中，我们将结合HTML和CSS代码来完成，全部代码如下：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>如何使用HTML和CSS创建导航</title> 
    <style> 
        body { 
            text-align: center; 
        } 
        h1{ 
            color: #; 
        } 
          
        /* Styling addressLink class */ 
        .addressLink { 
            list-style: none; 
            overflow: hidden; 
            font: 16px; 
            margin: 30px; 
            padding: 0px; 
            border: 2px solid black; 
            font-style: italic; 
        } 
          
        /* Floating addressLink list */ 
        .addressLink li { 
            float: left; 
        } 
          
        /* Styling addressLink list's anchor element*/ 
        .addressLink li a { 
            background: #19b0cb; 
            color: white; 
            text-decoration: none; 
            padding: 5px 0px 5px 65px; 
            position: relative; 
            float: left; 
        } 
          
        .addressLink li a:after { 
            content: " "; 
            border-top: 50px solid transparent; 
            border-bottom: 50px solid transparent; 
            border-left: 30px solid #19b0cb; 
            margin-top: -50px; 
            position: absolute; 
            top: 50%; 
            left: 100%; 
            z-index: 2; 
        } 
          
        .addressLink li a:before { 
            content: " "; 
            border-top: 50px solid transparent; 
            border-bottom: 50px solid transparent; 
            border-left: 30px solid white; 
            position: absolute; 
            top: 50%; 
            left: 100%; 
            z-index: 1; 
        } 
          
        /* First child padding */ 
        .addressLink li:first-child a { 
            padding-left: 10px; 
        } 
          
        /* Second child bg-color */ 
        .addressLink li:nth-child(2) a { 
            background: #7c7f7f; 
        } 
          
        /* Second child Second half bg-color */ 
        .addressLink li:nth-child(2) a:after { 
            border-left-color: #7c7f7f; 
        } 
          
        /* Third child bg-color */ 
        .addressLink li:nth-child(3) a { 
            background: #b4b4b4; 
        } 
          
        /* Third child Second half bg-color */ 
        .addressLink li:nth-child(3) a:after { 
            border-left-color: #b4b4b4; 
        } 
          
        /* Last child bg-color and text-color */ 
        .addressLink li:last-child a { 
            background: transparent !important; 
            color: #000; 
        } 
          
        .addressLink li:last-child a:after { 
            border: 0px; 
        } 
          
        /* Hover on list's anchor element */ 
        .addressLink li a:hover { 
            background: #7c7f7f; 
        } 
          
        .addressLink li a:hover:after { 
            border-left-color: #7c7f7f !important; 
        } 
</style> 
</head> 
  
<body> 
    <h1>web前端开发公众号</h1> 
    <b>网址：www.webqdkf.com</b> 
    <ul class="addressLink"> 
        <li> 
            <a href="#">HOME</a> 
        </li> 
        <li> 
            <a href="#">WEB</a> 
        </li> 
        <li> 
            <a href="#">CSS</a> 
        </li> 
        <li> 
            <a href="#">HTML</a> 
        </li> 
         <li> 
            <a href="#">JS</a> 
        </li> 
        <li> 
            <a href="#">VUE</a> 
        </li> 
    </ul> 
</body> 
  
</html>