第二章: 第二课 内容处理-插入图片
生活随笔
收集整理的這篇文章主要介紹了
第二章: 第二课 内容处理-插入图片
小編覺得挺不錯(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