自己的css

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd {
  margin: 0px;
  padding: 0px;
  border: none;
  list-style: none;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

// input:-webkit-autofill{
// 	-webkit-box-shadow:0 0 0 1000px white inset !important;
// }
input:-internal-autofill-selected {
  background-color: #fff !important;
  box-shadow: inset 0 0 0 1000px #fff !important;
  transition: background-color 5000s ease-in-out 0s;
  // border: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition-delay: 99999s;
  transition: color 99999s ease-out, background-color 99999s ease-out;
}

@font-face {/*苹方字体*/
  font-family: 'pingfang';
  src: url('../fonts/pingfang.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face { /*电子字体*/
  font-family:'electronicFont';
  src: url("../fonts/DS-DIGIT.TTF");
}
body ::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}
body ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  -webkit-box-shadow: inset 0 0 5px rgba(75, 65, 65, 0.2);
  background: rgba(75, 65, 65, 0.6);
}
body ::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px #ddd;
  border-radius: 0px;
  background: #EDEDED;

}
.360box{
    box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
	}
.scrollBarStyle::-webkit-scrollbar    
{    
    width: 6px;    
    height: 6px;    
    background-color: #F5F5F5;    
}    
    
/*定义滚动条轨道 内阴影+圆角*/    
.scrollBarStyle::-webkit-scrollbar-track    
{    
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    
    border-radius: 10px;    
    background-color: #FFF;    
}    
    
/*定义滑块 内阴影+圆角*/    
.scrollBarStyle::-webkit-scrollbar-thumb    
{    
    border-radius: 10px;    
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    
    background-color: #AAA;    
}   
.hasContainer_span {
    display: inline-block;
    margin-bottom: 1px;
    padding: 4px;
    padding-left: 23px;
    border-radius: 5px;
    box-shadow: inset 0 0 20px #08ACDF;
    background: url(../img/drag.png) no-repeat 4px rgba(130, 185, 226,.1);
    cursor: pointer;
}
.blur {
	filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

	-webkit-filter: blur(10px); /* Chrome, Opera */
	-moz-filter: blur(10px);
	-ms-filter: blur(10px);
	filter: blur(10px);

	filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
.ibox-title-special {
	background: linear-gradient(to bottom,rgba(255,255,255,0.3),rgba(0,0,0,0.3), transparent );
	border-top: 3px solid rgba(0, 188, 255, 0.9);
	/*  height: 62px; */
	/* margin-bottom: 14px; */
}/**#1D4CAB**/
.button.btn-demo:hover {
    background-color: #0595d5;
    background-image: -webkit-linear-gradient(top, #2673f1 0%, #0595d5 100%);
    color: #fff;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
}
.button {
    display: inline-block;
    background-color: #0595d5;
    width: 98px;
    height: 42px;
    overflow: hidden;
    float: left;
    padding: 0 22px 0 20px;
    text-align: right;
    color: #fff;
    border-radius: 3px;
    border: 1px solid rgba(50,50,50,0.68);
    text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
    cursor: pointer;
    font: 400 18px/42px "microsoft yahei";
    position: relative;
}
.button.btn-demo {
    margin-right: 15px;
    background-image: -webkit-linear-gradient(top, #0595d5 0%, #2673f1 100%);
    background-image: linear-gradient(top, #0595d5 0%, #2673f1 100%);
    border: 1px solid #418ada;
    box-shadow: 0px 2px 1px rgba(0,0,0,0.15);
}
.button.btn-demo i, .button.btn-down i, .button.btn-host i {
    transition: all 0.2s ease-in-out;
}
.icon-demo {
    background-position: -48px 0px;
    position: absolute;
    left: 22px;
    top: 9px;
}
.icon-demo-transiton {
    background-position: -48px 0px;
    position: absolute;
    left: 22px;
    top: 9px;
    opacity: 0;
    -webkit-transform: scale(3.2);
    -moz-transform: scale(3.2);
    -ms-transform: scale(3.2);
    transform: scale(3.2);
}
.icon-white, .icon-black {
    width: 14px;
    height: 14px;
    line-height: 14px;
    display: inline-block;
    background: no-repeat;
    background: url(img/icon.png);
    margin: 5px 6px 0 0;
}
.pull-right {
  float: right !important;
}

.pull-left {
  float: left !important;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
}

.flex-inline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex
}

.row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.column {
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

.column,
.column-reverse {
  -webkit-box-orient: vertical
}

.column-reverse {
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse
}

.wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.wrap-reverse {
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse
}

.jc-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.jc-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.jc-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end
}

.jc-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between
}

.jc-around {
  -ms-flex-pack: distribute;
  justify-content: space-around
}

.ai-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.ai-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end
}

.ai-stretch {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch
}
.ac-start{
  -ms-flex-line-pack: start;
  align-content:flex-start
}
.ac-center {
  -ms-flex-line-pack: center;
  align-content: center
}

.ac-end {
  -ms-flex-line-pack: end;
  align-content: flex-end
}

.ac-between {
  -ms-flex-line-pack: justify;
  align-content: space-between
}

.ac-around {
  -ms-flex-line-pack: distribute;
  align-content: space-around
}

.ac-stretch {
  -ms-flex-line-pack: stretch;
  align-content: stretch
}

.equal,
.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}

