時(shí)間：2024-02-16 01:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2024-02-16 01:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
怎么用HTML+CSS制作如圖所示的網(wǎng)頁(yè)導(dǎo)航欄?：這種導(dǎo)航欄于正常的導(dǎo)航欄最大的區(qū)別無(wú)非就是多了一個(gè)斜角的部分。只要會(huì)調(diào)整這個(gè)斜角，也就簡(jiǎn)單了。可以使用邊框調(diào)整出三角形拼湊在兩端就可以了，實(shí)現(xiàn)的方式有很多，熟練掌握css就很容易做出來(lái)了，下面寫一個(gè)案例，主要使用的是偽元素和邊框調(diào)整三角形。僅供你參考，你也可以使用其他的方式實(shí)現(xiàn)。
在線咨詢
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>CSS代碼： <style> ul { overflow: hidden; } ul li { float: left; list-style: none; width: 150px; height: 40px; } ul li:nth-child(odd) { background-color: black; } ul li:nth-child(even) { position: relative; background-color: #00f800; } /* 使用偽元素添加斜角部分 */ ul li:nth-child(even)::before, ul li:nth-child(even)::after { content: ""; position: absolute; box-sizing: border-box; height: 40px; width: 20px; } /* 使用邊框調(diào)整出斜角部分 */ ul li:nth-child(even)::before { left: 0px; border-top: 20px solid #00f800; border-right: 10px solid #00f800; border-left: 10px solid black; border-bottom: 20px solid black; } ul li:nth-child(even)::after { right: -20px; border-top: 20px solid black; border-right: 10px solid black; border-left: 10px solid #00f800; border-bottom: 20px solid #00f800; } </style>關(guān)鍵詞：導(dǎo)航
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
