第二章： 第三课 内容处理-插入图片

上节课，我们学习了在元素内部插入图片，使其非常方便，如果我们在content属性中通过"attr(属性名)"中获取属性值，再将其插入到元素当中，那么就能将其属性值显示出来，再也不需要js来进行获取了，非常方便，如下代码所示：

注：目前只有Opera 10对attr属性提供支持！
img:after

{
        display:block;
        margin:10px auto;
        text-align:center;
        content:attr(alt);
}

现在我们来看一下完整的代码：
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3每日一练之选择器-插入文字 | 前端开发网(W3Cfuns.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        body{font-size:14px; color:#333; font-family:"Microsoft Yahei";}
                img:after
                {
                        display:block;
                        margin:10px auto;
                        text-align:center;
                        content:attr(alt);
                }
        </style>
    </head>
    
    <body>
        <img alt="蓝天白云" src="http://www.diyifanwen.com/files/sucai/shoujitupian/2008-7/13/0871302091630932.jpg"/>
    </body>
</html>

优点总结：
1、使我们的页面减少很多重复的内容，给用户带来的信息和视觉并无影响；
2、更利于SEO；
3、代码更加简练，提高加载速度；
4、在某些情况下可以减少js的编写，提高js执行效率和速度；
posted @ 2012-03-07 22:58  YouDoce  阅读(383)  评论(0)  编辑  收藏  举报