网页制作

CSS伪类:before在元素之前 :after 在元素之后实例讲解
网页制作 2024/11/18 佚名
3 2
本教程简单的介绍一下关于CSS伪类:before, :after详解，有需要了解的朋友可以参考一下下。
:before 伪元素在元素之前添加内容
这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

:after 伪元素在元素之后添加内容
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。


复制代码代码如下:
<!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=https://www.jb51.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的宽度(避免被后边的元素盖住三角形区域, 当然, 还有其他办法避免这种问题. 这里只是一提).
标签：
CSS伪类,:before,:after
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com