辛星跟您解析在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;}