index.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. .main {
  2. width: 980px;
  3. height: 455px;
  4. margin-left: 219px;
  5. margin-top: 10px;
  6. }
  7. .focus {
  8. position: relative;
  9. width: 720px;
  10. height: 455px;
  11. background-color: purple;
  12. }
  13. .newsflash {
  14. width: 250px;
  15. height: 455px;
  16. }
  17. .arrow-l,
  18. .arrow-r {
  19. position: absolute;
  20. top: 50%;
  21. margin-top: -20px;
  22. width: 24px;
  23. height: 40px;
  24. line-height: 40px;
  25. text-align: center;
  26. background: rgb( 0, 0, 0, .3);
  27. color: #fff;
  28. }
  29. .arrow-r {
  30. right: 0;
  31. }
  32. .circle {
  33. position: absolute;
  34. bottom: 10px;
  35. left : 50px;
  36. }
  37. .circle li {
  38. float: left;
  39. height: 8px;
  40. width: 8px;
  41. border: 1px solid #fff;
  42. margin: 0 3px;
  43. border-radius: 50%;
  44. cursor: pointer;
  45. }
  46. .current {
  47. background-color: #fff;
  48. }
  49. .news {
  50. height: 163px;
  51. border: 1px solid #ccc;
  52. }
  53. .news_hd {
  54. height: 32px;
  55. border-bottom: 1px dotted #ccc;
  56. padding-left: 15px;
  57. font-size: 14px;
  58. line-height: 32px;
  59. }
  60. .news_hd a {
  61. float: right;
  62. padding-right: 15px;
  63. }
  64. .news_bd {
  65. padding: 10px 0 0 15px;
  66. }
  67. .news_bd li {
  68. height: 23px;
  69. }
  70. .lifesurvice {
  71. height: 208px;
  72. border: 1px solid #ccc;
  73. border-top: none;
  74. overflow: hidden;
  75. }
  76. .lifesurvice ul {
  77. width: 252px;
  78. }
  79. .lifesurvice li {
  80. position: relative;
  81. float: left;
  82. width: 62px;
  83. height: 70px;
  84. border-right: 1px solid #ccc;
  85. border-bottom: 1px solid #ccc
  86. }
  87. .lifesurvice li a{
  88. display: block;
  89. overflow: hidden;
  90. height: 100%;
  91. }
  92. .lifesurvice li p {
  93. text-align: center;
  94. }
  95. .service_ico {
  96. display: block;
  97. width: 24px;
  98. height: 24px;
  99. margin: 10px auto;
  100. background: url(../img/icons.png) no-repeat;
  101. }
  102. .service_ico_huafei {
  103. background-position: -17px -16px;
  104. }
  105. .service_ico_feiji {
  106. background-position: -78px -16px;
  107. }
  108. .hot {
  109. position: absolute;
  110. right: 0;
  111. top: 0;
  112. width: 12px;
  113. height: 15px;
  114. background: url(../img/jian.jpg) no-repeat;
  115. }
  116. .bargain {
  117. height: 75px;
  118. margin-top: 5px;
  119. }
  120. .recommand {
  121. height: 163px;
  122. background-color: pink;
  123. margin-top: 10px;
  124. }
  125. .recom-hd {
  126. width: 200px;
  127. height: 163px;
  128. text-align: center;
  129. background-color: #5c5251;
  130. }
  131. .recom-hd img {
  132. margin: 30px 0 10px 0;
  133. }
  134. .recom-hd h3 {
  135. font-size: 18px;
  136. color: #fff;
  137. font-weight: 400;
  138. }
  139. .recom-bd {
  140. width: 1000px;
  141. height: 163px;
  142. background-color: #ebebeb;
  143. }
  144. .recom-bd li {
  145. float: left;
  146. width: 249px;
  147. border-right: 1px solid #ccc;
  148. height: 145px;
  149. margin-top: 10px;
  150. background-color: pink;
  151. }
  152. .recom-bd .last {
  153. border-right: 0;
  154. }
  155. .recom-bd img {
  156. width: 100%;
  157. margin-top: -10px;
  158. }
  159. .box-hd {
  160. height: 30px;
  161. border-bottom: 2px solid #c81623;
  162. margin-top: 25px;
  163. }
  164. .box-hd h3 {
  165. float: left;
  166. font-size: 18px;
  167. color: #c81623;
  168. }
  169. .tab-list {
  170. float: right;
  171. line-height: 30px;
  172. }
  173. .tab-list li {
  174. float: left;
  175. }
  176. .tab-list li a {
  177. margin: 0 15px;
  178. }
  179. .box-bd {
  180. height: 360px;
  181. background-color: pink;
  182. }
  183. .w209 {
  184. width: 209px;
  185. background-color: #f9f9f9;
  186. }
  187. .w219 {
  188. width: 219px;
  189. border-right: 1px solid #ccc;
  190. }
  191. .w220 {
  192. width: 220px;
  193. border-right: 1px solid #ccc;
  194. }
  195. .w329 {
  196. width: 329px;
  197. }
  198. .tab-con li {
  199. float: left;
  200. height: 360px;
  201. }
  202. .tab-con-item {
  203. border-bottom: 1px solid #ccc;
  204. }
  205. .tab-con-list {
  206. overflow: hidden;
  207. margin-bottom: 15px;
  208. }
  209. .tab-con-list li {
  210. width: 86px;
  211. height: 32px;
  212. line-height: 32px;
  213. border-bottom: 1px solid #ccc;
  214. margin-left: 10px;
  215. text-align: center;
  216. }
  217. .fixetool {
  218. position: fixed;
  219. top: 200px;
  220. left: 50%;
  221. margin-left: -676px;
  222. width: 66px;
  223. background-color: #fff;
  224. cursor: pointer;
  225. }
  226. .fixetool li{
  227. height: 32px;
  228. line-height: 32px;
  229. text-align: center;
  230. font-size: 12px;
  231. border-bottom: 1px solid #ccc;
  232. }
  233. .fixetool .current {
  234. background-color: #c81623;
  235. color: #fff;
  236. }