CSS实例教程;使用:before和:after插入内容
性的例子:
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 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |