使用HTML和CSS创建导航菜单

创建结构:在这里,我们将使用<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>

 

使用HTML和CSS创建导航菜单

上一篇:66 说一下 JSP 的 4 种作用域?


下一篇:Ubuntu server 16.04LTS尝鲜之安装