第二章： 第二课 内容处理-插入图片
生活随笔
收集整理的這篇文章主要介紹了
第二章： 第二课 内容处理-插入图片
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
我們?cè)诰W(wǎng)上經(jīng)常會(huì)看到最新的文章列表標(biāo)題后面都會(huì)有個(gè)“推薦”，“New”等諸如此類的圖片，如下圖：
上節(jié)課，我們學(xué)習(xí)了content屬性配合選擇器:before和:after的使用方法，知道我們可以使用CSS3.0可以對(duì)指定的元素追加或前置內(nèi)容，那么能不能通過此方法來插入圖像呢？
答案是肯定的：能！語法如下：
【注】目前Chrome、FireFox、Opera、Safari和IE9均支持插入圖片功能，IE8中只支持插入文字功能；
案例如下：
比如我們要實(shí)現(xiàn)將ul列表的前三個(gè)子元素li加入包含“推薦”字樣的圖片，我們只需要兩步便可實(shí)現(xiàn)：
1、在所有的li之后追加“推薦”圖片；
2、選擇第三個(gè)li，并將其之后的所有的兄弟元素li所追加的內(nèi)容content屬性設(shè)置為none后，便實(shí)現(xiàn)了只有前三個(gè)li有“推薦”圖片；
<html>
<head>
<meta charset="gb2312">
<title>CSS3每日一練之選擇器-插入文字 | 前端開發(fā)網(wǎng)(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;}/*選擇第三個(gè)li，并將其之后的所有的li所追加的內(nèi)容content屬性設(shè)置為none后，便實(shí)現(xiàn)了只有前三個(gè)li有“推薦”圖片*/
</style>
</head>
<body>
<ul>
<li>創(chuàng)新工場(chǎng)招聘web前端工程師</li>
<li>（長沙）特米網(wǎng)誠聘：WEB前端開發(fā)工程師</li>
<li>北京騰訊急招前端開發(fā)</li>
<li>百度移動(dòng)平臺(tái)部web前端研發(fā)工程師</li>
<li>傲游瀏覽器誠聘英才</li>
<li>巨人網(wǎng)絡(luò)急聘WEB前端開發(fā)工程師</li>
<li>搜狗公司招聘網(wǎng)頁重構(gòu)工程師</li>
<li>樂唐天地 - Web前端開發(fā)工程師</li>
<li>淘寶杭州招聘前端開發(fā)工程師</li>
<li>泰克貝思招聘網(wǎng)站美工</li>
</ul>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/youdoce/archive/2012/03/06/2382808.html
總結(jié)
以上是生活随笔為你收集整理的第二章： 第二课 内容处理-插入图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图解RHEL6安装过程、VMware-t
- 下一篇： malloc，free，new，dele