css 面包屑

最新推荐文章于 2021-12-28 13:07:30 发布

水中熊

最新推荐文章于 2021-12-28 13:07:30 发布

阅读量834

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/gmd_web/article/details/47782319

版权

html+css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天为了写一个简单的样式，研究了半天，图如下：

方法其实很简单，但中间尝试了很多，特记录下来重要的东西。

首先单看图片，发现中间这块使用了两个css的三角形，一块在左边为灰色，一块在右边为白色，写下了如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div0 {
	width: 600px;
	height: 34px;
}
.div1 {
	width: 250px;
	height: 34px;
	background-color: #999;
	float: left;
	position: relative;
}
.div2 {
	position: absolute;
	left: 250px;
	width: 0px;
	height: 0px;
	border-left: #999 17px solid;
	border-right: #fff 17px solid;
	border-bottom: #fff 17px solid;
	border-top: #fff 17px solid;
}
.div4{ 
	position: absolute;
	left: 266px;
	width: 0px;
	height: 0px;
	border-left: #fff 17px solid;
	border-right: #f00 17px solid;
	border-bottom: #f00 17px solid;
	border-top: #f00 17px solid;}
.div3 {
	width: 250px;
	height: 34px;
	background-color: #F00;
	float: left;	
}
</style>
</head>
<body>
<div class="div0">
  <div class="div1">
    <div class="div2"></div>
    <div class="div4"></div>
  </div>
  <div class="div3"></div>
</div>
</body>
</html>

效果如下：

咋一看是实现了，但当我想把中间的空隙缩小时，发现就会变成这样，效果如下：

发现没有，左边的尖被盖上了，才想起来右块的左边框是存在的，只是背景变成了白色而已，法克！就算把左块的 z-index设高也会变成如下效果：

那我把左边块的背景变成透明（transparent）总行了吧，NO!NO!NO! 右边的红色会填充，效果如下：

OMG，是找BD的时候了！

找了半天发现这是一个叫做 “面包屑”导航的东东，效果、代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
a {
	border: 0;
}
.demo {
	width: 600px;
	margin: 50px auto;
	background: #999;
}
.demo ul {
	height: 32px;
	overflow: hidden;
}
.demo ul li{
	float: left;
	width: 200px;
	text-align: center;
	line-height:32px;
	font-weight: bold;
	font-size: 16px;
	position: relative;
}
.demo li em{
	position: absolute;
	width: 0;
	height: 0;
	right: -24px;
	top: -8px;
	border-width: 24px 0 24px 24px;
	border-color: transparent transparent transparent #fff;
	border-style: dashed dashed dashed solid;
}
.demo li i{
	position: absolute;
	width: 0;
	height: 0;
	right: -16px;
	top: 0px;
	border-width: 16px 0 16px 16px;
	border-color: transparent transparent transparent #999;
	border-style: dashed dashed dashed solid;
}
</style>

</head>

<body>
<div 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>
</div>
</body>
</html>

看了半天，有点不懂啊，遂就用 firbug 调试了一下，终于发现其中的玄机，哦~~~~

原来，道理是一样的，不过他把右边的块，即标签<em>的边框变大了，通过绝对定位将其居中（top:-8px;），如图：

而左边的块，即标签<i>的边框是父级的一半，这样上边框+下边框=父级高度，如图：

同时，em、i（对应的是右块、左块）的上、右、下边框都是透明的，只有左块不同，em（右块）的左边框是白色，i（左块）的边框是灰色的。

这样，大块（em）上又一个小块（i），同时边框透明，就达到了面包屑的效果。

下面的图更能说明问题，把ul的高度加大，黑色为em（右块），红色为i（左块）。

效果是做完了，但这令我想到很多东西，完全可以用css做对话框之类的效果，等等。。。

水中熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 面包屑

今天为了写一个简单的样式，研究了半天，图如下：方法其实很简单，但中间尝试了很多，特记录下来重要的东西。首先单看图片，发现中间这块使用了两个css的三角形，一块在左边为灰色，一块在右边为白色，写下了如下代码：无标题文档.div0 { width: 600px; height: 34px;}.div1 { width: 250px; height: 34px;
复制链接

扫一扫