base.css 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. 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: '微软雅黑' }
  2. a { color:#555; text-decoration:none; }
  3. a:hover { cursor: pointer; text-decoration:none; }
  4. img { border:none;display: block; }
  5. ul,ol,dl,li,dt,dd{ list-style:none; }
  6. input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
  7. textarea { resize: none;}
  8. button:focus, select:focus, input:focus, textarea:focus { outline:0; }
  9. table { border-collapse:collapse; }
  10. html {overflow-y: scroll;}
  11. i,em,s{font-style: normal; }
  12. strong,h1,h2,h3,h4 { font-weight:400; }
  13. .inner{width: 1200px;margin: 0 auto}
  14. .fl{float: left;}
  15. .fr{float: right;}
  16. .innerAuto{
  17. width: 80%;
  18. max-width: 1200px;
  19. margin: 0 auto
  20. }
  21. .clearfix{ *zoom:1;}
  22. .clearfix:after{ display:block; clear:both; content:"";}
  23. .tl {text-align:left;}
  24. .tr {text-align:right;}
  25. .tc {text-align:center;}
  26. .va_top {vertical-align:top;}
  27. .hide {display:none;}
  28. .show {display:block;}
  29. .hid1{
  30. overflow: hidden;
  31. text-overflow:ellipsis;
  32. white-space: nowrap;
  33. }
  34. .hid2{
  35. display: -webkit-box;
  36. -webkit-box-orient: vertical;
  37. -webkit-line-clamp: 2;
  38. overflow: hidden;
  39. text-overflow: ellipsis;
  40. }
  41. /***** 上下居中 ****/
  42. .centerHtml{
  43. position: fixed;top: 50%;left: 50%;
  44. transform: translateX(-50%) translateY(-50%);
  45. -webkit-transform: translateX(-50%) translateY(-50%);
  46. -moz-transform: translateX(-50%) translateY(-50%);
  47. -ms-transform: translateX(-50%) translateY(-50%);
  48. }
  49. .centertopDiv{
  50. position: absolute;top: 50%;
  51. transform: translateY(-50%);
  52. -webkit-transform: translateY(-50%);
  53. -moz-transform: translateY(-50%);
  54. -ms-transform: translateY(-50%);
  55. }
  56. /****** flex布局 ****/
  57. .flex{
  58. display:-webkit-box;
  59. display: -moz-box;
  60. display: -ms-flexbox;
  61. display: -webkit-flex;
  62. display: flex;
  63. }
  64. /**** 主轴方向 flex-direction ****/
  65. .flex-directionRow {
  66. flex-direction: row;
  67. box-orient: horizontal;
  68. box-direction: norma;
  69. }
  70. .flex-directionRowreverse {
  71. flex-direction: row-reverse;
  72. box-orient: horizontal;
  73. box-direction: reverse;
  74. }
  75. .flex-directioncolumn {
  76. flex-direction: column;
  77. box-orient: vertical;
  78. box-direction: normal;
  79. }
  80. .flex-directioncolumn-reverse {
  81. flex-direction: column-reverse;
  82. box-orient: vertical;
  83. box-direction: reverse;
  84. }
  85. /**** 元素换行 flex-wrap ****/
  86. .flex-wrap {
  87. -webkit-flex-wrap: wrap;
  88. -webkit-box-lines: multiple; /** 默认single ==不换行 **/
  89. -moz-flex-wrap: wrap;
  90. flex-wrap: wrap;
  91. }
  92. /*** flex-flow ******/
  93. .flex-flow {
  94. -webkit-flex-flow: row wrap;
  95. -webkit-box-orient: horizontal;
  96. -webkit-box-lines: multiple;
  97. -moz-flex-flow: row wrap;
  98. box-orient: horizontal;
  99. box-lines: multiple;
  100. flex-flow: row wrap;
  101. }
  102. /******* 横向排列布局 justify-content **********/
  103. .justify-content {
  104. -webkit-justify-content: center;
  105. justify-content: center;
  106. -moz-box-pack: center;
  107. -webkit--moz-box-pack: center;
  108. box-pack: center; /***FF支持box-pack的justify值但无效***/
  109. }
  110. /******* 竖向排列布局 align-items*********/
  111. .align-items {
  112. align-items: center;
  113. -webkit-align-items: center;
  114. box-align: center;
  115. -moz-box-align: center;
  116. -webkit-box-align: center;
  117. }
  118. /******* 伸缩盒子布局兼容 flex******/
  119. .flex1 {
  120. box-flex: 1;
  121. -webkit-box-flex: 1;
  122. -moz-box-flex: 1;
  123. flex: 1;
  124. -webkit-flex: 1;
  125. }
  126. /******* 元素出现顺序 order******/
  127. .order {
  128. box-order: 1;
  129. -webkit-box-order: 1;
  130. -moz-box-order: 1;
  131. order: 1;
  132. -webkit-order: 1;
  133. }
  134. .header {
  135. width: 100%;
  136. height: 100px;
  137. z-index: 100;
  138. background: #fff;
  139. }
  140. .header img {
  141. height: 70px;
  142. margin-top: 15px;
  143. }
  144. .header a {
  145. margin: 30px 50px 0 0;
  146. padding: 0 5px;
  147. line-height: 40px;
  148. }
  149. .header a.active {
  150. border-bottom: 1px solid #aeaeae;
  151. }
  152. .foot {
  153. width: 100%;
  154. background-image: url("../img/footbj.jpg");
  155. background-size: cover;
  156. }
  157. .foot .title{
  158. padding: 30px 0;
  159. width: 650px;
  160. margin: 0 auto;
  161. justify-content: space-between;
  162. -webkit-justify-content:space-between;
  163. justify-content:space-between;
  164. -moz-box-pack:space-between;
  165. -webkit--moz-box-pack:space-between;
  166. box-pack:center;
  167. }
  168. .foot .title a {
  169. margin: 0 10px;
  170. display: inline-block;
  171. color: #909090;
  172. }
  173. .foot ul{
  174. width: 650px;
  175. margin: 0 auto;
  176. }
  177. .foot ul li img {
  178. width: 24px;
  179. height: 24px;
  180. margin-right: 5px;
  181. vertical-align: middle;
  182. display: inline-block;
  183. }
  184. .foot ul li {
  185. float: left;
  186. width: 40%;
  187. margin: 20px 0;
  188. }
  189. .foot ul li.active {
  190. width: 60%;
  191. }
  192. .foot ul li span {
  193. vertical-align: middle;
  194. color: #909090;
  195. }
  196. .info {
  197. padding: 60px 0;
  198. line-height: 50px;
  199. }
  200. @media screen and (max-width: 700px) {
  201. .centertopDiv{
  202. position: static;top: 0%;
  203. transform: translateY(0%);
  204. -webkit-transform: translateY(0%);
  205. -moz-transform: translateY(0%);
  206. -ms-transform: translateY(0%);
  207. font-size: 12px;
  208. }
  209. }