來源 | web前端開發 (ID：web_qdkf)
對於不擅長寫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>
輸出：
