CSS3新增了一个令人心动的属性：animation，尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽，但是从代码量和浏览器性能上有着明显的优点。 animation基本用法是： animation: name keeping-time animate-function delay times iteration final; 第一个参数：name (animation-name)： 动画的名字，即设定动画过程的名字，CSS3采用“关键帧 keyframes”来定义动画，方式形如： ...
css的!important用法介绍:!important可以提升css语句的权重，下面就通过代码实例做一下简单介绍。它有些浏览器兼容性问题，出在奇葩的IE6浏览器身上，不过问题不大，因为IE6的用户以后会越来越少直到绝迹。代码如下: 蚂蚁部落#antzone{ width:150px; height:100px; background-color:green!important;}#antzone{ background-color:blue;} 上面的代码中，如果不使用!important话，那么背景颜色就是蓝色，...
css3的@keyframes用法介绍:keyframes翻译成汉语是"关键帧"，如果会一点flash知识的话，对它应该不陌生，原来和flash是一样的。我们可以利用它定义相关的状态，由此产生动画效果。语法结构: @keyframes animationname {keyframes-selector {css-styles;}} 参数解析:1.animationname:必需，规定动画的名称。2.keyframes-selector:必需，用来规定动画的时长，可以是百分比的形式，也可以是from to的形式。3.css-st...
1.rem（font size of the root element）是指相对于根元素的字体大小的单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。二者都是相对单位 2.我们现在在切页面布局的使用常用的单位是px，这是一个绝对单位，web app的屏幕适配有很多中做法，例如：流式布局、限死宽度，还有就是通过响应式来做，但是这些方案都不是最佳的解决...
CSS3的calc()用法简单介绍:calc是calculate（计算的意思）缩写。从calc()的外表来看，它类似于程序语言中的方法，具有计算功能。确实如此，它可以动态的计算css中一些元素的相关属性值，能够运用简单的"+"、"-"、"*"、"/"四则运算。基本规则如下:（1）.可以使用百分比、px、em、rem等单位。（2）.可以混合使用各种单位进行计算。下面看几个代码片段: .box{ border:1px solid #ddd; width:calc(100%-2px)} 上面...
出于学习需要，自觉得把基本的bootstrap用法自己敲一遍，对每个用法有个较清晰的印象，所以做了本篇总结，这也是一个巩固的学习过程。 可点击左边的目录，方便速查。 按钮 a,input,button都可以设置为按钮 a标签按钮 button标签按钮 a标签按钮 button标签按钮 预置样式 default样式 primary样式 success样式 info样式 warning样式 danger...
1. 利用content属性，为元素添加内容修饰： 1） 添加字符串： 使用引号包括一段字符串，将会向元素内容中添加字符串。栗子： a:after { content: "after content"; } 2） 使用attr()方法，调用当前元素的属性的值： 栗子： a:after { content: attr(href); }a:after { content: attr(data-attr); } 3）使用url()方法，引用多媒体文件： 栗子： a::before { content: url(logo.png); } 4) 使用counte...
如果你使用的Windows XP操作系统，在浏览中文网页时，你会发现网页上的汉字基本上全部都是宋体。这是因为你的操作系统里安装了中文宋体字库，而且被设定为默认字体。浏览器会用你的默认字体显示网页上的汉字。进入Windows7/8时代，Windows系统的默认字体变成了微软雅黑，于是，所有的中文网站上的汉字使用的字体都是微软雅黑。 网页上的汉字显示时使用的字库可以用CSS指定( font-family)，比如说，你不喜欢微软雅黑，你的电脑里...
前言 现在 HTML5/CSS3 很流行罢，也是未来时代的趋势。在 HTML5 带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢。 动画 animation 转化 transform 过渡 translation 尽快这已足够让我们兴奋，许多之前必须用 JS 或 JQ 写的效果用 CSS 就能实现，现在几行 CSS3 代码就够了。 但是最值得注目的应该是 @media 多媒体查询。 @media 是什么怎么用？ 苹果官网对 CSS3 @media...
经常用到这两个属性，但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结： 相同点：他们都会飘出一个小浮层，显示文本内容。 不同点： 1.alt只能是元素的属性，而title即可以是元素的属性也可以是标签，例如:标题。 2.alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提...
一、absolute绝对定位的流行用法 一般而言，我们会用absolute绝对定位做什么呢？就是绝对定位，顾名思意，定死在某个位置上。例如，lightbox效果就是使用的绝对定位，例如新浪微博的弹出提示信息，我要转发李冰冰姐姐的微博，结果就会弹出： 还有就是与父relative相对定位标签结合使用，实现相对于父标签的绝对定位效果，例如人人网的搜索下拉菜单效果： 这里用法少不了的是left(right)绝对定位值或是top(bottom)值，...
CSS URL 如题，想知道这时候href里面的后面的参数 ? v= 这个用法和url中的参数是一个意思吗？ css也可以使用参数吗？ 回复讨论(解决方案) 相当于版本信息，不一至浏览器就不会从缓存里调用了。 这个是一种公共的用法吗，换句话说这里一定是用v吗，那么浏览器把这个版本信息存在哪里了？ 这个是一种公共的用法吗，换句话说这里一定是用v吗，那么浏览器把这个版本信息存在哪里了？ 你不懂这个,没用cdn,用不到. 这...
有时我都不敢相信自己是一个python程序员，以python工程师的名义进了公司之后，除了Django和一些并不复杂的脚本以外，其余时间写了大量的CSS和jQuery，现在回头看之前的一些代码，写得十分丑陋又低效，其中的CSS就有很大改进空间。 正如多数人的认知一样，HTML和CSS并不难学难用，从学习曲线上来说确实如此，难度甚至不如使用VIM。但是写不写得好又是另一回事，好的CSS代码能用最少的代码量实现功能，易修改且性能佳。易修改，举个...
CSS的@import的用法: @import在很多页面都有应用，不过使用的频率还是比link标签要少的多，所以可能还有很多布局者对此不是太熟悉，下面就简单介绍一下它的用法。它是用来引入外部样式表的一种方式，格式有以下两种: @import "style.css";@import url("style.css"); @import既可以为页面引入外部样式表，也可以在一个样式表中引入另一个样式表，代码实例如下: 实例一: 蚂蚁部落 @import "mytest/div+css/mytest.css"; ...
CSS选择器之属性选择器 1：[attr] 存在此属性即可 2：[attr = 'attr_value'] 属性值为给定值即可 3：[attr ^= 'attr_value'] attr属性键以container开头 即便是字符串匹配 div[data-type ^= 'container'] { background-color : #000; } 开头存在 container 匹配成功 开头存在 container 匹配成功 不在开头 匹配失败 4：[attr *= 'attr_value'] attr属性键中存在给定的值即可 即便是字符串匹配 div[...