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

    django 项目中的 favicon.ico 处理  (django == 2.0.6) 1. 引入模块: from django.views.generic.base import Redirec ...

  2. [ python ] 全局和局部作用域变量的引用

    全局与局部变量的引用 (a)locals(b)globals 这里还需要在补充2个关键字一起比较学习,关键字:(c)nonlocal(d)global locals 和 globals locals: ...

  3. php琐碎

    1.类中的常量,可以用类来引用: class MyClass() { const SUCCESS ="success"; const FAIL ="fail"; ...

  4. linux下C语言编程，include的默认搜索路径

    C语言编程时,发现细节的魅力很大.较为详细了看了一下关于include的知识,发现了几点新知: 1.include<头文件名>和include"头文件名" 如:incl ...

  5. java并发编程实战笔记---（第四章）对象的组合

    4.1设计线程安全的类 包含三个基本要素: 1.找出构成对象状态的所有变量 2.找出约束状态变量的不变性条件 2.简历对象状态的并发访问管理策略 对象的状态: 域 基本类型所有域, 引用类型包括被引用 ...

  6. currentTime安卓

    设定一个时间编写CurrentTime类设置属性为该时间用toString显示该时间我使用的currentTime ,苹果用起来是好使得为什么.安卓走到下面这一步却不接着走呢!!! e.current ...

  7. shell脚本中${var1:-var2}

    在一个shell脚本中看见一行代码: DATE=${:-`date "+%Y%m%d" -d "-1 day"`} 查了一下 ${var1:-var2} 这种结 ...

  8. asp.net form 验证方式的使用（转载）

    如何运用 Form 表单认证 ASP.NET 的安全认证,共有“Windows”“Form”“Passport”“None”四种验证模式.“Windows”与“None”没有起到保护的作用,不推荐使用 ...

  9. Mysql Federated Server 示例

    Federated存储引擎访问在远程数据库的表中的数据,而不是本地的表.创建一个Federated表的时候,服务器在数据库目录创建一个表定义文件.无其它表被创建,因为实际的数据在一个远程数据库上.这不 ...

  10. 尝试php命令行脚本多进程并发执行

    php不支持多线程,但是我们可以把问题转换成“多进程”来解决.由于php中的pcntl_fork只有unix平台才可以使用,所以本文尝试使用popen来替代.  下面是一个例子:  被并行调用的子程序 ...