下面是兩個純CSS 麵包屑導覽列實現代碼，在網上找了一些方法但覺得都不合適唯獨這兩個純css的就差不多了，下面一聚小編來給大家整理一下。
方法一，
說明：本方法使用CSS3，無圖片，相容各種webkit系瀏覽器，同時相容。先：
1.首先是HTML代碼，比較簡單，只需要一個簡單的ul和li即可代碼如下：
<p id="crumbs"><ul> <li><a href="#">首頁</a></li> <li><a href="#">目錄</a></li> <li><a href="#">子目錄</a></li></ul><p class="fixed"></p></p>
2.接下來是CSS代碼，首先是設定常規的li浮動和a標籤美化：
#crumbs ul li {float: left;list-style: none;}#crumbs ul li a {display: block;float: left;height: 34px;background: #f66fa2;text-align: center;padding: 10px 20px 0 45px;position: relative;margin: 0 10px 0 0;font-size: 20px;text-decoration: none;color: #fff;}
接下來就是麵包屑導航的關鍵地方，通過before和after來建立箭頭效果：
#crumbs ul li a:after {content: "";border-top: 22px solid transparent;border-bottom: 22px solid transparent;border-left: 22px solid #f66fa2;position: absolute; right: -22px; top: 0;z-index: 1;}#crumbs ul li a:before {content: "";border-top: 22px solid transparent;border-bottom: 22px solid transparent;border-left: 22px solid #fff;position: absolute; left: 0; top: 0;}#crumbs ul li:first-child a {border-top-left-radius: 5px;border-bottom-left-radius: 5px;padding-left: 40px;}#crumbs ul li:first-child a:before {display: none;}#crumbs ul li:last-child a {padding-right: 30px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}#crumbs ul li:last-child a:after {display: none;}#crumbs ul li a:hover {background: #e56592;transition: all 0.2s ease;}#crumbs ul li a:hover:after {border-left-color: #e56592;transition: all 0.2s ease;}
最後清除浮動：
.fixed {clear: both;}
方法二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.php.cn/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset="utf-8″ /><title>純css製作麵包屑，相容IE6</title><style type="text/css">*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";} /* demo */ .demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;} .demo ul{height:32px;overflow:hidden;} .demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;} .demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;} .demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;} .demo li.current{background:#f60;color:#fff;z-index:1;} .demo li.current i{border-color:transparent transparent transparent #f60;} </style></head><body><p class="demo"><ul class="clearfix"><li>麵包屑一<em></em><i></i></li><li class="current">麵包屑二<em></em><i></i></li><li>麵包屑二<em></em><i></i></li></ul></p></body></html>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
