前端样式的公共组件

一、css RESET

1）如果是定长布局，页面主体一般是1000px

2）网页字体大小一般是12px，其他依次设定为14px，16px...

3)中文网页一般采用宋体，标题一般采用微软雅黑 

 

/*Css Document*/



* {

margin:0;

padding:0;

}



*,*:before,*:after{

    box-sizing:border-box;

    -moz-box-sizing:border-box; /* Firefox */

    -webkit-box-sizing:border-box; /* Safari */

} 

body{

    font:12px "宋体";

    background-color:#333;

    color:#3F3E3C;

    line-height:1.5;    

}

img{

    border:0;

    vertical-align:middle;

}

h1,h2,h3,h4,h5,h6{

    font-weight:normal;

}

h1{

    font:24px "微软雅黑";    

}

p{

    word-wrap:break-word;

}

ul,ol{

    list-style:none;

    margin:0;

    padding:0;

}

dl,dt,dd{

    margin:0;

    padding:0;

}

a{

    color:#a6a6a6;

    text-decoration:none;

    transition:all 1s ease;

}

a:hover{

    color:#fff;

}

.clear:after{

   content:"";

  display:table;

  clear:both;       

}



.clear{

   zoom:1;  

}

css RESET

 

 

 

 

二、一行字体太多的时候，不换行，超出部分字体利用...代替

 p{

    white-space:nowrap;

    text-overflow:ellipsis;

    overflow:hidden;

    line-height:24px;

}

 

三、用来清除浮动的类

/*用来清除浮动*/

.blank {

     height: 5px; 

     overflow: hidden; 

     width: 100%; 

     margin: auto;

     clear: both 

 }

使用方法，在需要清除浮动的地方，添加<div class="blank></div>即可，这种方法需要添加额外的组件

另一种方法，在后面元素（还是本身？）需要清除浮动的外围div中添加类.clear。定义如下：

 

.clear:after{

   content:"";

  display:table;

  clear:both;       

}



.clear{

   zoom:1;  

}