【面包屑】可根据文字大小变化尺寸-兼容主流浏览器及ie8+

最新推荐文章于 2022-11-05 22:31:54 发布

夕空

最新推荐文章于 2022-11-05 22:31:54 发布

阅读量497

点赞数

分类专栏： html 文章标签：面包屑

本文链接：https://blog.csdn.net/zhi_jie/article/details/84286258

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最终样子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>面包屑</title>
	<style type="text/css">
		#crumbs ul{
			list-style: none;font-size: 0;
		}
		#crumbs ul li{
			display: inline-block;
			/*根据文字大小来变化整体尺寸*/
			font-size: 14px;
			overflow: hidden;margin-left: -1.6em;
		}
		#crumbs ul li a{
			margin:0 1.6em;
			display: block;
			position: relative;
			line-height: 2.6em;
			padding: 0 1em;
			text-align: center;
			background-color: #3498db;
			color: #fff;
			text-decoration: none;
			
		}
		#crumbs ul li a:after{
			content: "";
			border-left: 1.3em solid #3498db;
			border-top: 1.3em solid transparent;
			border-bottom: 1.3em solid transparent;
			position: absolute;
			right: -1.3em;
			top: 0;
		}
		#crumbs ul li a:before{
			content: "";
			border-top: 1.3em solid #3498db;
			border-bottom: 1.3em solid #3498db;
			border-left: 1.3em solid transparent;
			position: absolute;
			top: 0;
			left: -1.3em;
		}

		#crumbs ul li:first-child a{
			border-top-left-radius: 0.5em;
			border-bottom-left-radius: 0.5em;
		}

		#crumbs ul li:first-child a:before{
			display: none;
		}

		#crumbs ul li:last-child a{
			border-top-right-radius: 0.5em;
			border-bottom-right-radius: 0.5em;
		}

		#crumbs ul li:last-child a:after{
			display: none;
		}

		#crumbs ul li a:hover{
			background-color:#fa5ba5;
		}

		#crumbs ul li a:hover:after{
			border-left-color: #fa5ba5;
		}

		#crumbs ul li a:hover:before{
			border-top-color: #fa5ba5;
			border-bottom-color: #fa5ba5;
		}

	</style>
</head>
<body>
	<div id="crumbs">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">下级分类</a></li>
			<li><a href="#">终极分类</a></li>
		</ul>
	</div>
</body>
</html>