css 箭头_【开发小技巧】10—如何使用HTML和CSS创建导航菜单？

最新推荐文章于 2023-01-02 21:27:42 发布

weixin_39643865

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量149

点赞数

文章标签： css 箭头 html ul li 左右两排

来源 | web前端开发 (ID：web_qdkf)

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

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

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

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

HTML代码如下：

 <html> <head>     <title>如何使用HTML和CSS创建面导航title>  head>  <body>      <h1>web前端开发公众号h1>       <b>网址：www.webqdkf.comb>     <ul class="addressLink">        <li>            <a href="#">HOMEa>         li>       <li>       <a href="#">WEBa>         li>          <li>              <a href="#">CSSa>        li>             <li>           <a href="#">HTMLa>         li>         <li>          <a href="#">JSa>      li>        <li>       <a href="#">VUEa>       li>    ul>  body>  html>

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

CSS代码：

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

 <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.comb>     <ul class="addressLink">         <li>             <a href="#">HOMEa>         li>         <li>             <a href="#">WEBa>         li>         <li>             <a href="#">CSSa>         li>         <li>             <a href="#">HTMLa>         li>          <li>             <a href="#">JSa>         li>         <li>             <a href="#">VUEa>         li>     ul> body>   html>

输出：