CSS实用的代码段

摘抄的一些代码还有自己总结的常用的代码~

1>浏览器样式统一

1 *｛
2 margin：0px;
3 padding:0px;
4 ｝

浏览器样式统一

2>清除浮动的方法

3>跨浏览器设置透明度

1 .transparent{
2     filter:alpha(opacity=50);  /*IE*/
3     -khtml-opacity:0.5; /*老版本的Safari*/
4     -moz-opacity:0.5; /*Mozilla,Netscape*/ 
5     opacity:0.5;  /*fx，Safari，Opera*/      
6 }

跨浏览器设置透明度

4>设置圆角

1 .circle{
2     -webkit-border-radius:4px 2px 5px 10px;
3     -moz-border-radius:4px 2px 5px 10px;
4     -ms-border-radius:4px 2px 5px 10px; 
5     -o-border-radius:4px 2px 5px 10px;
6     border-radius:4px 2px 5px 10px;
7 ｝

设置圆角

5>CSS字体属性简写（缩写）

1 .title{
2     font:font-style font-variant font-weight font-size line-height font-family
3 }

CSS字体属性简写（缩写）

6>强制垂直滚动条

1 html{height:101%}

强制垂直滚动条

7>设置自定义字体

 1 @font-face{
 2     font-family:'calamus';
 3     src:url('pictos/calamus.eot'); /* IE9 */
 4     src:url('pictos/calamus.eot') format('embedded-opentype'),/*IE6-IE8*/
 5          url('pictos/calamus.ttf') format('truetype'),/*Safari,Android,IOS*/
 6          url('pictos/calamus.woff') format('woff),/*Modern Browers*/
 7          url('pictos/calamus.svg') format('svg');/*Legacy IOS*/
 8 }
 9 body{
10     font-family:'calamus';
11 }

设置自定义字体

8>文本对齐方式

1 .content{
2 text-align:center;  /*把文本排列到中间。*/
3 text-align:left;     /*把文本排列到左边。默认值：由浏览器决定。*/
4 text-align:right;     /*把文本排列到右边。*/    
5 text-align:justify;     /*实现两端对齐文本效果。*/
6 text-align:inherit ;    /*规定应该从父元素继承 text-align 属性的值。*/
7 }

文本对齐

9>垂直居中内容

1 .content{
2     min-height:6.5em;
3     display:table-cell;
4     vertical-align:middle;   
5 }

垂直居中内容

10>固定宽度的局中布局

1 .page{
2     width:800px;
3     margin:0 auto;   
4 }

固定宽度的局中布局

11>CSS3斑马条纹

1 tbody tr:nth-child(odd){
2     background-color:#ccc;
3 }

CSS3斑马条纹

12>图片自适应大小

1 .logo{
2     background-image:url('img/calamus.jpg');
3     background-size:100%;
4     width:100%;
5     padding-top:30%;
6     height:0;
7     text-indent:-9999px;
8 }

View Code

posted on 2016-04-18 23:28 calamus 阅读(279) 评论(0) 编辑收藏举报