index.css 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. font-family: 微软雅黑;
  6. list-style: none;
  7. text-decoration: none;
  8. }
  9. body{
  10. background-color: #EEEDED;
  11. }
  12. header{
  13. background-color: #FDC606;
  14. display: flex;
  15. line-height: 50px;
  16. height: 60px;
  17. padding: 5px 15px;
  18. justify-content: space-between;
  19. box-shadow: 0px 0px 4px 0 rgba(0,0,0,.5);
  20. }
  21. .logo{
  22. width: 50px;
  23. height: 50px;
  24. border-radius: 5px;
  25. }
  26. header a{
  27. color: #000;
  28. text-decoration: none;
  29. font-weight: 500;
  30. }
  31. .nav{
  32. width: 1200px;
  33. max-width: 80%;
  34. /* text-align: center; */
  35. }
  36. .nav a{
  37. line-height: 40px;
  38. height: 40px;
  39. margin: 0 20px;
  40. padding: 0 20px;
  41. display: inline-block;
  42. border-radius: 30px 15px 30px 15px;
  43. }
  44. /* .nav a:hover{
  45. color: #fff;
  46. transition: all 0.5s;
  47. } */
  48. .nav .act{
  49. background-color: #000;
  50. color: #fff;
  51. transform: skew(-10deg);
  52. }
  53. .login img{
  54. border-radius: 50%;
  55. position: relative;
  56. top: 10px;
  57. }
  58. .content{
  59. width: 1200px;
  60. max-width: 100%;
  61. margin: 20px auto;
  62. display: flex;
  63. justify-content: space-between;
  64. flex-wrap: wrap;
  65. font-size: 14px;
  66. }
  67. .left{
  68. width: 70%;
  69. }
  70. .right{
  71. width: 28%;
  72. }
  73. .banner{
  74. height: 150px;
  75. background-color: #000;
  76. text-align: center;
  77. color: #fff;
  78. line-height: 150px;
  79. }
  80. .part{
  81. background-color: #fff;
  82. padding: 15px;
  83. box-shadow: 0px 0px 4px 0 rgba(0,0,0,.1);
  84. margin: 15px 0;
  85. }
  86. .title{
  87. font-size: 22px;
  88. font-weight: 500;
  89. text-align: center;
  90. margin-bottom: 20px;
  91. position: relative;
  92. }
  93. .title span{
  94. position: relative;
  95. z-index: 9;
  96. }
  97. .title::before{
  98. content: '';
  99. position: absolute;
  100. width: 0;
  101. height: 0;
  102. border-left: 25px solid transparent;
  103. border-right: 130px solid transparent;
  104. border-bottom: 20px solid #FDC606;
  105. left: 0;
  106. right: 0;
  107. margin: auto;
  108. top: 35%;
  109. z-index: 1;
  110. transform: rotate(-10deg);
  111. }
  112. .list{
  113. display: flex;
  114. flex-wrap: wrap;
  115. }
  116. .list li{
  117. width: 48%;
  118. overflow: hidden;
  119. text-overflow: ellipsis;
  120. white-space: nowrap;
  121. line-height: 50px;
  122. }
  123. .list li a{
  124. color: #333;
  125. text-decoration: none;
  126. font-weight: 500;
  127. }
  128. .list li a:hover{
  129. color: #0760C7;
  130. }
  131. .more{
  132. display: block;
  133. background-color: #000;
  134. color: #fff;
  135. padding: 10px 0;
  136. text-align: center;
  137. margin: 15px auto;
  138. border-radius: 3px;
  139. width: 200px;
  140. }
  141. .sec_title{
  142. display: flex;
  143. justify-content: space-between;
  144. align-items: flex-end;
  145. margin-bottom: 20px;
  146. }
  147. .sec_title span{
  148. font-size: 16px;
  149. border-bottom: 4px solid #FDC606;
  150. }
  151. .sec_title a{
  152. font-size: 13px;
  153. color: #0760C7;
  154. font-weight: 600;
  155. position: relative;
  156. top: -4px;
  157. }
  158. .list_100 li{
  159. width: 100%;
  160. display: flex;
  161. line-height: 40px;
  162. justify-content: space-between;
  163. }
  164. .list_100 li span{
  165. color: #999;
  166. font-size: 13px;
  167. }
  168. .form{
  169. text-align: center;
  170. }
  171. .form input,.form textarea{
  172. width: 100%;
  173. height: 40px;
  174. border: 1px solid #ccc;
  175. border-radius: 3px;
  176. padding: 0 10px;
  177. margin-bottom: 15px;
  178. outline: none;
  179. }
  180. .form textarea{
  181. height: 200px;
  182. }
  183. .form button{
  184. width: 150px;
  185. height: 40px;
  186. border: none;
  187. background-color: #000;
  188. color: #fff;
  189. font-weight: 600;
  190. border-radius: 3px;
  191. outline: none;
  192. }
  193. .form button:hover{
  194. background-color: #333;
  195. cursor: pointer;
  196. transition: .3s;
  197. }
  198. input:focus{
  199. border:2px solid #0760C7;
  200. }
  201. .page{
  202. text-align: center;
  203. padding: 10px 0;
  204. }
  205. .page button{
  206. background: none;
  207. border: 1px solid #ccc;
  208. border-radius: 3px;
  209. padding: 5px 7px;
  210. margin: 0 20px;
  211. font-size: 13px;
  212. }
  213. .page button:hover{
  214. color: #fff;
  215. background-color: #0760C7;
  216. transition: .5s;
  217. border-color: #0760C7;
  218. cursor: pointer;
  219. }
  220. .page b{
  221. color: #0760C7;
  222. }
  223. .navtation{
  224. margin: 20px 0 0;
  225. width: 100%;
  226. }
  227. .navtation a{
  228. color: #0760C7;
  229. }
  230. footer{
  231. height: 200px;
  232. background-color: #000;
  233. }
  234. @media screen and (max-width: 768px){
  235. .content{
  236. padding: 0 15px;
  237. }
  238. .left,.right{
  239. width: 100% !important;
  240. margin-bottom: 10px;
  241. }
  242. .nav{
  243. display: none;
  244. }
  245. }