<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用选择器插入内容</title>
<style>
h2:before{
content:"[插入]";
color:#fff;
background:green;
padding:1px 5px;
margin-right:10px;
}
.two:before{
content:"[插入2]";
color:#fff;
background:red;
padding:1px 5px;
margin-right:10px;
}
</style>
</head>
<body>
<h1>使用选择器插入内容</h1>
<h2 class="two">使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2 class="nocontent">使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>插入图片文件</title>
<style>
.hot:after{ content:url(images/hot.gif);}
.digest:after{ content:url(images/digest.gif);}
.xinren:after{ content:url(images/xinren.gif);}
</style>
</head>
<body>
<h1>插入图片文件</h1>
<h2 class="hot">插入图片文件</h2>
<h2 class="digest">插入图片文件</h2>
<h2 class="hot">插入图片文件</h2>
<h2 class="hot">插入图片文件</h2>
<h2 class="xinren">插入图片文件</h2>
<h2>插入图片文件</h2>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在多个标题前加上连续编号</title>
<style>
h1:before{
content:counter(n1,upper-roman)'.';
color:green;
font-size:24px;
}
h1{
counter-increment:n1;
}
</style>
</head>
<body>
<h1>在多个标题前加上连续编号</h1>
<p>测试时在多个标题前加上连续编号</p>
<h1>在多个标题前加上连续编号</h1>
<p>测试时在多个标题前加上连续编号</p>
<h1>在多个标题前加上连续编号</h1>
<p>测试时在多个标题前加上连续编号</p>
<h1>在多个标题前加上连续编号</h1>
<p>测试时在多个标题前加上连续编号</p>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在多个标题前加上连续编号</title>
<style>
h1:before{
content:counter(n1)'.';
color:green;
font-size:24px;
}
h1{
counter-increment:n1;
counter-reset:n2;
}
h2:before{
content:counter(n1)'-'counter(n2);
color:#f60;
font-size:18px;
}
h2{
counter-increment:n2;
}
</style>
</head>
<body>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h1>在多个标题前加上连续编号</h1>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
</body>
</html>
效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在字符串两边嵌套文字符号</title>
<style>
h1:before{ content:open-quote;}
h1:after{ content:close-quote;}
h1{quotes:"("")";}
</style>
</head>
<body>
<h1>在字符串两边嵌套文字符号</h1>
</body>
</html>
效果图：
相关推荐
第十四章使用选择器在页面中插入内容 第十五章文字与字体相关样式 第十六章盒相关样式 第十七章与背景和边框相关样式 第十八章CSS 3中的变形处理 第十九章CSS 3中的动画功能 第二十章布局相关样式 第二十一章Media ...
4.2.1 创建弹出式日期选择器150 4.2.2 根据数据库表呈现日历152 4.3 显示广告156 4.3.1 在xml文件中保存广告157 4.3.2 在数据库表中存储广告160 4.3.3 跟踪显示和转到161 4.4 显示不同的页面视图166 4.4.1 显示选项...
"授课日期 " "教学目的"能够在工作表中编辑数据 " "教学重点"工作表的基本操作方法 ... 计算机基础课程第四章--EXCEL---第二讲全文共3页，当前为第2页。 计算机基础课程第四章--EXCEL---第二讲全文共3页，当前为第3页。
第2章 jQuery 选择器/12 2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容...
第9章 定义选择器 150 9.1 构造选择器 150 9.2 按名称选择元素 152 9.3 按类或ID选择元素 153 9.4 按上下文选择元素 156 9.5 选择第一个或最后一个子元素 159 9.6 选择元素的第一个字母或者第一...
第四章：STK的应用 本章对于定义应用级的基本属性,设置IPC和在线参考都提供了指导。 第五章：Scenarios 本章解释了scenario作为一个对象和作为其它所有对象的一个集合的概念。它还提供了设置scenario的基本属性和...
第41章 窗口管理器与窗口信息 win命令 winfo命令 tk命令 第42章 管理用户首选项 应用默认设置文件 定义首选项 首选项的用户界面 管理首选项文件 跟踪对首选项变量的修改 对该软件包的改进 第43章 一种...
2.2.4 第四步：选择适合所选媒介的主题 37 2.2.5 第五步：开发内容 38 2.2.6 第六步：树立直观印象 39 2.2.7 第七步：添加多媒体效果 39 2.2.8 第八步：创建讲义和备注 40 2.2.9 第九步：排练演示文稿 ...
2.2.4 第四步：选择适合所选媒介的主题 37 2.2.5 第五步：开发内容 38 2.2.6 第六步：树立直观印象 39 2.2.7 第七步：添加多媒体效果 39 2.2.8 第八步：创建讲义和备注 40 2.2.9 第九步：排练演示文稿 ...
第1章 网页设计学前基础 1 1.1 网站和网页的基础知识 1 1.1.1 主流网站解析 1 1.1.2 网页的概念 3 1.1.3 网页的基本元素 3 1.1.4 网页类型 5 1.2 网页的设计构思 7 1.2.1 网页的布局构思 7 1.2.2 网页的设计原则 8 ...