第二章: 第二课 内容处理-插入图片
2012-03-06 23:36
302 查看
我们在网上经常会看到最新的文章列表标题后面都会有个“推荐”,“New”等诸如此类的图片,如下图:
上节课,我们学习了content属性配合选择器:before和:after的使用方法,知道我们可以使用CSS3.0可以对指定的元素追加或前置内容,那么能不能通过此方法来插入图像呢?
答案是肯定的:能!语法如下:
【注】目前Chrome、FireFox、Opera、Safari和IE9均支持插入图片功能,IE8中只支持插入文字功能;
案例如下:
比如我们要实现将ul列表的前三个子元素li加入包含“推荐”字样的图片,我们只需要两步便可实现:
1、在所有的li之后追加“推荐”图片;
2、选择第三个li,并将其之后的所有的兄弟元素li所追加的内容content属性设置为none后,便实现了只有前三个li有“推荐”图片;
上节课,我们学习了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>
相关文章推荐
- 第二章: 第三课 内容处理-插入图片
- 第二章: 第一课 内容处理-插入文字
- 模式识别第二课 建立MFC窗口+插入图片+处理+显示图片
- 做PPT别再傻乎乎的直接插入图片了,手把手教你处理毛玻璃式图片
- java/poi读取word,并替换word中的文本内容,向word中插入图片的操作
- 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域
- CSS3每日一练之内容处理-插入文字
- moo弹出框 改进版 css外置 背景用图片 大小任意缩放 圆角 插入任意内容 自定义按钮 回车空格esc支持 滚动支持 动画开关
- Webpack4教程 - 第二部分,使用loader处理scss,图片以及转换JS
- C#发送邮件并将图片插入邮件内容
- 图像处理之---图片放大,图片大小放大,内容大小不变,位置可变
- 向Oracle数据库中插入内容带特殊符号“&”的异常及处理
- VB中删除、替换或者插入内容到文本中某一行及解析文本行列的处理实例(转)
- php 内容插入数据库需要mysql_escape_string处理一下 展示内容时候用htmlentities
- C#打开WORD文档内容并显示(未完善表格图片等排版显示的处理)
- 将文字内容和图片插入到 Access 数据库
- app请求的内容里除了文字也有图片,服务端如何处理?
- C#打开WORD文档内容并显示(未完善表格图片等排版显示的处理)
- 插入和显示数据库中的图片(处理二进制数据)
- Latex插入图片报错问题处理集锦