使用HTML和CSS创建导航菜单

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

HTML代码如下:

<!DOCTYPE html> > >    
 >如何使用HTML和CSS创建面导航> 
 >
  >    
  >web前端开发公众号>    
   >网址:www.webqdkf.com>   
  

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

    

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

<!DOCTYPE html> 
> 
  
> 
    >如何使用HTML和CSS创建导航> 
    > 
        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; 
        } 
> 
> 
  
> 
    >web前端开发公众号> 
    >网址:www.webqdkf.com> 
    

你可能感兴趣的:(使用HTML和CSS创建导航菜单)