刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的，我当感觉在以下说不清楚，就特别开了一片博客。来说清楚它。首先，前面的代码我们先抄下来，至于前面这部分代码是怎么来的，读我的用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中加入例如以下：

以下是效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

关于这个em须要移动几个像素的问题，这个不是靠算出来的，由于我们在定位em的时候已经是估測出来的数据了。只是我们可以知道li的区域范围（绿色部分）、em的区域范围（白色部分）、i的区域范围（棕色部分）。因此我们依据这三个位置来推断这个棕色三角形该怎样移动，我随便移动了两个像素。发现是可以的，即css变化例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

此时的效果图例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

事实上这样就能够了，我们把这个绿色的部分给干掉，即我们在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面包屑中三角形的定位问题的更多相关文章

  1. 辛星和你彻底搞清CSS中的相对定位和绝对定位

    前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...

  2. 辛星与您彻底解决CSS浮子（下一个）

    上述博客文章,我们解释如何使用CSS浮子,这是一个看我们如何解释清除CSS浮子.其实CSS浮动是很清楚easy,只需要使用clear它财产,至于如何利用好它.很多人可能会表决雾,我是个新手的时候还经常 ...

  3. 辛星彻底帮您解决CSS中的浮动问题

    浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...

  4. css面包屑导航编号

    content:counter(flag);counter-increment: flag;-->一般给导航条编号1,2,3

  5. CSS 面包屑导航栏

    做之前,先看一下效果图. demo01.png 首先,书写好 HTML 代码. <div id="crumbs"> <ul> <li><a ...

  6. 纯CSS3编写的面包屑导航收集

    整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导 ...

  7. 2014年度辛星css教程夏季版第六节

    这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...

  8. 2014年度辛星css教程夏季版第五节

    本小节我们讲解css中的”盒模型“,即”box model“,它通常用于在布局的时候使用,这个”盒模型“也有人成为”框模型“,其实原理都一样,它的大致原理是这样的,它把一个HTML元素分为了这么几个部 ...

  9. 2014年度辛星css教程夏季版第四节

    接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了css之后再完善它. ************** ...

随机推荐

  1. git clone的

    git clone git@e.coding.net:wudi360/*******.git

  2. Integer类实现方式和注意事项

    java.lang.Integer类的源代码: //定义一个长度为256的Integer数组 static final Integer[] cache = new Integer[-(-128) + ...

  3. CentOS下NTP安装配置

      安装yum install ntp 配置文件 /etc/ntp.confrestrict default kod nomodifynotrap nopeer noqueryrestrict -6 ...

  4. 环状序列（UVa1584）

    题目具体描述见:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_prob ...

  5. C# asp.net 实现导出Excel

    原文地址:传送门 这段时间用到了导出Excel的功能,这个功能还是比较常用的,我常用的有两个方法,现在整理一下,方便以后查看. 1.实现DataTable数据导出到本地,需要自己传进去导出的路径. / ...

  6. java EE : http 协议之请求报文、响应报文

    1 HTTP协议特点 1)客户端->服务端(请求request)有三部份 a)请求行 b)请求头 c)请求的内容,如果没有,就是空白字符 2)服务端->客户端(响应response)有三部 ...

  7. 实现手机端上下左右滑屏的jq原生代码和使用库·两种办法

    先来一个原生的.我使用的是jq. 需要注意的地方就是被触发的元素最好不要是body,这个代码也可以修改,如果obj传进来的是body那么,$(this)必须是你的监听元素,不然会冒泡泡,整个项目就…… ...

  8. python生成随机数据插入mysql

    import random as r import pymysql first=('张','王','李','赵','金','艾','单','龚','钱','周','吴','郑','孔','曺','严' ...

  9. 【ghost初级教程】 怎么搭建一个免费的ghost博客

    ghost博客系统无疑是这个月最火热的话题之一,这个号称”只为博客“的系统,早在项目开始之初就受到了众人的关注.它使用了当前最火热node.js技术,10月14日发布了V0.3.3版本.江湖传言它将是 ...

  10. linux 把ls -R格式化成树状结构

    谁能写脚本把linux中的ls -R命令的结果格式化成树状结构? 最好是shell脚本!欢迎讨论! 参与讨论有可能意外获取iPhone6哦~~