CSS3内容处理如何插入图片的方法介绍

来源：懂视网责编：小采时间：2020-11-27 18:50:25

CSS3内容处理如何插入图片的方法介绍

CSS3内容处理如何插入图片的方法介绍:CSS3内容处理如何插入图片的方法介绍<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3内容处理插入图片</title> <styl

推荐度：

点击下载本文 文档为doc格式

导读CSS3内容处理如何插入图片的方法介绍:CSS3内容处理如何插入图片的方法介绍<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3内容处理插入图片</title> <styl

CSS3内容处理如何插入图片的方法介绍

<!DOCTYPE html><html lang="en"><head>
 <meta charset="UTF-8">
 <title>CSS3内容处理插入图片</title>
 <style>
 * { 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>

在所有li后面插入一张图片
同样：

ul li:before{content:url(http://www.w3cfuns.com/static/image/stamp/006.small.gif);}/
在所有的li之前追加“推荐”图片
/

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS3内容处理如何插入图片的方法介绍

推荐度：

点击下载本文 文档为doc格式

标签：图片添加方法

热门焦点

CSS3内容处理如何插入图片的方法介绍

CSS3内容处理如何插入图片的方法介绍

CSS3内容处理如何插入图片的方法介绍

最新推荐

猜你喜欢

热门推荐