转载: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. 常见的 ...
随机推荐
- [LeetCode]436 Find Right Interval
Given a set of intervals, for each of the interval i, check if there exists an interval j whose star ...
- iOS开发 swift3.0中文版
swift3.0中文版: http://pan.baidu.com/s/1nuHqrBb
- unity 计时器
2017年1月3号,周二,晴. //设置时间 float tempTime = 5; void OnGUI(){ //设置显示 GUI.Label (new Rect(100,100,100,100) ...
- JavaScript + HTML 虚拟键盘效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Database Schemas Found in Oracle E-Business Suite
https://docs.oracle.com/cd/E26401_01/doc.122/e22952/T156458T659606.htm Table of Database Schemas in ...
- 如何查看Android的Keystore文件的SHA1值
像使用百度地图api时候,一般需要获取keystore的SHA1值,这里就手把手教大家如何查看Android的keystore文件中的SHA1值. 第一步: 打开cmd,切换到keystore所在的文 ...
- 字符串混淆技术在.NET程序保护中的应用及如何解密被混淆的字符串
Visual Studio提供的Dotfuscator保护程序,可以对用户代码中包含的字符串进行加密.比如下面的例子,为了找到这个程序的注册算法,用.NET Reflector加载程序集后,发现代码中 ...
- Http压力测试工具HttpTest4Net
HttpTest4Net是一款基于C#实现的和HTTP压力测试工具,通过工具可以简单地对HTTP服务进行一个压力测试.虽然VS.NET也集成了压力测试项目,但由于VS自身占用的资源导致了在配置不高的P ...
- 视频教程--ASP.NET MVC 使用 Petapoco 微型ORM框架+NpgSql驱动连接 PostgreSQL数据库
说好的给园子里的朋友们录制与<ASP.NET MVC 使用 Petapoco 微型ORM框架+NpgSql驱动连接 PostgreSQL数据库> 这篇博客相对应的视频,由于一个月一来没有时 ...
- [你必须知道的NOSQL系列]专题二:Redis快速入门
一.前言 在前一篇博文介绍了MongoDB基本操作,本来打算这篇博文继续介绍MongoDB的相关内容的,例如索引,主从备份等内容的,但是发现这些内容都可以通过官方文档都可以看到,并且都非常详细,所以这 ...