!!!常用CSS代码 - bjhhh

公告

!!!常用CSS代码

http://www.cnblogs.com/qq21270/p/4854643.html 　　伪类

http://www.cnblogs.com/qq21270/p/4891167.html　　CSS3动画（自用）　　

http://www.cnblogs.com/qq21270/p/5083105.html 　　手机页面，常用字号和布局（工作中用）　　2015-12-28

常用的CSS命名规则　　http://www.cnblogs.com/qq21270/p/5191219.html　　2016-2-16

阅读：css学习笔记：一、二、三、四

http://www.cnblogs.com/PeunZhang/p/4089894.html　　CSS实现背景透明，文字不透明，兼容所有浏览器（可以读一下）　　2015-11-19

<html class="expanded" style="filter: grayscale(100%);">　　把HTML页面改为黑白色　　2017-12-13

ul,li{list-style:none;margin:0;padding:0;}
body,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
input{outline: none;}/* 去除 chrome 浏览器下的蓝框*/
.yh{font-family:'Microsoft YaHei';}    /* 微软雅黑 */

body,div,ul,li,h1,h2,h3,h4,h5,h6,p,form,img{margin:0;padding:0;border:0;}
body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,address,code,del,dfn,em,img,ins,strike,strong,dl,dt,dd,ol,ul,li,form,label,fieldset,legend{margin:0;padding:0;border:0;}
div,span,a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none;}/*去除文本框在chrome下的那个高亮框*/
body{font-family:'Microsoft YaHei','微软雅黑';}
/*html{font-size:62.5%;}*/

