使用rem布局（js动态改变根字体大小），兼容pc端，设计稿750px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="keywords" content="关键字"/>
<meta name="description" content="描述"/>
<!--360浏览器渲染模式优先级：极速/ie兼容/ie标准-->
<meta name...
1.伪元素first-letter设置首字样式
/*首字下沉示例*/
p::first-letter{float:left;font-size:3em;line-height:1;color:#f00}
2.伪元素first-line设置段落第一行样式
p::first-line{color:#f00;font-weight:bold}
3.:nth-child(odd/even)选中奇偶行
当然也可以使用:nth-child(2n-1)和:nth-child(2n)实现
4.:not排除选择器
/*除开type为password之外的input...
1.margin:0 auto水平居中
具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。
2.text-align:center水平居中
只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个浏览器中，它是能对任何元素进行水平居中的。
3.height和line-height让单行文字垂直居中
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。
4....
单行文本溢出显示省略号
我是单行文本溢出显示省略号的效果咧
.test1{
/*示例css*/
background:#e5e5e5;
width:200px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
多行文本溢出显示省略号-webkit-line-clamp
-webkit-line-clamp是一个不规范的属性，它没有出现在 CSS 规范草案中。它用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：...
我们知道text-align:justify不会处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行的两端对齐，但会处理除此之外的其它行，所以只需要将这里的单行变成多行即可，那么我们可以想办法给它增加一行，再把增加的这行隐藏掉即可。比如添加<span><i><em>等行内空标签，然后设置相应的css，但是加入HTML元素违反了结构表现分离的原则，因此我们可以使用after、before伪元素的方式来派生出新行，这样就不需要额外处理html代码，然后再将派生出的新行隐藏即可。
效果如下
.test{width...
网站上经常会使用一些三角形，除了图片的方式，实际上利用border我们可以做出纯CSS的三角形。我们知道border是个边抖可以单独设置，当四个边相交的时候他们是什么时候改变的？
.t0{
margin:30px;
height:200px;
width:200px;
border-top:solid 100px red;
border-left:solid 100px green;
border-right:solid 100px orange;
border-bottom:solid 100px blue;
}
.t0{margin:...
层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。
:before 选择器在被选元素的内容前面插入内容。
:after 选择器在被选元素的内容后面插入内容。
用来清除浮动
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}
用来插入图标
我用的before
...
placeholder属性是css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本。那么怎样设置它的默认字体颜色呢？
/*WebKit browsers*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:#666;}
/*Mozilla Firefox 4 to 18*/
input:-moz-placeholder, textarea:-moz-placeholder{color:#666;}
/*Mozilla Firefox 19+*/
...
每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。
html {
filter: grayscale(100%);//IE浏览器
-webkit-filter: grayscale(100%);//谷歌浏览器
-moz-filter: grayscale(100%);//火狐
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImag...