123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0;font-family: '微软雅黑' }
- a { color:#555; text-decoration:none; }
- a:hover { cursor: pointer; text-decoration:none; }
- img { border:none;display: block; }
- ul,ol,dl,li,dt,dd{ list-style:none; }
- input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
- textarea { resize: none;}
- button:focus, select:focus, input:focus, textarea:focus { outline:0; }
- table { border-collapse:collapse; }
- html {overflow-y: scroll;}
- i,em,s{font-style: normal; }
- strong,h1,h2,h3,h4 { font-weight:400; }
- .inner{width: 1200px;margin: 0 auto}
- .fl{float: left;}
- .fr{float: right;}
- .innerAuto{
- width: 80%;
- max-width: 1200px;
- margin: 0 auto
- }
- .clearfix{ *zoom:1;}
- .clearfix:after{ display:block; clear:both; content:"";}
- .tl {text-align:left;}
- .tr {text-align:right;}
- .tc {text-align:center;}
- .va_top {vertical-align:top;}
- .hide {display:none;}
- .show {display:block;}
- .hid1{
- overflow: hidden;
- text-overflow:ellipsis;
- white-space: nowrap;
- }
- .hid2{
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 2;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- /***** 上下居中 ****/
- .centerHtml{
- position: fixed;top: 50%;left: 50%;
- transform: translateX(-50%) translateY(-50%);
- -webkit-transform: translateX(-50%) translateY(-50%);
- -moz-transform: translateX(-50%) translateY(-50%);
- -ms-transform: translateX(-50%) translateY(-50%);
- }
- .centertopDiv{
- position: absolute;top: 50%;
- transform: translateY(-50%);
- -webkit-transform: translateY(-50%);
- -moz-transform: translateY(-50%);
- -ms-transform: translateY(-50%);
- }
- /****** flex布局 ****/
- .flex{
- display:-webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- }
- /**** 主轴方向 flex-direction ****/
- .flex-directionRow {
- flex-direction: row;
- box-orient: horizontal;
- box-direction: norma;
- }
- .flex-directionRowreverse {
- flex-direction: row-reverse;
- box-orient: horizontal;
- box-direction: reverse;
- }
- .flex-directioncolumn {
- flex-direction: column;
- box-orient: vertical;
- box-direction: normal;
- }
- .flex-directioncolumn-reverse {
- flex-direction: column-reverse;
- box-orient: vertical;
- box-direction: reverse;
- }
- /**** 元素换行 flex-wrap ****/
- .flex-wrap {
- -webkit-flex-wrap: wrap;
- -webkit-box-lines: multiple; /** 默认single ==不换行 **/
- -moz-flex-wrap: wrap;
- flex-wrap: wrap;
- }
- /*** flex-flow ******/
- .flex-flow {
- -webkit-flex-flow: row wrap;
- -webkit-box-orient: horizontal;
- -webkit-box-lines: multiple;
- -moz-flex-flow: row wrap;
- box-orient: horizontal;
- box-lines: multiple;
- flex-flow: row wrap;
- }
- /******* 横向排列布局 justify-content **********/
- .justify-content {
- -webkit-justify-content: center;
- justify-content: center;
- -moz-box-pack: center;
- -webkit--moz-box-pack: center;
- box-pack: center; /***FF支持box-pack的justify值但无效***/
- }
- /******* 竖向排列布局 align-items*********/
- .align-items {
- align-items: center;
- -webkit-align-items: center;
- box-align: center;
- -moz-box-align: center;
- -webkit-box-align: center;
- }
- /******* 伸缩盒子布局兼容 flex******/
- .flex1 {
- box-flex: 1;
- -webkit-box-flex: 1;
- -moz-box-flex: 1;
- flex: 1;
- -webkit-flex: 1;
- }
- /******* 元素出现顺序 order******/
- .order {
- box-order: 1;
- -webkit-box-order: 1;
- -moz-box-order: 1;
- order: 1;
- -webkit-order: 1;
- }
- .header {
- width: 100%;
- height: 100px;
- z-index: 100;
- background: #fff;
- }
- .header img {
- height: 70px;
- margin-top: 15px;
- }
- .header a {
- margin: 30px 50px 0 0;
- padding: 0 5px;
- line-height: 40px;
- }
- .header a.active {
- border-bottom: 1px solid #aeaeae;
- }
- .foot {
- width: 100%;
- background-image: url("../img/footbj.jpg");
- background-size: cover;
- }
- .foot .title{
- padding: 30px 0;
- width: 650px;
- margin: 0 auto;
- justify-content: space-between;
- -webkit-justify-content:space-between;
- justify-content:space-between;
- -moz-box-pack:space-between;
- -webkit--moz-box-pack:space-between;
- box-pack:center;
- }
- .foot .title a {
- margin: 0 10px;
- display: inline-block;
- color: #909090;
- }
- .foot ul{
- width: 650px;
- margin: 0 auto;
- }
- .foot ul li img {
- width: 24px;
- height: 24px;
- margin-right: 5px;
- vertical-align: middle;
- display: inline-block;
- }
- .foot ul li {
- float: left;
- width: 40%;
- margin: 20px 0;
- }
- .foot ul li.active {
- width: 60%;
- }
- .foot ul li span {
- vertical-align: middle;
- color: #909090;
- }
- .info {
- padding: 60px 0;
- line-height: 50px;
- }
- @media screen and (max-width: 700px) {
- .centertopDiv{
- position: static;top: 0%;
- transform: translateY(0%);
- -webkit-transform: translateY(0%);
- -moz-transform: translateY(0%);
- -ms-transform: translateY(0%);
- font-size: 12px;
- }
- }
|