index.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. .nav{
  2. height: 35px;
  3. background: #EEEEEE ;
  4. }
  5. .nav-center{
  6. width: 1199px;
  7. height: 35px;
  8. /* background: green; */
  9. margin:0 auto;
  10. line-height: 35px;
  11. }
  12. .nav-left{
  13. float: left;
  14. }
  15. .nav-right{
  16. float: right;
  17. }
  18. .nav-center a{
  19. color:#888888 ;
  20. }
  21. .nav-center .active{
  22. color: #6F26BD;
  23. }
  24. .welcome{
  25. margin-right:25px;
  26. }
  27. /* header头部开始 */
  28. .header{
  29. height: 151px;
  30. /* background: red; */
  31. width: 1199px;
  32. margin:0 auto;
  33. }
  34. .header-logo{
  35. float: left;
  36. padding-top:44px;
  37. /* background: green; */
  38. }
  39. .header-search{
  40. float: left;
  41. /* background: blue; */
  42. width: 536px;
  43. height: 151px;
  44. margin-left:123px;
  45. margin-right:52px;
  46. }
  47. .header-cart{
  48. float: left;
  49. /* background: purple; */
  50. height:151px;
  51. }
  52. .search-box{
  53. width: 536px;
  54. height:44px;
  55. border:2px solid #6F26BD ;
  56. margin-top:44px;
  57. }
  58. .search-box input,.search-box button{
  59. float: left;
  60. border:none;
  61. }
  62. .search-box button{
  63. width: 62px;
  64. height: 44px;
  65. background: #6F26BD;
  66. font-size: 16px;
  67. color:#FFFFFF ;
  68. }
  69. .search-box input{
  70. width: 474px;
  71. height: 44px;
  72. /* 搜索框获取焦点 蓝色边 */
  73. outline: none;
  74. padding-left:7px;
  75. box-sizing: border-box;
  76. }
  77. .search-list{
  78. padding-top:10px;
  79. }
  80. .search-list a{
  81. color:#999999 ;
  82. margin-right: 25px;
  83. /* 行级元素margin 上下不好使 左右好使 */
  84. }
  85. .header-cart{
  86. padding-top:56px;
  87. box-sizing: border-box;
  88. }
  89. .header-cart img{
  90. /* 设置图片和span中的文字在垂直方向是居中对齐 (默认是居下对齐的) */
  91. vertical-align: middle;
  92. }
  93. .header-cart span{
  94. color:#959595;
  95. }
  96. /* 水平菜单 */
  97. .hor-menu{
  98. width: 1199px;
  99. height: 50px;
  100. /* background: #f00; */
  101. margin: 0 auto;
  102. padding-left:260px;
  103. /* 怪异盒模型 */
  104. box-sizing: border-box;
  105. }
  106. .hor-menu li{
  107. float: left;
  108. width: 146px;
  109. height: 50px;
  110. line-height: 50px;
  111. text-align: center;
  112. font-size: 14px;
  113. }
  114. .new-icon{
  115. position: absolute;
  116. top: -9px;
  117. right: 28px;
  118. }
  119. .new-icon-box{
  120. position: relative;
  121. }
  122. /* 轮播图开始 */
  123. .slide{
  124. height: 546px;
  125. /* background: #EEDED4; */
  126. background: url(../images/bg.png) center top;
  127. }
  128. .slide-center{
  129. width: 1199px;
  130. height: 546px;
  131. /* background: #f00; */
  132. margin:0 auto;
  133. position: relative;
  134. }
  135. .menu{
  136. height: 596px;
  137. width: 260px;
  138. background: rgba(0,0,0,0.4);
  139. position: absolute;
  140. top:-50px;
  141. }
  142. .menu-title{
  143. color:#fff;
  144. background: #6F26BD ;
  145. font-size: 14px;
  146. height: 50px;
  147. line-height: 50px;
  148. text-align: center;
  149. font-weight: 400;
  150. }
  151. .img-box{
  152. float: left;
  153. width: 27px;
  154. text-align: center;
  155. }
  156. .content-box{
  157. float: left;
  158. }
  159. /* 给li添加左右内边距,这里边因为没有给li设置宽度,所有不会被撑大 */
  160. .menu-list{
  161. padding:17px 7px 0 10px;
  162. }
  163. .content-box{
  164. width:216px;
  165. border-bottom: 1px solid #fff;
  166. padding-left:9px;
  167. box-sizing: border-box;
  168. }
  169. .contente-title{
  170. font-size: 16px;
  171. color: #FFFEFE;
  172. }
  173. .content-list{
  174. color: #FFFEFE;
  175. font-size: 13px;
  176. margin:13px 0 10px 0;
  177. }
  178. .img-box{
  179. padding-top:3px;
  180. }
  181. .menu-list-box{
  182. padding-top:16px;
  183. box-sizing: border-box;
  184. }
  185. .img-box .iconfont{
  186. color: #fff;
  187. font-size: 20px;
  188. }
  189. .activity{
  190. width: 590px;
  191. padding-bottom: 52px;
  192. /* height: 400px; */
  193. /* background: #F00; */
  194. }
  195. .group{
  196. float: left;
  197. }
  198. .seckill{
  199. float: right;
  200. }
  201. .activity-center{
  202. padding-top:41px;
  203. }
  204. .activity-title{
  205. border-bottom: 1px solid #6F26BD;
  206. }
  207. .activity-title-text{
  208. width: 125px;
  209. height: 34px;
  210. background: #6F26BD;
  211. color: #fff;
  212. font-size: 14px;
  213. text-align: center;
  214. line-height: 34px;
  215. margin-bottom: 1px;
  216. }
  217. .ac-pro-list{
  218. width: 186px;
  219. float: left;
  220. margin-right: 10px;
  221. }
  222. .ac-list-box{
  223. padding-top:19px;
  224. }
  225. .pro-name{
  226. font-size: 14px;
  227. color: #666666 ;
  228. padding-top:12px;
  229. }
  230. .pro-price{
  231. color: #666666 ;
  232. }
  233. .pro-price span{
  234. color:#FF4200;
  235. }
  236. .pro-btn{
  237. width: 168px;
  238. height: 18px;
  239. border:1px solid #A6A6A6 ;
  240. margin-top:6px;
  241. color:#A6A6A6 ;
  242. font-size: 13px;
  243. text-align: center;
  244. line-height: 18px;
  245. /* 边框圆角 */
  246. border-radius: 5px;
  247. position: relative;
  248. }
  249. .btn-icon{
  250. width: 28px;
  251. height: 18px;
  252. background: #A6A6A6 url(../images/gift-icon.png) no-repeat center center ;
  253. border-radius: 5px;
  254. position: absolute;
  255. left:0;
  256. top:0;
  257. }
  258. /* */
  259. .c-content{
  260. height: 800px;
  261. background: #F5F5F5;
  262. }
  263. .c-content-title{
  264. height: 80px;
  265. line-height: 80px;
  266. color: #E74079 ;
  267. font-size: 26px;
  268. text-align: center;
  269. }
  270. .c-hot-box{
  271. width: 118px;
  272. height: 476px;
  273. background: #f00;
  274. float: left;
  275. }
  276. .c-sp-area{
  277. width: 192px;
  278. height: 476px;
  279. background: #00f;
  280. float: left;
  281. }
  282. .c-pro{
  283. width: 594px;
  284. height: 476px;
  285. background: #0f0;
  286. float: left;
  287. }
  288. .c-brand{
  289. width: 292px;
  290. height: 476px;
  291. background: #000;
  292. float: left;
  293. }
  294. .c-pro-list{
  295. width: 198px;
  296. height: 237px;
  297. background: #fff;
  298. float: left;
  299. border-right: 1px solid #E8E8E8;
  300. border-bottom: 1px solid #E8E8E8;
  301. box-sizing: border-box;
  302. }
  303. .c-pro-list-1{
  304. width: 396px;
  305. }