CSS伪类:before, :after详解

 代码如下 复制代码

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伪类导个航..</title>
<style type="text/css">
/*css部分, 留意其中border, margin, left, right的取值*/
body{background:#EEE;margin:0px;padding:0px;font-size:14px;font-family:Microsoft Yahei;color:#FFF;}
#nav_demo{overflow:hidden;width:520px;margin:100px auto 0px;}
#nav_demo span{float:left;position:relative;padding:0px 10px;height:30px;line-height:30px;margin-left:20px;cursor:pointer;}
 .shenzhen{background:#4FA3DA;}
 .guangzhou{background:#666912;}
 .shanghai{background:#9B44BC;}
 .beijing{background:#9B2222;}
 .chengdu{background:#804B12;}

 .shenzhen:hover{background:#387399;}
 .guangzhou:hover{background:#4B4D0E;}
 .shanghai:hover{background:#692A81;}
 .beijing:hover{background:#711A1A;}
 .chengdu:hover{background:#59390E;}

 .shenzhen:before,.shenzhen:after,.guangzhou:before,.guangzhou:after{
  border-style:solid;
  border-width:15px 10px;
  content:"";
  height:0;
  position:absolute;
  top:0;
  width:0;
 }
.shenzhen:before{border-color:#4FA3DA #4FA3DA transparent transparent;left:-20px;}
.guangzhou:before{border-color:#666912 #666912 transparent transparent;left:-20px;}
.shenzhen:after{border-color:transparent transparent #4FA3DA #4FA3DA;right:-20px;}
.guangzhou:after{border-color:transparent transparent #666912 #666912;right:-20px;}

.shenzhen:hover:before{border-color:#387399 #387399 transparent transparent;left:-20px;}
.guangzhou:hover:before{border-color:#4B4D0E #4B4D0E transparent transparent;left:-20px;}
.shenzhen:hover:after{border-color:transparent transparent #387399 #387399;right:-20px;}
.guangzhou:hover:after{border-color:transparent transparent #4B4D0E #4B4D0E;right:-20px;}

#tips{float:right;margin-right:200px;margin-top:20px;color:#8BA612;width:280px;background:#333;border:solid 1px #000;padding:5px 10px;}
#header{position:absolute;top:0px;width:100%;height:30px;line-height:30px;background:#333;border-bottom:solid 1px #000;}
#header span{padding-left:30px;padding-right:10px;}
#header a{text-decoration:none;color:#8BA612;}
#header a:hover{text-decoration:underline;}
#footer{position:absolute;bottom:0px;width:100%;text-align:center;height:30px;line-height:30px;background:#333;border-top:solid 1px #000;}
#footer a{color:#8BA612;text-decoration:none;padding-left:5px;}
#footer a:hover{text-decoration:underline;}
</style>
</head>

<body>
<div id="header"><span>返回</span><a href=http://www.111cn.net>《回来锄草..CSS伪类:before, :after》</a></div>
<div id="nav_demo">
 <span class="shenzhen">8.29 深圳</span>
 <span class="guangzhou">9.10 广州</span>
 <span class="shanghai">10.15 上海</span>
 <span class="beijing">11.12 北京</span>
 <span class="chengdu">12.10 成都</span>
</div>
<div id="tips">Tips: 你用IE6 IE7, 那就活该你看不到效果...</div>
<div id="footer"></div>
</body>
</html>

上面积实例,下面我们来一下介绍一下

 代码如下 复制代码

<!--只有第一第二个加了效果(深圳.广州)-->
<div id="nav_demo">
 <span class="shenzhen">8.29 深圳</span>
 <span class="guangzhou">9.10 广州</span>
 <span class="shanghai">10.15 上海</span>
 <span class="beijing">11.12 北京</span>
 <span class="chengdu">12.10 成都</span>
</div>

css部份

 代码如下 复制代码

/*css部分, 留意其中border, margin, left, right的取值*/
#nav_demo{margin-top:20px;margin-left:20px;font-size:12px;font-family:Microsoft Yahei;overflow:hidden;}
#nav_demo span{float:left;color:#FFF;position:relative;padding:0px 10px;height:30px;line-height:30px;margin-left:20px;cursor:pointer;}
 .shenzhen{background:#4FA3DA;}
 .guangzhou{background:#666912;}
 .shanghai{background:#9B44BC;}
 .beijing{background:#9B2222;}
 .chengdu{background:#804B12;}
 
 .shenzhen:hover{background:#387399;}
 .guangzhou:hover{background:#4B4D0E;}
 .shanghai:hover{background:#692A81;}
 .beijing:hover{background:#711A1A;}
 .chengdu:hover{background:#59390E;}
 
 .shenzhen:before,.shenzhen:after,.guangzhou:before,.guangzhou:after{
  border-style:solid;
  border-width:15px 10px;
  content:"";
  height:0;
  position:absolute;
  top:0;
  width:0;
 }
.shenzhen:before{border-color:#4FA3DA #4FA3DA transparent transparent;left:-20px;}
.guangzhou:before{border-color:#666912 #666912 transparent transparent;left:-20px;}
.shenzhen:after{border-color:transparent transparent #4FA3DA #4FA3DA;right:-20px;}
.guangzhou:after{border-color:transparent transparent #666912 #666912;right:-20px;}
 
/* 伪类可以像下边这样叠加使用...*/
.shenzhen:hover:before{border-color:#387399 #387399 transparent transparent;left:-20px;}
.guangzhou:hover:before{border-color:#4B4D0E #4B4D0E transparent transparent;left:-20px;}
.shenzhen:hover:after{border-color:transparent transparent #387399 #387399;right:-20px;}
.guangzhou:hover:after{border-color:transparent transparent #4B4D0E #4B4D0E;right:-20px;}

【第1个条件出现了 – :before, :after伪类可以在不增加html代码量得情况下, 为元素增加效果】
说到了其中的伪类before,after. 正如其单词含义, 就是在作用的元素前, 或者后实现某些效果. 但是在兼容性上会有一些问题, IE8, IE8+, Chrome, Safari, Firefox.

【第2个条件 – border在宽高为0的元素上, 四个方向都是三角形】
很早之前看到过用纯css来实现一个折角的效果. 其实也是用的css中border的特性.
各位可以自己测试下, 给一个宽高都为0的元素加一个很宽的border, 同时, 给border的四个方向分别设置不同的颜色值. 之后会发现, border的上下左右都是三角形(这里是在宽高为0的情况下, 测试用.并不是说边框就是三角形..??~~). 也就是说, border四个方向的边框之间斜面紧密连接的.

【第3个条件 – border-color四个参数可以设置相邻两边透明, 另外两边同色, 即可出现三角形】
之后, border-color的属性值中有一个transparent(透明), 就像margin的定义一样, border-color有四个参数, 分别代表上, 右, 下, 左的颜色值. 这样只要将相邻两边的颜色设置为透明, 另外两边的颜色设置为相同颜色, 就会出现一个三角形.

在之后, 三角形的大小如何控制. 务必留意宽高为0的元素, 其大宽度边框的样子. 上下边框的和是元素实际的高度, 左右边框的和是元素的实际宽度, 所以, 不要惯性思维, 把一个边的宽高当做是实际的宽高. 这样计算的结果就会让人比较不解了..
下边这个很难看的demo是一个宽高为0的元素border

上边框: 80px #387399
右边框: 60px #4B4D0E
下边框: 40px #692A81
左边框: 20px #711A1A

【第4个条件 – 合理控制高度, 宽度】
css代码最上边有句注释, 说是要留意那几个值(border, margin, left, right). 原因在于, 需要让三角形跟内容部分高度一致, 同时还不会被旁边的元素盖住. 这就要计算一下了.
了解上边对border高度宽度的解释, 然后内容部分建议指定高度, 而不是用padding来撑开, 原因在于, 文字部分的高度因字体的不一致而有所不同, 很难精确控制高度. 当然, 如果阁下对字体研究的透彻程度已经达到惨绝人寰的程度, 那也可以试试..
before和after伪类的使用会占据一定的空间, 所以, 需要计算border的实际宽度, 然后将元素之间的间距, 适当增大, 至少增大到border的宽度(避免被后边的元素盖住三角形区域, 当然, 还有其他办法避免这种问题. 这里只是一提).

时间: 2024-09-15 16:56:56

CSS伪类:before, :after详解的相关文章

css 伪类的使用方法详解

css 伪类这个词很奇怪, 在我看来更像标识了特殊状态的标签. 和程序中的类什么的, 一点关系都没有. 伪类用:跟在选择器后面,标识了一些状态 ::表示 css3 新增的一些伪类, 建议全部都使用::.这年头还不支持 css3 的浏览器可以不管了 比如这几个伪类: link 链接还没被用户点击 visited 已经点击的链接 hover 鼠标指针悬停在链接上 active 链接正在被点击(鼠标在元素上按下,还没有释放) ::first-letter 给我感觉更像一个增强选择器 p::first-

iOS开发:Cocoa—类与对象详解

我们可以在/usr/include/objc/objc.h 和 runtime.h 中找到对 class 与 object 的定义: typedef struct objc_class *Class; typedef struct objc_object { Class isa; } *id; Class 是一个 objc_class 结构类型的指针:而 id(任意对象) 是一个 objc_object 结构类型的指针,其第一个成员是一个 objc_class 结构类型的指针.注意这里有一关键的

Java技术_基础技术(0003)_类执行顺序详解+实例(阿里面试题)+详细讲解+流程图

Java技术_基础技术(0001)_后台模拟调用action Java技术_基础技术(0002)_中间件启动class加载顺序(以tomcat为例) Java技术_基础技术(0003)_类执行顺序详解+实例(阿里面试题)+详细讲解+流程图 Java技术_基础技术(0004)_eclipse远程调试tomcat 基础技术: 对于java类各个成员的执行顺序,现拿出阿里的面试题作为样例(例子非常好,是用心出的题),在这里重新说明一下java类执行顺序的原则. 源码下载(包含题.结果.分析过程) 一.

iOS网络编程之四——请求类NSURLRequest使用详解

iOS网络编程之四--请求类NSURLRequest使用详解 一.引言         在前面几篇博客中,介绍了iOS开发中的网络编程相关内容并且介绍了常用了两个平行的网络框架NSURLSession和NSURLConnection.无论是NSURLSession类还是NSURLConnection类,其网络请求都是通过NSURLRequest类进行发起的,本篇博客将介绍NSURLRequest类的用法和其中请求属性的设置.         前几篇博客地址如下: 1.iOS网络框架介绍:http

JavaScript中定义类的方式详解_javascript技巧

本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的extend或冒号,它也没有用来支持虚函数的virtual,不过,Javascript是一门灵活的语言,下面我们就看看没有关键字class的Javascript如何实现类定义,并创建对象. 一.定义类并创建类的实例对象 在Javascript中,我们用function来定义类,如下: function Sh

玩转JavaScript OOP - 类的实现详解_javascript技巧

概述 当我们在谈论面向对象编程时,我们在谈论什么? 我们首先谈论的是一些概念:对象.类.封装.继承.多态. 对象和类是面向对象的基础,封装.继承和多态是面向对象编程的三大特性. JavaScript提供了对象却缺乏类,它不能像C#一样能显式地定义一个类. 但是JavaScript的函数功能非常灵活,其中之一就是构造函数,结合构造函数和原型对象可以实现"类". 对象和类的概念 对象 "对象"是面向对象编程中非常重要的一个概念,一个对象是一个"东西"

python魔法方法-属性转换和类的表示详解_python

类型转换魔法 类型转换魔法其实就是实现了str.int等工厂函数的结果,通常这些函数还有类型转换的功能,下面是一些相关的魔法方法: •__int__(self) •转换成整型,对应int函数. •__long__(self) •转换成长整型,对应long函数. •__float__(self) •转换成浮点型,对应float函数. •__complex__(self) •转换成 复数型,对应complex函数. •__oct__(self) •转换成八进制,对应oct函数. •__hex__(s

Python文件操作类操作实例详解_python

本文讲述了Python文件操作类的操作实例,详细代码如下: #!/usr/bin/env python #!/usr/bin/env python #coding:utf-8 # Purpose: 文件操作类 #声明一个字符串文本 poem=''' Programming is fun测试 When the work is done if you wanna make your work also fun: use Python! ''' #创建一个file类的实例,模式可以为:只读模式('r'

css教程:CSS伪类

CSS pseudo-classes are used to add special effects to some selectors. CSS伪类可用来给一些选择器加上特殊效果. Hyperlink 如何在文档内给超级连接加上不同的颜色 This example demonstrates how to add different colors to a hyperlink in a document. Examples 实例:  代码如下 复制代码 Source Code to Run []