css3中content属性的应用
可以使用css3中content功能为html元素增减内容。content需要配合 E:before和E:after使用。
废话少说,看代码和效果说明:
第一种:
css代码:
#div1:before {
content: "你使用的浏览器属性太低。";
}
html代码:
<div id="div1">div</div>
显示效果:

第二种:
css代码:
#div1:after {
content:"我使用的浏览器版本不低呀。";
}
html代码:
<div id="div1">div</div>
浏览器中显示效果:

第三种:
css代码:
#div2 p:before{
content:'第'counter(count)'章:';
}
#div2 p{
counter-increment:count;
}
html代码:
<div id="div2">
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
</div>
浏览器显示效果:

查看源代码:

css3中content属性的应用的更多相关文章
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- 初识 css3中counter属性
最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- css3 的content 属性
content属性想必大家都熟悉了,一般结合伪类一起使用,表示显示的内容 例如:.box:before{content:"hello";width:100px;line-heigh ...
- CSS3使用content属性来插入项目编号
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...
- CSS3中border-image属性详解
border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
随机推荐
- 怎样将查询到的数据显示在DataGridView中
背景介绍: 数据库中的T_Line_Info表中存放着学生上机的记录,也就是我们须要查询上机记录的表.当中详细内容为: 界面设计例如以下: watermark/2/text/aHR0cDovL2Jsb ...
- Effective C++学习笔记(Part Four:Item 18-25)
近期最终把effectvie C++细致的阅读了一边.非常惊叹C++的威力与魅力.近期会把近期的读书心得与读书笔记记于此,必备查找使用,假设总结有什么不 当之处,欢迎批评指正: 如今仅仅列出框架 ...
- Java内部类用法
内部类可以是静态(static)的,可以使用 public.protected 和 private 访问控制符,而外部类只能使用 public,或者默认. 成员式内部类 在外部类内部直接定义(不在方法 ...
- mysql sakila 执行失败
1.下载 https://dev.mysql.com/doc/index-other.html 2.解压 3.将解压的文件放入某个位置,必须tmp下面 4.登录mysql 进行source处理 mys ...
- java实现io读取数据
ServletInputStream inputStream = request.getInputStream(); BufferedReader br = new BufferedReader(ne ...
- [转]POI读写Excel 修改
[转]POI读写Excel 修改 一.Excel基础 二.HSSF概况 三.通过usermodel读取文件 四.通过usermodel写入文件 五.通过eventusermodel读取文件 六.HSS ...
- Code Project精彩系列(转)
Code Project精彩系列(转) Code Project精彩系列(转) Applications Crafting a C# forms Editor From scratch htt ...
- openwrt 设置samba服务器与pc共享文件
1,安装samba36-server和luci-app-samba opkg install samba36-server luci-app-samba Openwrt的samba配置是先读取/etc ...
- Spring Cloud 与 Dubbo 区别
Dubbo Spring Cloud 服务注册中心 Zookeeper Spring Cloud Netflix Eureka 服务调用方式 RPC REST API 服务监控 Dubbo-mon ...
- Tomcat配置JVM运存
setenv.bat set "JAVA_OPTS=-server -Xms256M -Xmx1024M -XX:PermSize=256m -XX:MaxPermSize=1024m&qu ...