.flex-2 {
  -webkit-box-flex: 2;
  -ms-flex: 2;
  flex: 2;
  min-width: 0;
}

.flex-3 {
  -webkit-box-flex: 3;
  -ms-flex: 3;
  flex: 3;
  min-width: 0;
}

.flex-4 {
  -webkit-box-flex: 4;
  -ms-flex: 4;
  flex: 4;
  min-width: 0;
}

.flex-5 {
  -webkit-box-flex: 5;
  -ms-flex: 5;
  flex: 5;
  min-width: 0;
}


.equal-auto {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0
}

.equal-no {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.allHeight {
  height: 100%;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.block {
  display: block;
}
.ellips{
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis;
}
.ellips_line2,.ellips_line3{
  display:-webkit-box;
  -webkit-box-orient:vertical; 
  overflow:hidden;
}
 /*chrome下的私有属性*/
.ellips_line2{ /*显示两行，超出的用省略号显示*/
   -webkit-line-clamp:2;
}
.ellips_line3{/*显示三行，超出的用省略号显示*/
   -webkit-line-clamp:3;
} 
.line-clamp{
  overflow:hidden; 
  text-overflow:ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2; 
}

一下为预编译css语言 

caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777777;
  text-align: left;
}
th {
  text-align: center;
}


// Baseline styles

.table {
  width: 100%;
  max-width: 100%;
  // Cells
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: 8px;
        line-height: 1.42857143;
        vertical-align: center;
        text-align: center;
        border-top: 1px solid #dddddd;
      }
    }
  }
  // Bottom align for column headings
  > thead > tr > th {
    vertical-align: center;
    text-align: center;
    border-bottom: 1px solid #ddd;
  }
  // Remove top border from thead by default
  > caption + thead,
  > colgroup + thead,
  > thead:first-child {
    > tr:first-child {
      > th,
      > td {
        border-top: 0;
      }
    }
  }
  // Account for multiple tbody instances
  > tbody + tbody {
    border-top: 1px solid #ddd;
  }

  // Nesting
  .table {
    background-color: transparent;
  }
}


// Condensed table w/ half padding

.table-condensed {
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding:8px;
      }
    }
  }
}


// Bordered version
//
// Add borders all around the table and between all the columns.

.table-bordered {
  border: 1px solid #ddd;
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        border: 1px solid #ddd;
      }
    }
  }
  > thead > tr {
    > th,
    > td {
      border-bottom-width: 1px;
    }
  }
}


// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)

.table-striped {
  > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
  }
}


// Hover effect
//
// Placed here since it has to come after the potential zebra striping

.table-hover {
  > tbody > tr:hover {
    background-color: #f5f5f5;
  }
}


// Table cell sizing
//
// Reset default table behavior

table col[class*="col-"] {
  position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
  float: none;
  display: table-column;
}
table {
  td,
  th {
    &[class*="col-"] {
      position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
      float: none;
      display: table-cell;
    }
  }
}


// Table backgrounds
//
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.



// Responsive tables
//
// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
// by enabling horizontal scrolling. Only applies <768px. Everything above that
// will display normally.

.table-responsive {
  overflow-x: auto;
  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)

  @media screen and (max-width: 767px) {
    width: 100%;
    margin-bottom: 5px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;

    // Tighten up spacing
    > .table {
      margin-bottom: 0;

      // Ensure the content doesn't wrap
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th,
          > td {
            white-space: nowrap;
          }
        }
      }
    }

    // Special overrides for the bordered tables
    > .table-bordered {
      border: 0;

      // Nuke the appropriate borders so that the parent can handle them
      > thead,
      > tbody,
      > tfoot {
        > tr {
          > th:first-child,
          > td:first-child {
            border-left: 0;
          }
          > th:last-child,
          > td:last-child {
            border-right: 0;
          }
        }
      }

      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
      // chances are there will be only one `tr` in a `thead` and that would
      // remove the border altogether.
      > tbody,
      > tfoot {
        > tr:last-child {
          > th,
          > td {
            border-bottom: 0;
          }
        }
      }

    }
  }
}