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

我们在网上经常会看到最新的文章列表标题后面都会有个“推荐”，“New”等诸如此类的图片，如下图：


　上节课，我们学习了content属性配合选择器:before和:after的使用方法，知道我们可以使用CSS3.0可以对指定的元素追加或前置内容，那么能不能通过此方法来插入图像呢？


答案是肯定的：能！语法如下：

li:after{content:url(new.gif);}//其实咱们就是把content的值直接改为url并设置图片地址即可，通过after就把图片插入到其元素之后了


【注】目前Chrome、FireFox、Opera、Safari和IE9均支持插入图片功能，IE8中只支持插入文字功能；


案例如下：
比如我们要实现将ul列表的前三个子元素li加入包含“推荐”字样的图片，我们只需要两步便可实现：
1、在所有的li之后追加“推荐”图片；
2、选择第三个li，并将其之后的所有的兄弟元素li所追加的内容content属性设置为none后，便实现了只有前三个li有“推荐”图片；

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312">
        <title>CSS3每日一练之选择器-插入文字 | 前端开发网(W3Cfuns.com)!</title>
        <style type="text/css">
        *{margin:0; padding:0;}
        body{margin-bottom:20px; font-size:14px; color:#333; font-family:"Microsoft Yahei";}
            ul{list-style:none; overflow:hidden;}
                ul li{height:22px; line-height:22px;}
                ul li:after{content:url(http://www.w3cfuns.com/static/image/stamp/006.small.gif);}/*在所有的li之后追加“推荐”图片*/
                ul li:nth-child(3)~li:after{content:none;}/*选择第三个li，并将其之后的所有的li所追加的内容content属性设置为none后，便实现了只有前三个li有“推荐”图片*/
        </style>
    </head>
    
    <body>
        <ul>
            <li>创新工场招聘web前端工程师</li>
            <li>（长沙）特米网诚聘：WEB前端开发工程师</li>
            <li>北京腾讯急招前端开发</li>
            <li>百度移动平台部web前端研发工程师</li>
            <li>傲游浏览器诚聘英才</li>
            <li>巨人网络急聘WEB前端开发工程师</li>
            <li>搜狗公司招聘网页重构工程师</li>
            <li>乐唐天地 - Web前端开发工程师</li>
            <li>淘宝杭州招聘前端开发工程师</li>
            <li>泰克贝思招聘网站美工</li>
        </ul>
    </body>
</html>



posted @ 2012-03-06 23:36  YouDoce  阅读(298)  评论(0)  编辑  收藏  举报