辛星跟您解析在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中加入例如以下：
以下是效果图：
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面包屑中三角形的定位问题的更多相关文章
- 辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...
- 辛星与您彻底解决CSS浮子（下一个）
上述博客文章,我们解释如何使用CSS浮子,这是一个看我们如何解释清除CSS浮子.其实CSS浮动是很清楚easy,只需要使用clear它财产,至于如何利用好它.很多人可能会表决雾,我是个新手的时候还经常 ...
- 辛星彻底帮您解决CSS中的浮动问题
浮动,是CSS布局中必须经过的一道坎,假设不熟悉浮动.那么CSS的布局就如同空中楼阁,而谈到浮动,很多其它的是和div相结合,div是一个块级元素.这个我前面的博文有介绍,假设大家喜欢我的风格,能够搜 ...
- css面包屑导航编号
content:counter(flag);counter-increment: flag;-->一般给导航条编号1,2,3
- CSS 面包屑导航栏
做之前,先看一下效果图. demo01.png 首先,书写好 HTML 代码. <div id="crumbs"> <ul> <li><a ...
- 纯CSS3编写的面包屑导航收集
整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导 ...
- 2014年度辛星css教程夏季版第六节
这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...
- 2014年度辛星css教程夏季版第五节
本小节我们讲解css中的”盒模型“,即”box model“,它通常用于在布局的时候使用,这个”盒模型“也有人成为”框模型“,其实原理都一样,它的大致原理是这样的,它把一个HTML元素分为了这么几个部 ...
- 2014年度辛星css教程夏季版第四节
接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了css之后再完善它. ************** ...
随机推荐
- 端口扫描———nmap
nmap教程之nmap命令使用示例(nmap使用方法) 浏览:8268 | 更新:2014-03-29 17:23 Nmap是一款网络扫描和主机检测的非常有用的工具.Nmap是不局限于仅仅收集信息和枚 ...
- golang类型转换小总结
1. int <--> string 1.1. int --> string str := strconv.Itoa(intVal) 当然,整数转换成字符串还有其他方法,比如 fmt ...
- Effective C++学习进阶版
记得前段时间又一次拿起<Effective C++>的时候,有种豁然开朗的感觉,所以翻出了我第一遍读时做的笔记.只做参考以及查阅之用.如有需要请参阅<Effective C++> ...
- 渗透常用SQL注入语句合集
1.判断有无注入点; and 1=1 and 1=2 2.猜表一般的表的名称无非是admin adminuser user pass password 等..and 0<>(select ...
- day4递归原理及实现
递归 特定: 递归算法是一种直接或者间接地调用自身算法的过程.在计算机编写程序中,递归算法对解决一大类问题十分有效,它往往是算法的描述简洁而且易于理解. 递归算法解决问题的特点: (1)递归就是在过程 ...
- JS 判断浏览器类型，获取位置信息，让手机震动
判断是否是安卓 var isAndroid = /Android/i.test(navigator.userAgent); 判断是否是IOS系统 var isIOS = /iPhone|iPad|iP ...
- LR字符串处理
Action() { strchr和strrchr: //strchr:查找指定字符在一个字符串中第一次出现的位置,然后返回指向该位置的指针. //char *strchr(const char *s ...
- 【WPF】自定义控件之远程图片浏览
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...
- php中max_input_vars默认值为1000导致多表单提交失败
公司内一个php的后台管理系统,之前运行在apache上,后来我给转到nginx+php上后,其他功能运行正常,有一个修改功能提交表单后没有提交成功,查了代码没查出来什么问题,后来看了下php err ...
- java自定义类
引用数据类型(类) 引用数据类型分类 提到引用数据类型(类),其实我们对它并不陌生,之前使用过的Scanner类.Random类. 我们可以把类的类型为两种: 第一种,Java为我们提供好的类,如Sc ...