转载:css3 content 生成内容
本文地址:http://www.w3cplus.com/solution/css3content/css3content.html
这篇文章挺不错的,建议看一下。
content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种:
- none: 不生成任何值。
- attr: 插入标签属性值
- url: 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)
- string: 插入字符串
none
其实我们常用的clearfix就是应用了这个none了
Css Code
.clearfix:after {
content: "";
visibility: hidden;
display: block;
font-size: 0;
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
attr: 插入标签属性值
普通文字demo
青,取之于蓝,而青于蓝;冰,水为之,而寒于水。
Css Code
.attr-title:after{
content:attr(title);
color:#f00;
}
图片滑过动画效果
Css Code
#imghover li{
position:relative;
margin-right:20px;
}
#imghover a:after{
content:attr(title);
position:absolute;
top:0;
left:0;
width:100%;
background-color:rgba(0,0,0,0.5);
line-height:30px;
color:#fff;
text-align:center;
font-size:14px;
text-shadow:-1px -1px 0 rgba(0,0,0,0.8);
opacity: 0;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
#imghover a:hover:after{
top:50%;
margin-top:-15px;
opacity: 1;
}
url: 使用指定的绝对或相对地址插入一个外部资源
Css Code
#icon_list a{
font-size:16px;
}
#icon_list a[href]:before{
content:'';
margin-right:5px;
}
#icon_list a[href$='.txt']:before{
content:url(images/icon_txt.gif);
}
#icon_list a[href$='.pdf']:before{
content:url(images/icon_pdf.gif);
}
#icon_list a[href$='.doc']:before{
content:url(images/icon_doc.gif);
}
#icon_list a[href$='.jpg']:before{
content:url(images/icon_pic.gif);
}
#icon_list a[href^="mailto:"]:before{
content:url(images/icon_mailto.gif);
}
string: 插入字符串
其实关于插入字符串,这个页面结构已经应用了很多了,第一个是h2标题左边的蓝色一块,第二个是鼠标滑过代码区的动画效果,第三个就是footer部分的emailto旁边的小图标,如果有兴趣可以用firebug查看查看,这个主要说下如何应用content做计数器
- css3新增的选择器
- 属性选择器
- 结构伪类选择器
- 增强的文本和颜色功能
- 文本阴影,文本换行,溢出文本
- rgba色彩模式
- 新增的弹性盒模型
- box布局
- 弹性布局实战
Css Code
#counter li{
margin-left:0;
list-style:none outside none;
counter-increment: title1;
}
#counter li:before{
content:"第"counter(title1)"章:";
font-size:14px;
color:#f00;
}
#counter li li{
margin-left:25px;
counter-increment: title2;
}
#counter li li:before{
content:counter(title1)"."counter(title2);
}
关于content计数器的应用可以参考这两篇文章CSS Counters – The Right Way to Organize Your Ordered Content,CSS content, counter-increment 和 counter-reset详解
插入特殊字符
在这篇文章的最后,说下如何在content里面插入特殊字符,关于特殊字符可以参考这里:html特殊字符,请先查阅其实用方法,即第一列为符号;第二列为html中使用的,需在前面加上&#;第三排css中可以使用,不过需要反斜杠\转义。下面实例操作下
- css3新增的选择器
- 增强的文本和颜色功能
- 新增的弹性盒模型
- copyright
Css Code
#special li:before,
#special li:after{
color:#f00;
}
#special li:nth-child(2n+1):before{
color:#ccc;
}
#special li:first-child:before,
#special li:first-child:after{
content:"\25ba";
}
#special li:first-child:after{
-webkit-transform:scale(-1);
-moz-transform:scale(-1);
-ms-transform:scale(-1);
-o-transform:scale(-1);
transform:scale(-1);
}
#special li:nth-of-type(2):before{
content:"\2714";
}
#special li:nth-child(3):after{
content:"\00bb";
}
#special li:last-of-type:before{
content:"\00a9";
margin-right:5px;
}
注:这里顺便多应用了下css3的子元素选择器,然后对于第一的after箭头,通过transform的scale为-1来左右调转
转载:css3 content 生成内容的更多相关文章
- 【转载】css3 content 生成内容
content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...
- CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素
# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...
- 【CSS3】---:before :after生成内容
在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...
- css权威指南学习笔记--列表与生成内容
列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承,子级列表会继承该图像 3.list-style-position:inside|o ...
- angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布
应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...
- 使用NVelocity生成内容的几种方式
使用NVelocity也有几个年头了,主要是在我的代码生成工具Database2Sharp上使用来生成相关代码的,不过NVelocity是一个非常不错的模板引擎,可以用来生成文件.页面等相关处理,非常 ...
- 转载---CSS3实现曲线阴影和翘边阴影
预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...
- css3 -- 自动生成序号(不使用JS,可任意排序)
需求:一个table 需要在第一列生成序号:1.2.3.4.5...... 并且自适应行数 不使用后台程序,开始考虑使用JS,但是一旦前台排序后,序号就乱了,最后采用CSS的一个计数器方法实现! & ...
- 基于ABP做一个简单的系统——实战篇:4.基于富文本编辑器,Razor模板引擎生成内容并导出Word 填坑记录
起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...
随机推荐
- 『TCP/IP详解——卷一:协议』读书笔记——18
2013-08-27 15:44:52 第7章 Ping程序 7.1 引言 “ping”这个名字来源于声纳定为操作.Ping程序由Mike Muuss编写,目的是为了测试另一台主机是否可达.该程序发送 ...
- 【转】浅谈html5网页内嵌视频
转自 http://www.pchou.info/web/2014/01/30/52ea01e13a7f1.html
- 《Linux内核分析》之第三章读书笔记
进程管理 进程是处于执行期的程序以及相关的资源的总称,也称作任务.执行线程,简称线程,是在进程中活动的对象. 可以两个或两个以上的进程执行同一个程序 也可以两个或两个以上并存的进程共享许多资源 内核调 ...
- java内部类以及异常处理
框架图 内部类 将一个类定义在另一个类的里面,里面那个类就称为内部类(也叫内置类或嵌套类). 内部类的访问规则:1.内部类可以直接访问外部类中的成员,包括私有成员. 之所以可以直接访问外部类中的 ...
- linux sort,uniq,cut,wc命令详解
linux sort,uniq,cut,wc命令详解 sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些 ...
- HTML5-块元素标签的使用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- caffe在windows 下的配置及matlab接口编译(无GPU)
本人机子windows 10,matlab2015a,vs2013(官网使用的是vs2013) 1.首先去github上下载caffe的windows包,地址:https://github.com/B ...
- Javascript原型模式总结梳理
在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...
- 浏览器兼容性小记-DOM篇(二)
1.DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现:每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型: Node.ELEMENT_NODE ...
- PSP个人耗时
PSP2.1 Personal Software Process Stage Time(min) Planing 计划 20 #Estimate #估计这个任务需要多长时间 180 Developi ...