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

我们在网上经常会看到最新的文章列表标题后面都会有个“推荐”，“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>

转载于:https://www.cnblogs.com/youdoce/archive/2012/03/06/2382808.html

第二章：第二课内容处理-插入图片相关推荐

第二节认识计算机教案,第二章第二节局域网的构建教学设计_博客
<第二章第二节局域网的构建教学设计_博客>由会员分享,可在线阅读,更多相关<第二章第二节局域网的构建教学设计_博客(3页珍藏版)>请在装配图网上搜索. 1.第二章 ...
CSS3内容处理插入图片
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
[读书笔记][20个月赚130亿]-第二章第二节-165号
我读了20个月赚130亿的, 第二章第二节,165号. 大学路165号, 离斯坦福大学很近的一个地方,学生经常经过的一个地方,那是一个幸运的地方,有个很多成功的公司在那里,谷歌,paypal, 罗技. ...
html第二章排列页面内容题目,HTML教程第二章页面布局及文字设计.doc
HTML教程第二章页面布局与文字设计标题一般文章都有标题.副标题.章和节等结构,HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大,以下列 ...
有关H5第二章排列页面内容介绍
第二章 1.音频标签:audio < audio src="music.mp3" controls="controls " loop="loop ...
根据黑马pink老师讲的bootstrap而做的笔记（不过多赘述，简洁高效）第二章第二节 bootstrap前端开发框架以按钮为例（引用网站上已经设置的布局和样式）
咱们大部分围绕着两个问题来叙述是什么? 怎么做? 一.目录(总体,这门课要学的目录)(现在是第二章,bootstrap前端开发框架) 1.响应式开发 2.bootstrap前端开发框架 3.boot ...
《版权与版权贸易》第二章版权的内容
第一节著作人身权总论: 著作人身权,又称精神权利,是与著作财产权相对的一个概念.作品不但具有经济价值,还体现了作者独特的思想.情感.意志和人格等精神状态,是作者人格的延伸和精神的体现: 民法意义上 ...
第二章第二课 Scratch作品：一闪一闪亮晶晶（自己画角色）
同学们,我们今天继续学习Scratch,今天我们的重点是: 学会如何自己画一个角色,然后画出角色的不同造型:接着,在造型之间切换. 在造型之间切换碰到边缘就反弹事件:当按下空格键作品的目标是:漂 ...
第二章第二节课等效电路惠斯通电桥等效变换
等效电路惠斯通电桥得原理及条件

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

第二章：第二课内容处理-插入图片相关推荐

最新文章

热门文章

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

第二章： 第二课 内容处理-插入图片相关推荐

最新文章

热门文章

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

第二章：第二课内容处理-插入图片相关推荐