1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>M商城</title> 6 <link rel="shortcut icon" type="image/x-icon" href="img/icon.ico"> 7 <link rel="stylesheet" href="css/reset.css"> 8 <link rel="stylesheet" href="css/ad.css"> 9 <link rel="stylesheet" href="css/topbar.css"> 10 <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css"> 11 <link rel="stylesheet" href="css/header.css"> 12 <link rel="stylesheet" href="css/nav.css"> 13 <link rel="stylesheet" href="css/star.css"> 14 <link rel="stylesheet" href="css/star.css"> 15 <link rel="stylesheet" href="css/main.css"> 16 </head> 17 <body> 18 <div class="ad"> 19 <a href="javascript:void(0)"></a> 20 <span>广告</span> 21 </div> 22 <div class="topbar"> 23 <div class="topbar-wrap"> 24 <div class="topbar-nav"> 25 <a href="javascript:void(0)">小米商城</a> 26 <span>|</span> 27 <a href="javascript:void(0)">MIUI</a> 28 <span>|</span> 29 <a href="javascript:void(0)">IoT</a> 30 <span>|</span> 31 <a href="javascript:void(0)">云服务</a> 32 <span>|</span> 33 <a href="javascript:void(0)">金融</a> 34 <span>|</span> 35 <a href="javascript:void(0)">有品</a> 36 <span>|</span> 37 <a href="javascript:void(0)">小爱开放平台</a> 38 <span>|</span> 39 <a href="javascript:void(0)">政企服务</a> 40 <span>|</span> 41 <a href="javascript:void(0)">Select Region</a> 42 </div> 43 <div class="topbar-cart"> 44 <a href="javascript:void(0)"> 45 <i class="fa fa-shopping-cart"></i> 46 购物车 47 <span>(0)</span> 48 </a> 49 <div class="topbar-cart-menu"> 50 <div class="topbar-cart-txt"> 51 <span>购物车中还没有商品，赶紧选购吧！</span> 52 </div> 53 </div> 54 </div> 55 <div class="topbar-info"> 56 <a href="javascript:void(0)">登录</a> 57 <span>|</span> 58 <a href="javascript:void(0)">注册</a> 59 <span>|</span> 60 <a href="javascript:void(0)">消息通知</a> 61 </div> 62 </div> 63 </div> 64 <div class="header"> 65 <div class="header-wrap"> 66 <h1 class="header-logo"> 67 <a href="javascript:void(0)"></a> 68 <span>小米官网</span> 69 </h1> 70 <h2 class="header-theme"> 71 <a href="javascript:void(0)"></a> 72 <span>出游季特惠</span> 73 </h2> 74 <ul class="header-nav"> 75 <li class="header-item"> 76 <a href="javascript:void(0)">小米手机</a> 77 <div class="header-item-child"> 78 <div class="header-item-child-wrap"> 79 <div class="goods"> 80 <h4 class="tag">新品</h4> 81 <img src="img/mix2s-320x220.png" alt=""> 82 <div class="info"> 83 <p class="title">小米MIX 2S</p> 84 <p class="price">3299元起</p> 85 </div> 86 </div> 87 <div class="goods"> 88 <h4 class="tag">新品</h4> 89 <img src="img/mix2s-320x220.png" alt=""> 90 <div class="info"> 91 <p class="title">小米MIX 2S</p> 92 <p class="price">3299元起</p> 93 </div> 94 </div> 95 <div class="goods"> 96 <h4 class="tag">新品</h4> 97 <img src="img/mix2s-320x220.png" alt=""> 98 <div class="info"> 99 <p class="title">小米MIX 2S</p> 100 <p class="price">3299元起</p> 101 </div> 102 </div> 103 <div class="goods"> 104 <h4 class="tag">新品</h4> 105 <img src="img/mix2s-320x220.png" alt=""> 106 <div class="info"> 107 <p class="title">小米MIX 2S</p> 108 <p class="price">3299元起</p> 109 </div> 110 </div> 111 <div class="goods"> 112 <h4 class="tag">新品</h4> 113 <img src="img/mix2s-320x220.png" alt=""> 114 <div class="info"> 115 <p class="title">小米MIX 2S</p> 116 <p class="price">3299元起</p> 117 </div> 118 </div> 119 <div class="goods"> 120 <h4 class="tag">新品</h4> 121 <img src="img/mix2s-320x220.png" alt=""> 122 <div class="info"> 123 <p class="title">小米MIX 2S</p> 124 <p class="price">3299元起</p> 125 </div> 126 </div> 127 </div> 128 </div> 129 </li> 130 <li class="header-item"> 131 <a href="javascript:void(0)">Redmi 红米</a> 132 <div></div> 133 </li> 134 <li class="header-item"> 135 <a href="javascript:void(0)">电视</a> 136 <div></div> 137 </li> 138 <li class="header-item"> 139 <a href="javascript:void(0)">笔记本</a> 140 <div></div> 141 </li> 142 <li class="header-item"> 143 <a href="javascript:void(0)">家电</a> 144 <div></div> 145 </li> 146 <li class="header-item"> 147 <a href="javascript:void(0)">路由器</a> 148 <div></div> 149 </li> 150 <li class="header-item"> 151 <a href="javascript:void(0)">智能硬件</a> 152 <div></div> 153 </li> 154 <li class="header-item"> 155 <a href="javascript:void(0)">服务</a> 156 <div></div> 157 </li> 158 <li class="header-item"> 159 <a href="javascript:void(0)">社区</a> 160 <div></div> 161 </li> 162 </ul> 163 <form action="" class="header-search"> 164 <input type="text"> 165 <div class="header-search-list"> 166 <a href="javascript:void(0)"> 167 <span>小米9</span> 168 <span>约有6件</span> 169 </a> 170 <a href="javascript:void(0)"> 171 <span>小米8</span> 172 <span>约有5件</span> 173 </a> 174 <a href="javascript:void(0)"> 175 <span>小米9</span> 176 <span>约有6件</span> 177 </a> 178 </div> 179 <div class="header-search-placeholder"> 180 <a href="javascript:void(0)">小米9 Pro 5G</a> 181 <a href="javascript:void(0)">Redmi Note 8</a> 182 </div> 183 <button type="submit"> 184 <i class="fa fa-search"></i> 185 </button> 186 </form> 187 </div> 188 </div> 189 <div class="nav"> 190 <div class="nav-wrap"> 191 <ul class="nav-list"> 192 <li class="nav-list-li"> 193 <a href="javascript:void" class="nav-list-a"> 194 <span>手机 电话卡</span> 195 <i class="fa fa-angle-right"></i> 196 </a> 197 <ul class="nav-list-details"> 198 <li class="nav-list-details-li"> 199 <ul> 200 <li> 201 <a href="javascript:void(0)"> 202 小米4A电视 40英寸 203 </a> 204 </li> 205 <li> 206 <a href="javascript:void(0)"> 207 小米4A电视 40英寸 208 </a> 209 </li> 210 <li> 211 <a href="javascript:void(0)"> 212 小米4A电视 40英寸 213 </a> 214 </li> 215 <li> 216 <a href="javascript:void(0)"> 217 小米4A电视 40英寸 218 </a> 219 </li> 220 <li> 221 <a href="javascript:void(0)"> 222 小米4A电视 40英寸 223 </a> 224 </li> 225 <li> 226 <a href="javascript:void(0)"> 227 小米4A电视 40英寸 228 </a> 229 </li> 230 </ul> 231 </li> 232 <li class="nav-list-details-li"> 233 <ul> 234 <li> 235 <a href="javascript:void(0)"> 236 小米4A电视 40英寸 237 </a> 238 </li> 239 <li> 240 <a href="javascript:void(0)"> 241 小米4A电视 40英寸 242 </a> 243 </li> 244 <li> 245 <a href="javascript:void(0)"> 246 小米4A电视 40英寸 247 </a> 248 </li> 249 <li> 250 <a href="javascript:void(0)"> 251 小米4A电视 40英寸 252 </a> 253 </li> 254 <li> 255 <a href="javascript:void(0)"> 256 小米4A电视 40英寸 257 </a> 258 </li> 259 <li> 260 <a href="javascript:void(0)"> 261 小米4A电视 40英寸 262 </a> 263 </li> 264 </ul> 265 </li> 266 267 268 </ul> 269 </li> 270 <li class="nav-list-li"> 271 <a href="javascript:void" class="nav-list-a"> 272 <span>电视 盒子</span> 273 <i class="fa fa-angle-right"></i> 274 </a> 275 <ul class="nav-list-details"> 276 <li class="nav-list-details-li"> 277 <ul> 278 <li> 279 <a href="javascript:void(0)"> 280 小米4A电视 40英寸 281 </a> 282 </li> 283 <li> 284 <a href="javascript:void(0)"> 285 小米4A电视 40英寸 286 </a> 287 </li> 288 <li> 289 <a href="javascript:void(0)"> 290 小米4A电视 40英寸 291 </a> 292 </li> 293 <li> 294 <a href="javascript:void(0)"> 295 小米4A电视 40英寸 296 </a> 297 </li> 298 <li> 299 <a href="javascript:void(0)"> 300 小米4A电视 40英寸 301 </a> 302 </li> 303 <li> 304 <a href="javascript:void(0)"> 305 小米4A电视 40英寸 306 </a> 307 </li> 308 </ul> 309 </li> 310 <li class="nav-list-details-li"> 311 <ul> 312 <li> 313 <a href="javascript:void(0)"> 314 小米4A电视 40英寸 315 </a> 316 </li> 317 <li> 318 <a href="javascript:void(0)"> 319 小米4A电视 40英寸 320 </a> 321 </li> 322 <li> 323 <a href="javascript:void(0)"> 324 小米4A电视 40英寸 325 </a> 326 </li> 327 <li> 328 <a href="javascript:void(0)"> 329 小米4A电视 40英寸 330 </a> 331 </li> 332 <li> 333 <a href="javascript:void(0)"> 334 小米4A电视 40英寸 335 </a> 336 </li> 337 <li> 338 <a href="javascript:void(0)"> 339 小米4A电视 40英寸 340 </a> 341 </li> 342 </ul> 343 </li> 344 345 </ul> 346 </li> 347 <li class="nav-list-li"> 348 <a href="javascript:void" class="nav-list-a"> 349 <span>笔记本 平板</span> 350 <i class="fa fa-angle-right"></i> 351 </a> 352 <ul class="nav-list-details"> 353 <li class="nav-list-details-li"> 354 <ul> 355 <li> 356 <a href="javascript:void(0)"> 357 小米4A电视 40英寸 358 </a> 359 </li> 360 <li> 361 <a href="javascript:void(0)"> 362 小米4A电视 40英寸 363 </a> 364 </li> 365 <li> 366 <a href="javascript:void(0)"> 367 小米4A电视 40英寸 368 </a> 369 </li> 370 <li> 371 <a href="javascript:void(0)"> 372 小米4A电视 40英寸 373 </a> 374 </li> 375 <li> 376 <a href="javascript:void(0)"> 377 小米4A电视 40英寸 378 </a> 379 </li> 380 <li> 381 <a href="javascript:void(0)"> 382 小米4A电视 40英寸 383 </a> 384 </li> 385 </ul> 386 </li> 387 <li class="nav-list-details-li"> 388 <ul> 389 <li> 390 <a href="javascript:void(0)"> 391 小米4A电视 40英寸 392 </a> 393 </li> 394 <li> 395 <a href="javascript:void(0)"> 396 小米4A电视 40英寸 397 </a> 398 </li> 399 <li> 400 <a href="javascript:void(0)"> 401 小米4A电视 40英寸 402 </a> 403 </li> 404 <li> 405 <a href="javascript:void(0)"> 406 小米4A电视 40英寸 407 </a> 408 </li> 409 <li> 410 <a href="javascript:void(0)"> 411 小米4A电视 40英寸 412 </a> 413 </li> 414 <li> 415 <a href="javascript:void(0)"> 416 小米4A电视 40英寸 417 </a> 418 </li> 419 </ul> 420 </li> 421 422 </ul> 423 </li> 424 </ul> 425 <div class="nav-slider"> 426 <a href="javascript:void(0)"> 427 <i class="left fa fa-angle-left"></i> 428 <i class="right fa fa-angle-right"></i> 429 <ul> 430 <li class="fa fa-circle"></li> 431 <li class="fa fa-circle-o"></li> 432 <li class="fa fa-circle-o"></li> 433 <li class="fa fa-circle-o"></li> 434 <li class="fa fa-circle-o"></li> 435 </ul> 436 </a> 437 </div> 438 </div> 439 </div> 440 <div class="star"> 441 <div class="star-wrap"> 442 <ul class="star-list"> 443 <li> 444 <a href="javascript:void(0)"> 445 <i class="fa fa-clock-o"></i> 446 <span>小米秒杀</span> 447 </a> 448 </li> 449 <li> 450 <a href="javascript:void(0)"> 451 <i class="fa fa-user-circle"></i> 452 <span>企业团购</span> 453 </a> 454 </li> 455 <li><a href=""><i class="fa fa-user-circle"></i><span>F码通道</span></a></li> 456 <li><a href=""><i class="fa fa-user-circle"></i><span>米粉卡</span></a></li> 457 <li><a href=""><i class="fa fa-user-circle"></i><span>以旧换新</span></a></li> 458 <li><a href=""><i class="fa fa-user-circle"></i><span>话费充值</span></a></li> 459 </ul> 460 <a href="javascript:void(0)" class="star-a"></a> 461 <a href="javascript:void(0)" class="star-a"></a> 462 <a href="javascript:void(0)" class="star-a"> 463 <img src="img/mi-316x170.jpg" alt=""> 464 </a> 465 </div> 466 </div> 467 <div class="main"> 468 <div class="main-wrap"> 469 <div class="main-part1"> 470 <div class="main-part1-head"> 471 <h3>家电</h3> 472 <ul> 473 <li>家居</li> 474 <li>电脑</li> 475 <li>电视影音</li> 476 <li>热门</li> 477 </ul> 478 </div> 479 <div class="main-part1-body"> 480 <ul class="main-part1-star"> 481 <li> 482 <a href="javascript:void(0)"></a> 483 </li> 484 <li> 485 <a href="javascript:void(0)"></a> 486 </li> 487 </ul> 488 <ul class="main-part1-normal"> 489 <li> 490 <h4>减 200 元</h4> 491 <img src="img/mix2s-320x220.png" alt=""> 492 <div class="info"> 493 <h5>小米10</h5> 494 <p>骁龙865/1亿像素相机</p> 495 <p>1499元 <span>1699元</span></p> 496 </div> 497 <div class="bottom"> 498 <p>手机很好用手机很好用手机很好用手机很好用</p> 499 <p>拍照效果不错！</p> 500 </div> 501 </li> 502 <li></li> 503 <li></li> 504 <li></li> 505 <li></li> 506 <li></li> 507 <li></li> 508 <li></li> 509 </ul> 510 </div> 511 </div> 512 </div> 513 </div> 514 <br> 515 <br> 516 <br> 517 <br> 518 <br> 519 <br> 520 <br> 521 <br> 522 <br> 523 <br> 524 </body> 525 </html>
1 .ad { 2 width: 100%; 3 min-width: 1226px; 4 background: url(../img/ad.jpg) no-repeat center 0; 5 /*height: 100%;*/ 6 } 7 .ad a { 8 display: block; 9 width: 100%; 10 height: 120px; 11 } 12 .ad span { 13 display: none; 14 }
1 .topbar { 2 width: 100%; 3 min-width: 1226px; 4 background-color: #333; 5 color: #b0b0b0; 6 } 7 8 9 10 .topbar-wrap { 11 width: 1226px; 12 margin: 0 auto; 13 } 14 .topbar-wrap:after { 15 content: ''; 16 display: block; 17 clear: both; 18 } 19 20 21 22 .topbar-nav { 23 /* 500px;*/ 24 float: left; 25 font: normal 12px/40px 'Arial'; 26 } 27 .topbar-nav a { 28 color: #b0b0b0; 29 } 30 .topbar-nav span { 31 color: #424242; 32 margin: 0 3px; 33 } 34 .topbar-nav a:hover { 35 color: #fff; 36 } 37 38 39 40 .topbar-cart { 41 width: 120px; 42 float: right; 43 font: normal 12px/40px 'Arial'; 44 background-color: #424242; 45 position: relative; 46 } 47 .topbar-cart:hover { 48 background-color: #fff; 49 } 50 .topbar-cart:hover a { 51 color: #ff6700; 52 } 53 .topbar-cart a { 54 color: #b0b0b0; 55 } 56 .topbar-cart i { 57 font-size: 20px; 58 margin: 0 5px 0 20px; 59 } 60 61 .topbar-cart-menu { 62 width: 316px; 63 background-color: #fff; 64 position: absolute; 65 z-index: 88888; 66 right: 0; 67 box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.25); 68 } 69 70 .topbar-cart-txt { 71 height: 0px; 72 text-align: center; 73 transition: .1s; 74 overflow: hidden; 75 box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.7); 76 } 77 .topbar-cart:hover .topbar-cart-txt { 78 height: 100px; 79 line-height: 100px; 80 } 81 82 83 84 .topbar-info { 85 width: 140px; 86 float: right; 87 font: normal 12px/40px 'Arial'; 88 } 89 .topbar-info a { 90 color: #b0b0b0; 91 } 92 .topbar-info span { 93 color: #424242; 94 margin: 3px; 95 } 96 .topbar-info a:hover { 97 color: #fff; 98 }
1 .header { 2 width: 100%; 3 min-width: 1226px; 4 background-color: #fff; 5 color: #333; 6 /*为header-item-child通过参考*/ 7 position: relative; 8 } 9 10 11 12 .header-wrap { 13 width: 1226px; 14 margin: 0 auto; 15 } 16 .header-wrap:after { 17 content: ''; 18 display: block; 19 clear: both; 20 } 21 22 23 24 .header-logo { 25 float: left; 26 margin-top: 22px; 27 } 28 .header-logo a { 29 display: block; 30 width: 55px; 31 height: 55px; 32 background: url('../img/logo.png'); 33 } 34 .header-logo span { 35 display: none; 36 } 37 38 39 40 .header-theme { 41 float: left; 42 margin-top: 17px; 43 margin-left: 10px; 44 } 45 .header-theme a { 46 display: block; 47 width: 163px; 48 height: 66px; 49 background: url('../img/theme-163x66.webp') no-repeat; 50 } 51 .header-theme span { 52 display: none; 53 } 54 55 56 57 .header-nav { 58 float: left; 59 font-size: 16px; 60 } 61 62 .header-item { 63 float: left; 64 height: 60px; 65 margin: 40px 10px 0; 66 } 67 .header-item:hover a { 68 color: #ff6700 69 } 70 71 .header-item-child { 72 /*参考系为header*/ 73 position: absolute; 74 z-index: 666; 75 left: 0; 76 top: 100px; 77 width: 100vw; 78 background-color: #fff; 79 min-width: 1226px; 80 height: 0px; 81 transition: .2s; 82 overflow: hidden; 83 } 84 .header-item:hover .header-item-child { 85 height: 260px; 86 box-shadow: 0 -1px rgba(0, 0, 0, 0.25), 0 5px 5px -3px rgba(0, 0, 0, 0.25); 87 } 88 89 .header-item-child-wrap { 90 width: 1226px; 91 height: 260px; 92 margin: 0 auto; 93 } 94 .header-item-child-wrap .goods { 95 width: 204px; 96 font-size: 14px; 97 font-weight: 400; 98 text-align: center; 99 float: left; 100 position: relative; 101 } 102 .header-item-child-wrap .tag { 103 width: 60px; 104 border: 1px solid #ff6700; 105 font-weight: inherit; 106 color: #ff6700; 107 position: absolute; 108 left: 72px; 109 top: 10px; 110 } 111 .header-item-child-wrap img { 112 height: 140px; 113 margin-top: 40px; 114 } 115 .header-item-child-wrap .goods:not(:last-child) img { 116 border-right: 1px solid #ddd; 117 } 118 .header-item-child-wrap .info { 119 margin-top: 20px; 120 } 121 .header-item-child-wrap .price { 122 color: #ff6700; 123 } 124 125 126 127 .header-search { 128 width: 295px; 129 float: right; 130 padding-top: 25px; 131 position: relative; 132 } 133 .header-search input { 134 width: 223px; 135 height: 48px; 136 padding: 0 10px; 137 font-size: 18px; 138 border: 1px solid #e0e0e0; 139 float: left; 140 } 141 .header-search input:focus { 142 border-color: #ff6700; 143 } 144 145 .header-search button { 146 width: 50px; 147 height: 50px; 148 border: 1px solid #e0e0e0; 149 border-left: none; 150 float: right; 151 } 152 .header-search button:hover { 153 background-color: #ff6700; 154 } 155 .header-search input:focus ~ button { 156 border-color: #ff6700; 157 } 158 159 .header-search i { 160 font-size: 20px; 161 color: rgba(0, 0, 0, 0.5); 162 } 163 .header-search button:hover i { 164 color: #fff; 165 } 166 167 168 169 .header-search-list { 170 position: absolute; 171 z-index: 666; 172 top: 75px; 173 border: 1px solid #ff6700; 174 border-top: none; 175 width: 243px; 176 background-color: #fff; 177 /*height: 300px; */ 178 display: none; 179 } 180 .header-search input:focus ~ .header-search-list { 181 display: block; 182 } 183 .header-search-list a { 184 display: block; 185 padding: 5px 10px; 186 } 187 .header-search-list a:hover { 188 background-color: #eee; 189 } 190 .header-search-list a span:last-child { 191 color: #bbb; 192 float: right; 193 } 194 195 196 .header-search-placeholder { 197 position: absolute; 198 top: 42px; 199 right: 60px; 200 font-size: 12px; 201 } 202 .header-search input:focus ~ .header-search-placeholder { 203 display: none; 204 } 205 .header-search-placeholder a { 206 color: #999; 207 float: right; 208 background-color: #eee; 209 margin-left: 10px; 210 padding: 0 5px; 211 } 212 .header-search-placeholder a:hover { 213 color: #fff; 214 background-color: #ff6700; 215 }
1 html, body, p, h1, h2, h3, h4, h5, h6, form, ul { 2 margin: 0; 3 padding: 0; 4 } 5 a { 6 color: #333; 7 text-decoration: none; 8 } 9 img { 10 border: none; 11 vertical-align: middle; 12 } 13 ul { 14 list-style: none; 15 } 16 i { 17 font-style: normal; 18 vertical-align: middle; 19 } 20 textarea { 21 resize: none; 22 } 23 select, input, textarea, button { 24 outline: none; 25 vertical-align: middle; 26 } 27 /*button { 28 -webkit-appearance: none; 29 } 30 */
1 .nav { 2 width: 100%; 3 min-width: 1226px; 4 background-color: #fff; 5 } 6 7 8 9 .nav-wrap { 10 width: 1226px; 11 height: 460px; 12 margin: 0 auto; 13 /*background: pink;*/ 14 } 15 16 17 18 .nav-list { 19 width: 234px; 20 height: 420px; 21 background-color: rgba(0, 0, 0, 0.6); 22 padding: 20px 0; 23 /*服务于nav-list-details*/ 24 position: absolute; 25 z-index: 333; 26 } 27 .nav-list-li { 28 font: 400 14px/42px 'Arial'; 29 } 30 .nav-list-a { 31 display: block; 32 padding-left: 30px; 33 color: #fff; 34 position: relative; 35 } 36 .nav-list-a:hover { 37 background-color: #ff6700; 38 } 39 .nav-list i { 40 position: absolute; 41 right: 20px; 42 top: 10px; 43 font-size: 20px; 44 } 45 46 47 48 .nav-list-details { 49 width: 992px; 50 /*height: 460px;*/ 51 display: none; 52 background-color: cyan; 53 /*参考nav-list*/ 54 position: absolute; 55 top: 0; 56 left: 234px; 57 } 58 .nav-list-li:hover .nav-list-details { 59 display: block; 60 } 61 62 .nav-list-details-li { 63 width: 248px; 64 height: 460px; 65 float: left; 66 } 67 .nav-list-details-li:nth-child(2n) { 68 background-color: #eee; 69 } 70 .nav-list-details-li:nth-child(2n - 1) { 71 background-color: #ddd; 72 } 73 74 .nav-list-details-li a { 75 display: block; 76 height: calc(460px / 6); 77 background: url(../img/TV4A-80x80.png) 20px no-repeat; 78 background-size: 40px; 79 padding-left: 80px; 80 font: normal 16px/calc(460px / 6) 'Arial'; 81 /*background-color: #ccc;*/ 82 } 83 84 85 86 .nav-slider { 87 width: 100%; 88 height: 100%; 89 background: url('../img/slider-2452x920.jpg'); 90 background-size: auto 100%; 91 92 position: relative; 93 } 94 .nav-slider-mask { 95 display: block; 96 width: 992px; 97 height: 100%; 98 background-color: rgba(0, 0, 0, 0); 99 position: absolute; 100 right: 0; 101 102 font-size: 60px; 103 color: #ccc; 104 } 105 106 .nav-slider-mask i { 107 padding: 0 5px; 108 } 109 .nav-slider-mask .left { 110 position: absolute; 111 top: 200px; 112 } 113 .nav-slider-mask .right { 114 position: absolute; 115 right: 0; 116 top: 200px; 117 } 118 .nav-slider-mask i:hover { 119 background-color: rgba(0, 0, 0, 0.5); 120 } 121 122 .nav-slider-mask ul { 123 font-size: 10px; 124 position: absolute; 125 bottom: 20px; 126 right: 50px; 127 letter-spacing: 5px; 128 }
1 .main { 2 width: 100%; 3 min-width: 1226px; 4 background-color: #ddd; 5 margin-top: 20px; 6 } 7 .main-wrap { 8 width: 1226px; 9 margin: 0 auto; 10 } 11 12 .main-part1-head { 13 font-size: 16px; 14 line-height: 60px; 15 } 16 .main-part1-head:after { 17 content: ''; 18 display: block; 19 clear: both; 20 } 21 .main-part1-head h3 { 22 float: left; 23 font-weight: 500; 24 letter-spacing: .1em; 25 } 26 .main-part1-head ul { 27 float: right; 28 } 29 .main-part1-head li { 30 float: right; 31 margin-left: 20px; 32 line-height: 20px; 33 margin-top: 20px; 34 } 35 .main-part1-head li:hover { 36 cursor: pointer; 37 border-bottom: 2px solid #ff6700; 38 color: #ff6700; 39 } 40 41 .main-part1-body:after { 42 content: ""; 43 display: block; 44 clear: both; 45 } 46 .main-part1-star { 47 float: left; 48 } 49 .main-part1-star li { 50 width: 234px; 51 transition: .2s; 52 } 53 .main-part1-star li:first-child { 54 margin-bottom: 20px; 55 } 56 .main-part1-star a { 57 display: block; 58 height: 300px; 59 background: url(../img/body-star-468x600.jpg) no-repeat; 60 background-size: auto 100%; 61 } 62 .main-part1-star li:hover { 63 transform: translateY(-1px); 64 box-shadow: 0 3px 20px -2px rgba(0, 0, 0, .7); 65 } 66 .main-part1-normal { 67 float: right; 68 width: 976px; 69 text-align: center; 70 } 71 .main-part1-normal li { 72 width: 234px; 73 height: 300px; 74 background-color: #fff; 75 float: left; 76 margin: 0 0 20px 10px; 77 transition: .2s; 78 } 79 .main-part1-normal li:hover { 80 transform: translateY(-1px); 81 box-shadow: 0 3px 20px -2px rgba(0, 0, 0, .7); 82 } 83 .main-part1-normal h4 { 84 color: #fff; 85 float: left; 86 padding: 0 3px; 87 line-height: 20px; 88 background-color: red; 89 font-size: 12px; 90 margin: 10px 0 0 calc((234px - 60px) / 2); 91 } 92 .main-part1-normal img { 93 display: block; 94 width: 200px; 95 padding: 10px 0 0; 96 margin: 20px auto; 97 } 98 .main-part1-normal .info { 99 line-height: 25px; 100 } 101 .main-part1-normal h5 { 102 font: 600 16px/25px 'Arial'; 103 } 104 .main-part1-normal span { 105 text-decoration: line-through; 106 color: #666; 107 } 108 .main-part1-normal li { 109 position: relative; 110 } 111 .main-part1-normal .bottom { 112 width: 234px; 113 114 background-color: orange; 115 position: absolute; 116 bottom: 0; 117 } 118 .main-part1-normal .bottom p { 119 text-align: left; 120 padding: 0 20px; 121 font-size: 12px; 122 text-indent: 2em; 123 } 124 .main-part1-normal .bottom { 125 height: 0; 126 padding: 0; 127 transition: .2s; 128 overflow: hidden; 129 } 130 .main-part1-normal li:hover .bottom { 131 height: 60px; 132 padding: 10px 0; 133 }
1 .star { 2 width: 100%; 3 min-width: 1226px; 4 margin-top: 20px; 5 } 6 .star-wrap { 7 width: 1226px; 8 margin: 0 auto; 9 } 10 .star-wrap:after { 11 content: ''; 12 display: block; 13 clear: both; 14 } 15 .star-list { 16 float: left; 17 width: 210px; 18 padding: 15px 12px; 19 background-color: #5f5750; 20 } 21 .star-list li { 22 float: left; 23 position: relative; 24 } 25 .star-list li:nth-child(1):after, 26 .star-list li:nth-child(2):after, 27 .star-list li:nth-child(3):after { 28 content: ''; 29 width: 50px; 30 height: 1px; 31 background-color: #665e57; 32 position: absolute; 33 left: 10px; 34 } 35 .star-list li:not(:nth-child(3n+1)):before { 36 content: ''; 37 width: 1px; 38 height: 50px; 39 background-color: #665e57; 40 position: absolute; 41 top: 10px; 42 } 43 .star-list li a { 44 display: block; 45 width: 50px; 46 height: 50px; 47 margin: 10px; 48 font-size: 12px; 49 color: #ddd; 50 text-align: center; 51 } 52 .star-list li i { 53 display: block; 54 font-size: 20px; 55 } 56 .star-list li span { 57 line-height: 25px; 58 } 59 .star-list li:hover a { 60 color: #fff; 61 } 62 .star-a { 63 display: block; 64 width: 316px; 65 height: 170px; 66 float: right; 67 } 68 .star-a:not(:nth-of-type(3)) { 69 margin-left: 15px; 70 background: url(../img/mi-316x170.jpg) no-repeat; 71 background-size: auto 170px; 72 } 73 .star-a img { 74 /* 100%;*/ 75 height: 100%; 76 } 77 .star-a { 78 transition: .2s; 79 } 80 .star-a:hover { 81 transform: translateY(-1px) scale(1.02); 82 box-shadow: 0 10px 30px -5px rgba(0, 0, 0, .7); 83 }