Technicalarticles
对于不擅长写CSS的程序员来说，通过CSS来创建一个有吸引力的导航是件非常困难的事情。
在本文中，我们主要是将通过HTML与CSS来创建一个导航。
首先，我们将为导航创建HTML的结构，然后根据需要设计结构。
创建结构：在这里，我们将使用<li>标签创建一个普通的结构。这将创建一个简单的界面，你可以通过运行以下代码进行检查：
HTML代码如下：
<!DOCTYPE html> <html> <head> <title>如何使用HTML和CSS创建面导航</title> </head> <body> <h1>web前端开发公众号</h1> <b>网址：www.zhaoliuwei.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>
输出：
