You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

268 lines
4.4 KiB

3 years ago
  1. /* 版心确定1200 */
  2. .w{
  3. width: 1200px;
  4. margin: 0 auto;
  5. }
  6. /* 调用字体图标 */
  7. @font-face {
  8. font-family: 'icomoon';
  9. src: url('../fonts/icomoon.eot');
  10. src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
  11. url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
  12. url('../fonts/icomoon.woff?7kkyc2') format('woff'),
  13. url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  14. font-weight: normal;
  15. font-style: normal;
  16. }
  17. .shortcut{
  18. width: 100%;
  19. height: 31px;
  20. line-height: 31px;
  21. background-color: #f1f1f1;
  22. }
  23. .fl{
  24. float: left;
  25. }
  26. .fr{
  27. float: right;
  28. }
  29. .style_red{
  30. color: #c81623;
  31. }
  32. .shortcut ul li{
  33. float: left;
  34. }
  35. .shortcut .fr ul li:nth-child(even){
  36. width: 1px;
  37. height: 12px;
  38. background-color: #666;
  39. margin: 9px 15px 0;
  40. }
  41. .arrow_icon::after{
  42. content: "\e91e";
  43. font-family: icomoon;
  44. margin-left: 3px;
  45. }
  46. /* 头部开始了 */
  47. .header{
  48. position: relative;
  49. height: 105px;
  50. background-color: pink;
  51. }
  52. .logo{
  53. position: absolute;
  54. top: 25px;
  55. width: 171px;
  56. height: 61px;
  57. /* background-color: blue; */
  58. }
  59. .logo a{
  60. display: block;
  61. width: 171px;
  62. height: 61px;
  63. background: url(../images/logo.png);
  64. /* 为了文字看不到,我们给了个写法 */
  65. /* font-size: 0; 京东做法*/
  66. /* 淘宝做法 */
  67. text-indent: -999px;
  68. overflow: hidden;
  69. }
  70. .search{
  71. width: 538px;
  72. height: 36px;
  73. border: 2px solid red;
  74. position: absolute;
  75. left: 346px;
  76. top: 25px;
  77. }
  78. .search input{
  79. float: left;
  80. width: 454px;
  81. height: 32px;
  82. padding-left: 10px;
  83. }
  84. .search button{
  85. float: right;
  86. width: 80px;
  87. height: 32px;
  88. background-color: red;
  89. font-size: 16px;
  90. color: #fff;
  91. }
  92. .hotword{
  93. position: absolute;
  94. top: 66px;
  95. left: 346px;
  96. }
  97. .hotword a{
  98. margin: 0 10px;
  99. }
  100. .shopcar{
  101. position: absolute;
  102. top: 25px;
  103. right: 60px;
  104. width: 140px;
  105. height: 35px;
  106. line-height: 35px;
  107. text-align: center;
  108. border: 1px solid #efefef;
  109. background-color: #f1f1f1;
  110. }
  111. .shopcar::before{
  112. font-family: 'icomoon';
  113. content: "\ea44";
  114. margin-right: 5px;
  115. color: red;
  116. }
  117. .shopcar::after{
  118. font-family: 'icomoon';
  119. content: "\ea44";
  120. margin-left: 5px;
  121. color: red;
  122. }
  123. .count{
  124. position:absolute;
  125. top: -5px;
  126. left: 105px;
  127. height: 14px;
  128. line-height: 14px;
  129. color: #fff;
  130. background-color: red;
  131. padding: 0 5px;
  132. border-radius: 7px 7px 7px 0;
  133. }
  134. .nav{
  135. height: 47px;
  136. border-bottom: 2px solid #b1191a;
  137. }
  138. .nav .dropdown{
  139. float: left;
  140. width: 210px;
  141. height: 45px;
  142. background-color: #b1191a;
  143. }
  144. .nav .navitems{
  145. float: left;
  146. }
  147. .dropdown .dt{
  148. width: 100%;
  149. height: 100%;
  150. color: #fff;
  151. line-height: 45px ;
  152. text-align: center;
  153. font-size: 16px;
  154. }
  155. .dropdown .dd{
  156. /* display: none; */
  157. width: 210px;
  158. height: 465px;
  159. background-color: #c81623;
  160. }
  161. .dropdown .dd ul li{
  162. position: relative;
  163. height: 31px;
  164. line-height: 31px;
  165. margin-left: 2px;
  166. }
  167. .dropdown .dd ul li:hover{
  168. background-color: #fff;
  169. }
  170. .dropdown .dd ul li::after{
  171. position: absolute;
  172. top: 5px;
  173. right: 5px;
  174. color: #fff;
  175. font-family: 'icomoon';
  176. content: "\e920";
  177. }
  178. .dropdown .dd ul li a{
  179. font-size: 14px;
  180. color: #fff;
  181. }
  182. .dropdown .dd ul li:hover a{
  183. color: #c81623;
  184. }
  185. .navitems ul li{
  186. float: left;
  187. }
  188. .navitems ul li a{
  189. display: block;
  190. height: 45px;
  191. line-height: 45px;
  192. padding: 0 25px;
  193. }
  194. /* 底部模块制作 */
  195. .footer{
  196. height: 415px;
  197. background-color: #f5f5f5;
  198. padding-top: 30px;
  199. }
  200. .mod_service{
  201. height: 80px;
  202. /* border: 1px solid #999; */
  203. }
  204. .mod_service ul li{
  205. float: left;
  206. width: 299px;
  207. height: 50px;
  208. padding-left: 35px;
  209. }
  210. .mod_service ul li h5{
  211. float: left;
  212. width: 50px;
  213. height: 50px;
  214. background: url(../images/icons.png) no-repeat -252px -2px;
  215. margin-right: 6px;
  216. }
  217. .service-_txt h4{
  218. font-size: 14px;
  219. }
  220. .service-_txt p{
  221. font-size: 12px;
  222. }
  223. .mod_help{
  224. height: 185px;
  225. border-bottom: 1px solid #999;
  226. margin-top: 20px;
  227. margin-left: 50px;
  228. }
  229. .mod_help dl{
  230. float: left;
  231. width: 200px;
  232. }
  233. .mod_help dl:last-child{
  234. width: 90px;
  235. text-align: center;
  236. }
  237. .mod_help dl dt{
  238. font-size: 16px;
  239. margin-bottom: 10px;
  240. }
  241. .mod_copyright{
  242. text-align: center;
  243. padding-top: 20px;
  244. }
  245. .links{
  246. margin-bottom: 15px;
  247. }
  248. .links a{
  249. margin: 0 auto;
  250. }
  251. .copyringht{
  252. line-height: 20px;
  253. }
  254. /* 底部完成 */