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

首先是html代码。我们直接拿过来，粘贴一下：

  1. <html>
  2. <head>
  3. 	<title>辛星手写CSS面包屑</title>
  4. 	<link rel="stylesheet" type="text/css" href="my.css">
  5. </head>
  6. <div class = "nav">
  7. 	<ul>
  8. 		<li><a href="#">站点首页</a><em></em><i></i></li>
  9. 		<li><a href="">手机专柜</a><em></em><i></i></li>
  10. 		<li><a href="">三星专栏</a></li>
  11. 	</ul>
  12. </div>
  13. </html>

然后是css文件，我们写到了这一步：

  1. *{margin: 0px;padding: 0px;}
  2. .nav{background-color: #933;
  3. 	width: 600px;height: 32px;
  4. 	line-height: 32px;
  5. }
  6. .nav ul{list-style-type: none;}
  7. .nav ul li{float: left;
  8. 	position: relative;
  9. 	width: 200px;text-align: center;
  10. }
  11. .nav ul li a{
  12. 	color:black;
  13. 	text-decoration:none;
  14. }
  15. .nav ul li em{
  16. 	width: 0px;height: 0px;
  17. 	border-color: transparent  transparent transparent #FFF;
  18. 	border-style: solid;
  19. 	border-width: 24px;
  20. 	position: absolute;
  21. 	right: -24px;top: -8px;
  22. }

事实上这里的这个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代码：

  1. <html>
  2. <head>
  3. 	<title>辛星手写CSS面包屑</title>
  4. 	<link rel="stylesheet" type="text/css" href="ss.css">
  5. </head>
  6. <div class = "nav">
  7. 	<ul>
  8. 		<li><a href="#">站点首页</a><em></em><i></i></li>
  9. 		<li  id = "spe"><a href="">手机专柜</a><em></em><i></i></li>
  10. 		<li><a href="">三星专栏</a></li>
  11. 	</ul>
  12. </div>
  13. </html>

然后以下是终于的css代码：

  1. *{margin: 0px;padding: 0px;}
  2. .nav{background-color: #933;
  3. 	width: 600px;height: 32px;
  4. 	line-height: 32px;
  5. }
  6. .nav ul{list-style-type: none;}
  7. .nav ul li{float: left;
  8. 	position: relative;
  9. 	width: 200px;text-align: center;
  10. }
  11. .nav ul li a{
  12. 	color:black;
  13. 	text-decoration:none;
  14. }
  15. .nav ul li em{
  16. 	width: 0px;height: 0px;
  17. 	border-color:  transparent  transparent  transparent #FFF;
  18. 	border-style: solid;
  19. 	border-width: 24px;
  20. 	position: absolute;
  21.     top:-8px;right: -18px;
  22.  
  23. }
  24. .nav ul li i{
  25. 	width: 0px;height: 0px;
  26. 	border-color: transparent   transparent  transparent #933;
  27. 	border-width: 18px;
  28. 	border-style: solid;
  29. 	position: absolute;
  30. 	top: -2px;right: -2px;
  31. }
  32. //#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. [ python ] 网络编程（1）

    在本地电脑上有两个python文件 regist.py .login.py 一个注册,一个登录.这两个python一个是写用户信息,一个是读用户信息,要怎么做呢? 通过之前的知识,我们可以通过 reg ...

  2. 垃圾回收算法与 JVM 垃圾回收器综述(转)

    垃圾回收算法与 JVM 垃圾回收器综述 我们常说的垃圾回收算法可以分为两部分:对象的查找算法与真正的回收方法.不同回收器的实现细节各有不同,但总的来说基本所有的回收器都会关注如下两个方面:找出所有的存 ...

  3. 常见的 JavaScript 内存泄露

    什么是内存泄露 指由于疏忽或错误造成程序未能释放已经不再使用的内存.内存泄漏并非指内存在物理上的消失, 而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造 ...

  4. Python+Selenium 自动化实现实例-模块化调用

    public 目录存一些公共模块,供用例调用.login.py 内容如下: # coding=utf-8 import time # login def login(driver): driver.f ...

  5. oracle 12C wmsys.wm_concat()函数

    http://blog.itpub.net/31392094/viewspace-2149577/

  6. 借助svn进行半自动多台服务器上线部署

    传统简单保留 如果web服务器就那么几台,大致可以在测试服务器上测试好以后,直接在正式的web服务器 压缩拷贝一个,然后再覆盖下,进行简单暴力的发布. 这种纯手工发布往往会带来几个问题 压缩一不小心把 ...

  7. AC日记——Cards Sorting codeforces 830B

    Cards Sorting 思路: 线段树: 代码: #include <cstdio> #include <cstring> #include <iostream> ...

  8. [实战]MVC5+EF6+MySql企业网盘实战(9)——编辑文件名

    写在前面 上篇文章实现了文件的下载,本篇文章将实现编辑文件名的功能. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企业网盘实战(1) ...

  9. 【Java】 String和char[]类型间的相互转化

    (1)String类型转char[] 类型,使用String类型的toCharArray()方法: (2)char[] 类型转String类型,使用String.valueOf()方法: public ...

  10. thinkphp5.0动态配置

    设置配置参数 使用set方法动态设置参数,例如: Config::set('配置参数','配置值'); // 或者使用助手函数 config('配置参数','配置值'); 也可以批量设置,例如: Co ...