辛星跟您解析在CSS面包屑中三角形的定位问题

     刚才看到有位网友很纳闷第二个棕色三角形是怎么定位的,我当感觉在下面说不清楚,就特别开了一片博客,来说清楚它。首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的那篇博文,如果不明白,可以问我,我会解释的。

      首先是html代码,我们直接拿过来,粘贴一下:

<html>
<head>
	<title>辛星手写CSS面包屑</title>
	<link rel="stylesheet" type="text/css" href="my.css">
</head>
<div class = "nav">
	<ul>
		<li><a href="#">网站首页</a><em></em><i></i></li>
		<li><a href="">手机专柜</a><em></em><i></i></li>
		<li><a href="">三星专栏</a></li>
	</ul>
</div>
</html>

然后是css文件,我们写到了这一步:

*{margin: 0px;padding: 0px;}
.nav{background-color: #933;
	width: 600px;height: 32px;
	line-height: 32px;
}
.nav ul{list-style-type: none;}
.nav ul li{float: left; 
	position: relative;
	width: 200px;text-align: center;
}
.nav ul li a{
	color:black;
	text-decoration:none;
}
.nav ul li em{
	width: 0px;height: 0px;
	border-color: transparent  transparent transparent #FFF;
	border-style: solid;
	border-width: 24px;
	position: absolute;
	right: -24px;top: -8px;
}
其实这里的这个right-24  和top-8是怎么来的,我们直接对它进行测试数据发现还是不那么好懂,我交给大家一个我测试数据的办法,把第二个li变成绿色的,比如

我们在css中的最后添加一个这个代码:


然后效果如下:


我们先看如果在纵向不移动这个三角形会是什么样一个情况,即我们把em的top-8px去掉,大家看一下:


     如果行高是36,三角形的边框是24,那么应该抬高24-(36/2)=6 ,所以应该抬高六个像素,清楚了吧。

那很多人不禁会问了,你的向右偏移24个元素又是怎么得来的呢?这个不是算出来的,不过如果你数学功底很好,也可以”算“出来,我们首先看一下不偏移是什么个样子,即我们首先在css中向上抬高8个像素,但是左右不变,我们先看css的截图:


其实横向的这个像素不是我算出来的,是我测试出来的,因为我也不大会算字体宽度,如果读者是大牛,不妨教我一下如何计算,如果我们不偏移,它的效果如下:


它向右偏移24个像素的时候,我感觉差不多,如果你说:那我偏移其他的像素数呢?我只能说:没问题,都可以,比如我们偏移18个像素:


那么下面我们开始加进来那个棕色三角形,他的边框大小设置成多少呢?其实无所谓,我上一篇博客里设置的是16px,这一篇博客,我设置成18px,如果设置成16px,它的top属性是不需要修改的,毕竟16-(32/2) = 0嘛,但是如果设置成18px,就需要抬高18-(32/2) = 2个像素了,这里我们在css中添加如下:


下面是效果图:


关于这个em需要移动几个像素的问题,这个不是靠算出来的,因为我们在定位em的时候已经是估测出来的数据了,不过我们能够知道li的区域范围(绿色部分)、em的区域范围(白色部分)、i的区域范围(棕色部分),因此我们根据这三个位置来判断这个棕色三角形该如何移动,我随便移动了两个像素,发现是可以的,即css变化如下:


此时的效果图如下:


  其实这样就可以了,我们把这个绿色的部分给干掉,即我们在css中去掉相应代码,它就是下面这样子了:



好啦,,至此,我解释完毕了,如果读者还是不清楚,我只能说一句话:‘”纵向靠计算,横向靠手感。”希望您能玩的愉快。

最后是最终的html代码:

<html>
<head>
	<title>辛星手写CSS面包屑</title>
	<link rel="stylesheet" type="text/css" href="ss.css">
</head>
<div class = "nav">
	<ul>
		<li><a href="#">网站首页</a><em></em><i></i></li>
		<li  id = "spe"><a href="">手机专柜</a><em></em><i></i></li>
		<li><a href="">三星专栏</a></li>
	</ul>
</div>
</html>

然后下面是最终的css代码:

*{margin: 0px;padding: 0px;}
.nav{background-color: #933;
	width: 600px;height: 32px;
	line-height: 32px;
}
.nav ul{list-style-type: none;}
.nav ul li{float: left; 
	position: relative;
	width: 200px;text-align: center;
}
.nav ul li a{
	color:black;
	text-decoration:none;
}
.nav ul li em{
	width: 0px;height: 0px;
	border-color:  transparent  transparent  transparent #FFF;
	border-style: solid;
	border-width: 24px;
	position: absolute;
    top:-8px;right: -18px;
	
}
.nav ul li i{
	width: 0px;height: 0px;
	border-color: transparent   transparent  transparent #933;
	border-width: 18px;
	border-style: solid;
	position: absolute;
	top: -2px;right: -2px;
}
//#spe{background-color:#0F0;}


辛星跟您解析在CSS面包屑中三角形的定位问题,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。