Common function css, such as Clear float. #css

fn.css

/* 清除浮动 */
.fn-clear:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both; 
}
.fn-clear {
  *zoom: 1;
}

/* 隐藏元素 */
.fn-hide {
  display: none;
}

/* 设置内联, 减少浮动带来的bug */
.fn-left,.fn-right {
    display:inline;
}

/* 左浮动 */
.fn-left {
  float: left;
}

/* 左浮动 */
.fn-right {
  float: right;
}

/* 文字单行溢出省略号，需设定宽度 */
.fn-text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 简单的渐变 */
.fn-linear {
    background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f1f1f1));
    background: -moz-linear-gradient(top, #fcfcfc, #f1f1f1);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f1f1f1');
    background:-o-linear-gradient(top, #fcfcfc, #f1f1f1);
    background: linear-gradient(top, #fcfcfc, #f1f1f1);
}

/* 浅色的渐变 */
.fn-linear-light {
    background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f9f9f9));
    background: -moz-linear-gradient(top, #fcfcfc, #f9f9f9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f9f9f9');
    background:-o-linear-gradient(top, #fcfcfc, #f9f9f9);
    background: linear-gradient(top, #fcfcfc, #f9f9f9);
}

/*被水平线分隔的标题和段落*/
hr {
    border: 0;
    height: 1px;
    background: #eee;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
    margin: 15px 0;
}

/* 响应式 */
@media (max-width: 980px) {
    .main-area,
    #footer-wrapper {
        width: auto;
    }
    .nav-area {
        height: auto;
        font-size: 16px;
    }
    .main-nav {
        width: auto;
        margin: 0;
        line-height: 40px;
    }
    .main-nav li {
        display: block;
        margin: 0;
    }
    .side-area {
        position: relative!important;
        top: 0!important;
        margin-bottom: 20px;
        width: auto;
    }
    .content-area,
    .comment-area {
        margin-left: 0;
        width: auto;
    }
}