|
/ |) {4 T1 k+ |3 [: I/ I g
前言什么是面包屑导航？我们来看看饿了吗和蚂蚁的面包屑组件饿了吗  _0 n6 P: d6 k% J0 G
蚂蚁 
7 ^9 N3 e. @8 z, o 看了如上两个案例，大家对于面包屑导航应该就有概念了那么在不使用任何前端框架的情况下，自己实现这个面包屑导航难吗？其实不难，今天我就教大家怎么在不使用任何前端框架的情况下，实现面包屑导航效果正文在实现面包屑效果之前，你需要掌握 HTML + CSS 的基础知识，如果你还不知道什么是 HTML？什么是 CSS ？那么先去了解完这些基础知识。
# a1 Q: m( A( R8 G& M6 [ 总体代码话不多说直接看代码：面包屑导航栏 ) P# q8 [" p$ d0 Y, J u
>ul.breadcrumb{padding:8px16px;list-style:none;background-color:#eee;}ul.breadcrumbli{display:inline;
. e% `0 m: S) b }ul.breadcrumbli+li:before{padding:8px;color:black;content:"/\00a0";}ul.breadcrumblia{color:green;}0 U' v3 q( b7 M
/ V* y+ d7 `: Y: v9 T9 |1 ]4 B
! M# B4 b; J2 U7 L3 R9 I1 Y
0 \. y, A) ^% n: ]7 v+ l) l8 {4 S0 D" |: f0 q4 L2 k/ M
| 
