第二章： 第二课 内容处理-插入图片
生活随笔
收集整理的這篇文章主要介紹了
第二章： 第二课 内容处理-插入图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們在網上經常會看到最新的文章列表標題后面都會有個“推薦”，“New”等諸如此類的圖片，如下圖：
上節課，我們學習了content屬性配合選擇器:before和:after的使用方法，知道我們可以使用CSS3.0可以對指定的元素追加或前置內容，那么能不能通過此方法來插入圖像呢？
答案是肯定的：能！語法如下：
【注】目前Chrome、FireFox、Opera、Safari和IE9均支持插入圖片功能，IE8中只支持插入文字功能；
案例如下：
比如我們要實現將ul列表的前三個子元素li加入包含“推薦”字樣的圖片，我們只需要兩步便可實現：
1、在所有的li之后追加“推薦”圖片；
2、選擇第三個li，并將其之后的所有的兄弟元素li所追加的內容content屬性設置為none后，便實現了只有前三個li有“推薦”圖片；
<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
總結
以上是生活随笔為你收集整理的第二章： 第二课 内容处理-插入图片的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 图解RHEL6安装过程、VMware-t
- 下一篇： SQL SERVER 2005 同步复制