CSS 简单的可扩展的基于CSS的面包屑

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 简单的可扩展的基于CSS的面包屑相关的知识，希望对你有一定的参考价值。

/* Simple scalable breadcrumb by Veerle Pieters
------------------------------------------------------------------*/
body {
	font:71%/165% &quot;Lucida Grande&quot;, Lucida, Verdana, sans-serif;
	}
ul, li {
	list-style-type:none;
	padding:0;
	margin:0;
	}		
#crumbs {
	height:2.3em;
	border:1px solid #dedede;
	}
#crumbs li {
	float:left;
	line-height:2.3em;
	color:#777;
	padding-left:.75em;
	}		
#crumbs li a {
	background:url(images/crumbs.gif) no-repeat right center;
	display:block;
	padding:0 15px 0 0;
	}							
#crumbs li a:link,
#crumbs li a:visited {
	color:#777;
	text-decoration:none;
	}	
a:link, a:visited,	
#crumbs li a:hover,
#crumbs li a:focus {
	color:#dd2c0d;
	}		

&lt;ul id=&quot;crumbs&quot;&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Main section&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub section&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub sub section&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;The page you are on right now&lt;/li&gt;
&lt;/ul&gt;

以上是关于CSS 简单的可扩展的基于CSS的面包屑的主要内容，如果未能解决你的问题，请参考以下文章

CSS3面包屑导航

角度2中的面包屑css问题

css 根据@wernull的想法重构WPD面包屑吧

css hubspot博客面包屑

CSS 面包屑导航

HTML CSS三角面包屑导航