快速业务通道

CSS实例教程;使用:before和:after插入内容

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-22
性的例子:

css样式:

div {
    border: 1px solid #090;
    width:78px;
	height:59px;
	padding:3px;
	position:relative;
}

div:after{
	content:attr(id);
	display:block;
	color:#f00;
	font-weight:bold;
	position:absolute;
	top:0;
	right:0;
}

html代码:

<div id="test" title="idtitle" style="width:78px;">文字内容</div>

这里,我获取div的id值,当然也可以获取title,style的值,来看一下浏览器中的表现(ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8):

来看一下特殊的例子,那就是获取图片的属性值,目前只有opera支持,这一点,opera非常的给力,实现某些效果上,它可以节省大量的html代码。先来看我这里要实现的效果(opera10.5):

默认情况下如左图所示,只有一张图片,当鼠标放到图片上面,显示图片的alt属性内的内容,并覆盖在图片的上面,如图2。

如果用content:attr(alt)非常容易实现,而且减少了结构。来看一下如何实现的:

css样式:

            div {
                border: 1px solid #090;
                width:78px;
				height:59px;
				padding:3px;
            }

            div img:hover{
            	box-shadow:0 0 3px #666;
            }
	    div img:hover:after{
		content:attr(alt);
		display:block;
		height:20px;
		line-height:20px;
		background:#666;
		opacity:0.8;
		margin-top:-20px;
		color:#fff;
		text-align:center;
		font-size:12px;
	    }

html代码:

<div><img src="d9.jpg" alt="图片标题" title="图片2" /></div>

 

插入项目编号,在css2中,只能使用list-style来实现,但是css3中,我们可以使用content来添加项目编号,而且功能更加强大。先来看一个简单的例子:

css样式:

		h1{
			counter-increment:mycounter;
		}
		h1:before{
			content:counter(mycounter);
		}

html代码:

	<h1>大标题</h1>
	<h1>大标题</h1>
	<h1>大标题</h1>

来看一下浏览器中的表现(ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8):

counter-increment:name;这句是设置编号的name,这个name可以随意,这里我使用的是mycounter。调用的时候使用content:counter(name);的形式。

上图中,数字后面直接跟标题,有点难看,我们

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号