第2张图Echarts-css

css

1.reset.css

2.style.css

3.swiper.min.css

---------------------------------------------------------------------------------------------------------

 

1.

/**

* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)

* http://cssreset.com

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

--------------------------------------------------------------------------------------------------------------------

2.

body,html {

  width: 100%;

  height: 100%;

}

.oh {

  overflow: hidden;

}

.fr {

  float: right;

}

.fl {

  float: left;

}

.cl{

  clear:both

}

.swiper-container {

 height: 100%;

}

.page-one {

  background-color: rgba(102,255,153,0.3);

}

.page-second {

  background-color: rgba(51,153,255,0.3);

}

.top-title {

  text-align: center;

  font-size: 32px;

  height: 80px;

  line-height: 80px;

  /* color: #ffffff; */

}

/* 第一屏相关样式 */

.content-wrap {

  padding:40px;

}

.left-content {

  float: left;

  width: 60%;

  margin-right: 20px;

}

.item-top-content {

  max-width: 440px;

}

.right-content .item-top-content {

  float: right;

  margin-right: 40px;

}

.item-top-content .content-title {

  text-align: center;

}

.item-top-content .block-item {

  width: 200px;

  height: 100px;

  background: #3366ff;

  text-align: center;

  margin: 50px auto 0;

  box-sizing: border-box;

  padding-top: 10px;

}

.item-top-content .block-item p {

  font-size: 20px;

  line-height: 44px;

}

.item-top-content .block-item span {

  font-size: 26px;

}

.item-top-content .list-item {

  margin-top: 30px;

}

.item-top-content .list-item .title {

  text-align: center;

}

.item-top-content .list-item .item {

  width: 280px;

  margin: 20px auto 0;

  height: 24px;

  line-height: 24px;

  background: #66ffff;

}

.item-top-content .list-item .item:nth-of-type(2) {

  background: #cc33ff;

}

.item-top-content .list-item .item:nth-of-type(3) {

  background: #33ff66;

}

.item-top-content .list-item span {

  display: inline-block;

  text-align: center;

}

.item-top-content .list-item .item-name {

  width: 160px;

}

.item-top-content .list-item .item-num {

  width: 100px;

}

.left-bottom-content {

  margin-top: 100px;

  border: 1px solid #DBDBDB;

  padding: 20px;

}

.left-bottom-content .head-nav {

  overflow: hidden;

}

.left-bottom-content .head-nav li {

  float: left;

  width: 160px;

  height: 36px;

  line-height: 36px;

  text-align: center;

  cursor: pointer;

  background: #3366ff;

  margin-left: 10px;

}

.left-bottom-content .head-nav li:first-of-type {

  margin-left: 0;

}

.left-bottom-content .head-nav li.active {

  background: #6666cc;

}

.nav-content-wrap {

  margin-top: 20px;

}

.nav-content {

  height: 140px;

  overflow: hidden;

  display: none;

}

.nav-content.showActive {

  display: block;

}

.nav-content span {

  display: inline-block;

  width: 33.3%;

  text-align: center;

}

.nav-content p {

  height: 24px;

  line-height: 24px;

}

.right-content {

  width: 38%;

  float: right;<