前端样式的公共组件

一、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;
}