a:link {color:#FF0000}        /* 未访问的链接 */
a:visited {color:#00FF00}    /* 已访问的链接 */
a:hover {color:#33ccff;background:#000;}    /* 鼠标移动到链接上 */
a:active {color:#33ccff;background:#000;}　　/* 选定的链接 */ 
/* a:hover 必须被置于 a:link 和 a:visited 之后，才有效。 a:active 必须被置于 a:hover 之后，才有效。 */

.opacity{opacity:0.5;filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}    /*透明（值越小越透明）*/
.radius5{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;}    /*圆角*/
.box-sizing{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}    /*ie8+*/
.etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}    /*省略号*/
.wrap{word-wrap:break-word;}/*强制换行*/
.nowrap{white-space:nowrap;}/*禁止换行*/
.no-select{.no-select{moz-user-select: -moz-none;-moz-user-select: none;-o-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}
.verticle-mode {writing-mode:tb-rl;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;}/*垂直文字（古诗）*/
.input{outline:none;}/*文本框焦点状态：没有蓝框*/

.shadow1{-moz-box-shadow:0px 2px 5px #000;-webkit-box-shadow:0px 2px 5px #000;box-shadow:0px 2px 5px #000;}/*外阴影*/
.shadow2{-moz-box-shadow:0px 2px 5px #000 inset;-webkit-box-shadow:0px 2px 5px #000 inset;box-shadow:0px 2px 5px #000 inset;}/*内阴影*/
.min-height{background:#ccc;min-height:100px;height:auto !important;height:100px;overflow:visible;}/*min-height最小高度的实现（兼容IE6、IE7、FF）*/

.border1-top{border-top:1px solid #e9e9e9;}
.border1-right{border-right:1px solid #e9e9e9;}
.border1-bottom{border-bottom:1px solid #e9e9e9;}
.border1-left{border-left:1px solid #e9e9e9;}
.clearfix:after {content:'';display:block;height:0;overflow:hidden;clear:both;}


.transform1{transform:rotate(45deg);transform-origin:0;}    /*旋转:以左上角为圆心*/
.transform2{transform:rotate(45deg);transform-origin:50%;}    /*旋转:以中心为圆心*/
.deg180{transform:rotate(180deg);-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform:rotate(180deg);}　　/*旋转180度*/
body{-webkit-filter:grayscale(100%);}/*给全网页增加黑白滤镜*/

@media print{   .offersao{display:none;}     }       /* 设置打印时的样式，打印时不显示 */

body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}    /*文字不许被选中*/

左右布局：2015-12-21

.main{width:1190px;margin-left:auto;margin-right:auto;}
.layout-left{float:left;width:940px;background:#fff;}
.layout-right{float:right;width:250px;background:#ecebeb;}

雪碧图：2015-12-21

.sprite-yzbz{display:inline-block;width:36px;height:36px;background-image:url("../images/sprite_yzbz.png");background-repeat:no-repeat;}
.sp-yzbz-r1{background-position:0px 0;}
.sp-yzbz-r2{background-position:-36px 0;}
.sp-yzbz-r3{background-position:-72px 0;}
.sp-yzbz-r4{background-position:-108px 0;}
.sp-yzbz-r5{background-position:-144px 0;}
.sp-yzbz-r6{background-position:-180px 0;}

渐变

.linear{width:100px;height:100px;
    background:-webkit-linear-gradient(90deg,#0f0,#000);
    background:-moz-linear-gradient(90deg,#0f0,#000);
    background:-ms-linear-gradient(90deg,#0f0,#000);
    background:-o-linear-gradient(90deg,#0f0,#000);
    background:linear-gradient(90deg,#0f0,#000);
}/*普通渐变*/

.linear2{width:100px;height:100px;    background-image:-webkit-linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
    background-image:linear-gradient(to right, red, orange,yellow,green,blue,indigo,violet);
}/*多色渐变*/
.linear80{background:linear-gradient(0deg,rgba(0,0,0,.33),rgba(255,255,255,.0));}/*上下渐变（手机图片的渐变蒙板，高度80px）*/

线性渐变：　　2016-2-16

.linear{
    background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:-moz-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:-o-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
    background-image:linear-gradient(90deg,#f8f8f8 20%,#dae9fa 90% ,#a6caf0 100%);
}

径向渐变： 　　2016-2-16

.radial{
    background-image:-webkit-radial-gradient( yellow, orange,red);
    background-image:-moz-radial-gradient( yellow, orange,red);
    background-image:-o-radial-gradient( yellow, orange,red);
    background-image:radial-gradient( yellow, orange,red);
}/*径向渐变*/

RESET（拷贝）

跨站公用css

/* ------------- 定义属性的CSS ------------*/
body,div,input,a,h1,h2,h3,h4,h5,h6,p,li,td,label{margin:0;padding:0;}
body{font-family:"microsoft yahei"!important;}
/* float */
.l{float:left;}
.r{float:right;}
.clear{clear:both;}
.hide{display:none!important;}

/* position */
.relative{position:relative;}
.absolute{position:absolute;}
.dib{display:inline-block;}
.border-box{box-sizing:border-box;}
.center{margin-left:auto;margin-right:auto;}/*居中*/


/* text */
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}/*禁止换行、省略*/
.nowrap{white-space:nowrap;}/*禁止换行*/
.wrap{word-wrap:break-word;}/*强制换行*/
.b{font-weight:bold;}

/*文字颜色*/
.red{color:red!important;}
.error{color:red!important;}
.green{color:green;}
.gray{color:gray;}
.orange{color:#f90;}

/*背景色*/
.bg-gray{background:#f0f0f0!important;;}



/*定位*/
.pd1{padding:1px;}    .pd2{padding:2px;}    .pd5{padding:5px;}    .pd10{padding:10px;}    .pd20{padding:20px;}    .pd30{padding:30px;}    .pd50{padding:50px;}
.m1{margin:1px;}    .m2{margin:2px;}    .m5{margin:5px;}    .m10{margin:10px;}    .m20{margin:20px;}    .m30{margin:30px;}    .m50{margin:50px;}

.pt1{padding-top:1px;} .pr1{padding-right:1px;} .pb1{padding-bottom:1px;} .pl1{padding-left:1px;}
.pt2{padding-top:2px;} .pr2{padding-right:2px;} .pb2{padding-bottom:2px;} .pl2{padding-left:2px;}
.pt5{padding-top:5px;} .pr5{padding-right:5px;} .pb5{padding-bottom:5px;} .pl5{padding-left:5px;}
.pt10{padding-top:10px;} .pr10{padding-right:10px;} .pb10{padding-bottom:10px;} .pl10{padding-left:10px;}
.pt15{padding-top:15px;} .pr15{padding-right:15px;} .pb15{padding-bottom:15px;} .pl15{padding-left:15px;}
.pt20{padding-top:20px;} .pr20{padding-right:20px;} .pb20{padding-bottom:20px;} .pl20{padding-left:20px;}
.pt30{padding-top:30px;} .pr30{padding-right:30px;} .pb30{padding-bottom:30px;} .pl30{padding-left:30px;}
.pt40{padding-top:40px;} .pr40{padding-right:40px;} .pb40{padding-bottom:40px;} .pl40{padding-left:40px;}
.pt50{padding-top:50px;} .pr50{padding-right:50px;} .pb50{padding-bottom:50px;} .pl50{padding-left:50px;}


.mt1{margin-top:1px;} .mr1{margin-right:1px;} .mb1{margin-bottom:1px;} .ml1{margin-left:1px;}
.mt2{margin-top:2px;}    .mr2{margin-right:2px;}    .mb2{margin-bottom:2px;}    .ml2{margin-left:2px;}
.mt5{margin-top:5px;}    .mr5{margin-right:5px;}    .mb5{margin-bottom:5px;}    .ml5{margin-left:5px;}
.mt10{margin-top:10px;}    .mr10{margin-right:10px;}    .mb10{margin-bottom:10px;}    .ml10{margin-left:10px;}
.mt15{margin-top:15px;}    .mr15{margin-right:15px;}    .mb15{margin-bottom:15px;}    .ml15{margin-left:15px;}
.mt20{margin-top:20px;}    .mr20{margin-right:20px;}    .mb20{margin-bottom:20px;}    .ml20{margin-left:20px;}
.mt30{margin-top:30px;}    .mr30{margin-right:30px;}    .mb30{margin-bottom:30px;}    .ml30{margin-left:30px;}
.mt40{margin-top:40px;}    .mr40{margin-right:40px;}    .mb40{margin-bottom:40px;}    .ml40{margin-left:40px;}
.mt50{margin-top:50px;}    .mr50{margin-right:50px;}    .mb50{margin-bottom:50px;}    .ml50{margin-left:50px;} 
.mt100{margin-top:100px;}    .mr100{margin-right:100px;}    .mb100{margin-bottom:100px;}    .ml100{margin-left:100px;} 



/*段落、文字*/
.h3{font-size:18px;line-height:1.5em;color:#000;}.h3-blue{font-size:18px;line-height:1.5em;color:#0082be;}
.h4{font-size:16px;line-height:1.5em;color:#000;}.h4-blue{font-size:16px;line-height:1.5em;color:#0082be;}

.p14{font-size:14px;line-height:1.5em;color:#000;text-indent:2em;}    .p14-blue{font-size:14px;line-height:1.5em;color:#0082be;text-indent:2em;}
.p16{font-size:16px;line-height:1.5em;color:#000;text-indent:2em;}    .p16-blue{font-size:16px;line-height:1.5em;color:#0082be;text-indent:2em;}
.p18{font-size:18px;line-height:1.5em;color:#000;text-indent:2em;}    .p18-blue{font-size:18px;line-height:1.5em;color:#0082be;text-indent:2em;}
.p20{font-size:20px;line-height:1.5em;color:#000;text-indent:2em;}    .p20-blue{font-size:20px;line-height:1.5em;color:#0082be;text-indent:2em;}

.txt14{font-size:14px;line-height:1.5em;color:#000;}    .txt14-blue{font-size:14px;line-height:1.5em;color:#0082be;}
.txt16{font-size:16px;line-height:1.5em;color:#000;}    .txt16-blue{font-size:16px;line-height:1.5em;color:#0082be;}
.txt18{font-size:18px;line-height:1.5em;color:#000;}    .txt18-blue{font-size:18px;line-height:1.5em;color:#0082be;}
.txt20{font-size:20px;line-height:1.5em;color:#000;}    .txt20-blue{font-size:20px;line-height:1.5em;color:#0082be;}

定制css

/* ------------- 页面布局 ------------*/
.body5{margin:0px 5px;}
.body10{margin:0px 10px;}
.body96{margin:0px 4%;}
.main{margin:0 auto;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.boxs{margin:0 auto;clear:both;overflow:auto;zoom:1;text-align:center;}

.box{overflow:auto;zoom:1;}
.box-border1{overflow:auto;zoom:1;border:1px solid #d0d0d0;margin:10px 0px;background:#f0f0f0;}
.box-border1-pd10{overflow:auto;zoom:1;border:1px solid #d0d0d0;padding:10px;margin:10px 0px;background:#f0f0f0;}


/* ------------- 公用（540屏幕手机用） ------------*/
.gl-content{width:100%;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.gl-content p{color:#333;line-height:1.5em;}
.gl-content h1,h2,h3,h4,h5,h6{color:#333;line-height:1.5em;}
.gl-content p.etc{text-overflow: ellipsis;overflow:hidden;white-space:nowrap;}/*省略,不许换行 */

.gl-content p.p{font-size:26px;margin-top:0.5em;text-indent:2em;}/* (有缩进)段落*/
.gl-content p.h3{margin:0.5em;text-indent:2em;}/* (有缩进)“识别”用*/
.gl-content .h3{font-weight:bold;font-size:32px;}/*标题：标准字号 +3 */
.gl-content .h4{font-weight:bold;font-size:30px;}/*标题：标准字号 +2 */
.gl-content .title{font-size:30px;color:#333;}/*标准字号 +2 */
.gl-content .txt1{font-size:28px;color:#333;}/*标准字号 +1 */
.gl-content .txt{font-size:26px;color:#333;}/*标准字号!*/
.gl-content .txt-gray{font-size:26px;color:#999;}/*标准字号(灰色) */
.gl-content .date{font-size:24px;color:#ccc;}/*标准字号 -1(浅灰) */


/* ------------- 公用（网页用） ------------*/
.gl-content{width:100%;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.gl-content p{color:#333;line-height:1.5em;}
.gl-content h1,h2,h3,h4,h5,h6{color:#333;line-height:1.5em;}
.gl-content p.etc{text-overflow: ellipsis;overflow:hidden;white-space:nowrap;}/*省略,不许换行 */

.gl-content p.p{font-size:16px;margin-top:0.5em;text-indent:2em;}/* (有缩进)段落*/
.gl-content p.h3{margin:0.5em;text-indent:2em;}/* (有缩进)“识别”用*/
.gl-content .h3{font-weight:bold;font-size:22px;}/*标题：标准字号 +3 */
.gl-content .h4{font-weight:bold;font-size:20px;}/*标题：标准字号 +2 */
.gl-content .title{font-size:20px;color:#333;}/*标准字号 +2 */
.gl-content .txt1{font-size:18px;color:#333;}/*标准字号 +1 */
.gl-content .txt{font-size:16px;color:#333;}/*标准字号!*/
.gl-content .txt-gray{font-size:16px;color:#999;}/*标准字号(灰色) */
.gl-content .date{font-size:14px;color:#ccc;}/*标准字号 -1(浅灰) */

*::selection {background-color: #ff0;color: #000;} /*选中的文字，改变背景*/

（待补充）

清除浮动

<style type="text/css">
div{background:#ddd;border:1px solid #000;width:400px;}
.box{overflow:auto;zoom:1;}/*zoom:IE 6,7*/ 
img{float:right;} </style>
<h1>清除浮动</h1>
<div class="box"><img src="http://zh.learnlayout.com/images/ilta.png"></div>
<br><br>
<div><img src="http://zh.learnlayout.com/images/ilta.png"></div>

x轴不显示滚动条，y轴显示滚动条：　　2015-10-30

.div{overflow-y:auto;overflow-x:hidden;}

box-sizing：IE8及IE8+

<style type="text/css">
div{background:#999;width: 500px;height:100px;margin: 20px;}
.simple {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.fancy {
  padding: 50px;
  border: solid #000 20px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.ccc{
  border: solid #000 20px;
}
</style>
<h1>box-sizing : IE8及IE8+</h1>
<div class="simple">aaaaaaaa</div>
<div class="fancy">aaaaaaaaa</div>
<div class="ccc">aaaaaaaaa</div>

修复IE

<!--[if lt IE 7]> <html class="no-js ie ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><html class="no-js" lang="en"><![endif]-->

placeholder：

<style type="text/css">
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
</style>
<input type="text" name="" placeholder="啊啊啊啊啊啊啊啊啊啊">

<li>列表的奇数行和偶数行变色、<table>的行变色。

参考阅读：http://jingyan.baidu.com/article/aa6a2c14cea0120d4c19c4ec.html

li:nth-child(even){background:#dddddd;}/*偶数行*/
li:nth-child(odd){background:#f0f0f0;}/*奇数行*/
li:nth-child(2){background:#ff9900;}/*第二行*/
li:nth-child(3n+1){background:#cccccc;}/*第1、4、7…行*/

tr:nth-child(2){background:#ff99ff;}/*表格的第二行*/
tr :nth-child(2){background:#ff9900;}/*表格的第二列*/

改变<li>列表的小圆点颜色： 　　2016-2-15

<style type="text/css">
.green{color:green;}
.li1{line-height:28px;color:#f00;list-style:disc inside;}

.none{list-style-type:none;}
.disc{list-style-type:disc;}
.circle{list-style-type:circle;}
.square{list-style-type:square;}
.decimal{list-style-type:decimal;}
.decimal-leading-zero{list-style-type:decimal-leading-zero;}
.lower-roman{list-style-type:lower-roman;}
.upper-roman{list-style-type:upper-roman;}
.lower-alpha{list-style-type:lower-alpha;}
.upper-alpha{list-style-type:upper-alpha;}
</style>
<ul class="clearfix">
    <li class="li1 none"><a href="##" class="green">none 无标记</a></li>
    <li class="li1 disc"><a href="##" class="green">disc 默认。实心圆</a></li>
    <li class="li1 circle"><a href="##" class="green">circle 空心圆</a></li>
    <li class="li1 square"><a href="##" class="green">square 实心方块</a></li>
    <li class="li1 decimal"><a href="##" class="green">decimal 数字</a></li>
    <li class="li1 decimal-leading-zero"><a href="##" class="green">decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)</a></li>
    <li class="li1 lower-roman"><a href="##" class="green">lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)</a></li>
    <li class="li1 upper-roman"><a href="##" class="green">upper-roman 大写罗马数字(I, II, III, IV, V, 等。)</a></li>
    <li class="li1 lower-alpha"><a href="##" class="green">lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)</a></li>
    <li class="li1 upper-alpha"><a href="##" class="green">upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)</a></li>
</ul>

li列表，改变列表项标记：　　2016-6-30

http://www.w3school.com.cn/cssref/pr_list-style-type.asp　　　　

<style type="text/css">
li{list-style-type:disc;list-style-position:inside;padding-left:15px;font-size:14px;line-height:28px;color:#3366ff;}
a{color:#333;}
a:hover{color:#f90;}
</style>
<ul class="">
    <li><a href="##">li列表————改变列表项标记</a></li>
    <li><a href="##">list-style-position 声明列表标志相对于列表项内容的位置。外部 (outside) 、内外部 (inside) </a></li>
    <li><a href="##">list-style-type 属性设置列表项标记的类型。disc是实心圆、square实心方块、decimal是数字。 </a></li>
</ul>

透明背景块

<style type="text/css">
body{background:url("http://www.bz55.com/uploads1/allimg/120328/1_120328202102_7.jpg");}
</style>
<div style="position:relative;width:20em;" class="op-box">
    <div class="op-bg" style="position:absolute;z-index:1;left:0;right:0;top:0;bottom:0;background:#FFF;opacity:0.5;filter:alpha(opacity=50);"></div>
    <div class="op-content" style="position:relative;z-index:2;padding:1em;">透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景，透明背景</div>
</div>

<div style="position:relative;width:20em;" class="op-box">
    <div class="op-bg" style="position:absolute;z-index:1;left:0;right:0;top:0;bottom:0;background:#f3f3f3;opacity:0.75;filter:alpha(opacity=75);box-shadow:0 1px 0.3em #333;"></div>
    <div class="op-content" style="position:relative;z-index:2;padding:1em;">立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体立体</div>
</div>

英文字母用css控制大小写

<style type="text/css">
h1{text-transform:uppercase;}
h2{text-transform:lowercase;}
</style>
<h1>abcdefghijklmnopqrstuvwxyz 英文字母会变成大写</h2>
<h2>ABCDEFGHIJKLMNOPQRSTUVWXYZ 英文字母会变成小写</h2>

文本被选择后，改变样式：　　2016-1-27

::selection {background: #24890d;color: #fff;}
::-moz-selection {background: #24890d;color: #fff;}

媒体查询　　http://zh.learnlayout.com/media-queries.html 下次阅读

Flexbox　　http://zh.learnlayout.com/flexbox.html (扩展阅读)

css框架　　http://zh.learnlayout.com/frameworks.html (扩展阅读)

规范：

在定义样式属性的时候，建议按照一定的顺序进行排列，建议按照：布局定位属性→自身属性→文本属性→其他属性。当然，这个顺序不是硬性规定，各位开发人员可以根据自己的习惯调整这个顺序，但是，要保证同类属性是要在一起的，这样便于阅读和维护。
布局定位属性：display、position、float、clear、visibility等。
自身属性：width、height、margin、padding、border等。
文本属性：font、line-height、text-align、vertical-align等。
其他属性：color、background等。

伪类有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang
伪元素有：:first-line，:first-letter，:before，:after

css清除浮动方法: （讲解）（hasLayout）

http://www.cnblogs.com/qq21270/p/4854643.html

参考网站：

http://www.html5tricks.com/demo/jquery-css3-image-rotate/index.html　　CSS3图片翻转效果演示

http://demo.doyoe.com/css3/box-shadow/box-shadow-inset.htm 　　CSS3内阴影效果

http://www.w3school.com.cn/cssref/index.asp 　　CSS 参考手册

http://nec.netease.com/ 　　网易NEC框架

http://www.58img.com/framework/810 　　Hover.css——前端CSS3特效框架

http://foundation.zurb.com/ 　　最先进的响应式前端框架——Foundation 5发布2013-11-30 http://www.58img.com/framework/693

http://cool.techbrood.com/fiddle/4211 　　文字掉落的弹性效果（不错）　　2015-10-16

http://www.w3cplus.com/animation/create-animated-text-fills.html　　如何创建（动态的）文本填充　　2016-1-26

<style type="text/css">
.box-with-text {color:#fff;background:#f0f0f0;
  background-image: url(http://img.article.pchome.net/00/23/87/57/pic_lib/s960x639/24s960x639.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  font-size:600px;font-weight:bold;font-family:'黑体'
}
</style>
<div class="box-with-text">12345</div>

CSS3 动画，临时暂存 2015-10-28

/*顶部bar*/
@keyframes topbar-key {from {height: 0;}to {height: 40px;}}
@-webkit-keyframes topbar-key {from {height: 0;}to {height: 40px;}}
.topbar-anima,.txtbox-anima,.bottombar-anima{-webkit-animation: topbar-key  .25s 0s linear forwards;-ms-animation: topbar-key  .25s 0s linear forwards;animation: topbar-key  .25s 0s linear forwards;}

/*底部bar*/
@keyframes bottombar-key {from {height: 0;}to {height: 45px;}}
@-webkit-keyframes bottombar-key {from {height: 0;}to {height: 45px;}}
.bottombar-anima {-webkit-animation-name:bottombar-key;-ms-animation-name:bottombar-key;animation-name:bottombar-key;}
/*silde里的txtbox*/
@keyframes txtbox-key {from {bottom: 0;}to {bottom: 45px;}}
@-webkit-keyframes txtbox-key {from {bottom: 0;}to {bottom: 45px;}}
.txtbox-anima {-webkit-animation-name:txtbox-key;-ms-animation-name:txtbox-key;animation-name:txtbox-key;}

...

posted on 2014-05-10 22:41 bjhhh 阅读(2057) 评论(0) 编辑收藏举报

刷新页面返回顶部