1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>仿京东</title> 7 <style> 8 /*外框*/ 9 10 .div_mingr { 11 height: 30px; 12 margin: 0 auto; 13 width: 980px; 14 } 15 /*左边*/ 16 17 .div_left, 18 .div_cent_l, 19 .menu_cent_1 { 20 float: left; 21 } 22 /*中间*/ 23 24 .div_cent_l { 25 width: 190px; 26 height: 100%; 27 background-color: #0dfsd; 28 } 29 30 .div_cent_r { 31 height: 100%; 32 background-color: aqua; 33 } 34 /*右边*/ 35 36 .div_right, 37 .div_cent_r, 38 .menu_cent_r, 39 .menu_cent_2 { 40 float: right; 41 } 42 /* 用来清楚浮动*/ 43 44 .div_float { 45 clear: both; 46 } 47 /*<!--顶部 -->*/ 48 49 .div_top_1 { 50 line-height: 30px; 51 } 52 53 #div_0_1 a, 54 #div_0_2 a { 55 color: #999999; 56 line-height: 30px; 57 } 58 /*logo*/ 59 60 .div_logo, 61 .div_logo_0 { 62 height: 170px; 63 } 64 /*标志 logo*/ 65 66 .a_logo { 67 overflow: hidden; 68 display: block; 69 height: 170px; 70 /* 190px;*/ 71 background-image: url(img/logo.v2.png); 72 } 73 74 /*搜索 外框*/ 75 76 .form { 77 margin: 0, 70px, 0, 0; 78 left: 320px; 79 top: 25px; 80 width: 339px; 81 height: 35px; 82 border: 1px solid; 83 border-color: red; 84 } 85 86 /*搜索框*/ 87 .input_s { 88 margin: 0 auto; 89 float: left; 90 line-height: 30px; 91 width: 280px; 92 border-color: red; 93 border-right:white ; 94 } 95 96 .upload-bg{ 97 margin: 0 auto; 98 float: left; 99 width: 20px; 100 height: 20px; 101 background: url(img/sprite-photo-search.png) no-repeat; 102 cursor: pointer; 103 margin-top: 10px; 104 } 105 /*<!--搜索提示-->*/ 106 .ls a { 107 font: "微软雅黑"; 108 font-size: small; 109 color: #666666; 110 } 111 112 113 /*搜索按钮*/ 114 .button { 115 margin: 0 auto; 116 width: 35px; 117 height: 35px; 118 background: url(img/magnifier1211.png); 119 } 120 121 122 123 /*菜单*/ 124 .div_meun { 125 background-color: red; 126 height: 40px; 127 } 128 129 .menu_cent_1 { 130 width: 160px; 131 text-aling: ceter; 132 } 133 134 135 /*a 标签 */ 136 .a_red { 137 color: white; 138 line-height: 40px; 139 font-weight: bolder; 140 text-align: center; 141 } 142 143 #go { 144 margin-top: 70px; 145 width: 188px; 146 height: 33px; 147 background-color: #fff; 148 text-align: center; 149 line-height: 33px; 150 overflow: hidden; 151 position: relative; 152 z-index: 1; 153 float: left; 154 border: 1px solid #e3e4e5; 155 } 156 157 .menu_cent_2 { 158 margin-left: 80px; 159 } 160 161 #meun_1 { 162 margin: 0 auto; 163 width: 160px; 164 text-align: center; 165 } 166 /*中间内容 167 .cent_meun{ 168 980px; 169 }*/ 170 171 .left_big_meun { 172 float: left; 173 height: 310px; 174 width: 160px; 175 border: 1px solid; 176 border-color: #CCCCCC; 177 } 178 179 .span_menu { 180 width: 160px; 181 height: 50px; 182 border: 1px solid; 183 border-color: #CCCCCC; 184 } 185 186 .a_red_z { 187 margin: 0 auto; 188 font-size: 20px; 189 font-weight: bolder; 190 } 191 192 .a_red_let { 193 font-size: 15px; 194 } 195 /*菜单左边下方*/ 196 197 .cent_l_d { 198 clear: both; 199 margin-top: 30px; 200 width: 160px; 201 height: 36px; 202 border: 1px solid; 203 border-color: #CCCCCC; 204 background: #DDDDDD; 205 } 206 /*右边内容*/ 207 /*右边内容上方*/ 208 209 .div_cen_r_u { 210 /*background-color: grey;*/ 211 width: 800px; 212 height: 300px; 213 } 214 215 .div_cen_r_u_1 { 216 margin: auto; 217 } 218 219 #div_r_u { 220 margin-top: 20px; 221 border: 1px solid #DDDDDD; 222 border-top: 2px solid red; 223 width: 100%; 224 height: 200px; 225 } 226 227 .p_m { 228 padding-left: 45px; 229 } 230 231 hr { 232 width: 95%; 233 } 234 235 .td_1 { 236 color: #005EA7; 237 font-weight: bolder; 238 } 239 /*右边内容下方*/ 240 241 .div_cen_r_d { 242 background-color: ; 243 width: 800px; 244 height: 300px; 245 } 246 247 .cen_r_d_1 { 248 margin: 0 auto; 249 padding: 0; 250 border: 1px solid #D0D0D0; 251 height: 50px; 252 } 253 254 .r_d_2 { 255 float: left; 256 line-height: 20px; 257 margin: 0 auto; 258 } 259 260 .r_d_3 { 261 margin: 0 auto; 262 float: right; 263 line-height: 20px; 264 } 265 266 .a_33 { 267 margin-left: 10px; 268 color: blue; 269 } 270 /*<!-- 右边内容下方 产品图片-->*/ 271 272 .product { 273 274 width: 100%; 275 height: 750px; 276 } 277 278 .rp{ 279 width: 100%; 280 float: left; 281 } 282 .rp1{ 283 284 border: 1px solid red; 285 text-align: center; 286 float: left; 287 margin:5px 5px 5px 10px; 288 /*padding: 10px;*/ 289 } 290 291 .rp1 img{ 292 width: 150px; 293 height: 150px; 294 } 295 .rp1 input[type="text"]{ 296 width: 25px; 297 } 298 /*去除a 标签的下划线*/ 299 ul{ 300 list-style-type: none;/*除去ul标签前缀*/ 301 } 302 303 a { 304 text-decoration: none; 305 color: black; 306 } 307 </style> 308 309 </head> 310 311 <body style="margin: 0 auto"> 312 <!--顶部 --> 313 <div class="div_top" id="div_0" style="background-color: #DDDDDD;"> 314 <!--顶部 --> 315 <div class="div_mingr"> 316 <div class="div_top_1 div_left" id="div_0_1"> 317 <a>收藏本站</a> 318 </div> 319 <div class="div_top_1 div_right" id="div_0_2"> 320 <a href="" methods="">登陆</a> 321 <a href="">注册</a> 322 <a href="">我的订单</a> 323 <a href="">我的收藏</a> 324 <a href="">VIP会员俱乐部</a> 325 <a href="">客户服务</a> 326 <a href="">关注</a> 327 <a href="">手机版</a> 328 </div> 329 </div> 330 <div class="div_float"></div> 331 </div> 332 333 <!--logo--> 334 <div class="div_logo " id="div_1"> 335 <div class="div_mingr div_logo_0"> 336 <div class="div_mingr div_logo_0"> 337 <div class="div_left div_logo_1"> 338 <!-- logo 中间--> 339 <div class="div_cent_l"> 340 <!-- logo图片框--> 341 <a href="#" class="a_logo"></a> 342 </div> 343 <div style="float: right; height: 170px; 300px; margin-left:200px ;"> 344 <div style="height: 70px;"></div> 345 <div class="form"> 346 <!--搜索框 --> 347 <form action="#"> 348 <input type="text" name="" id="" value="水果" class="input_s" /> 349 <span class="upload-bg"></span> 350 <button class="button"></button> 351 </form> 352 353 </div> 354 <div class="ls"> 355 <a href="">热门搜索:</a> 356 <a href="">火龙果,电脑</a> 357 </div> 358 </div> 359 360 <!----> 361 </div> 362 <div class="div_right"> 363 <div id="go"> 364 <a href="#" name="">购物车 </a> 365 <a href="" style="color:red">2</a> 366 <a href="">件∇ </a> 367 </div> 368 <!--<input type="button" value="" />--> 369 </div> 370 </div> 371 <div class="div_float"></div> 372 </div> 373 <div class="div_float"></div> 374 </div> 375 376 <!--菜单 --> 377 <div class="div_meun " id="div_1"> 378 379 <!-- 菜单左边--> 380 <div class="div_mingr div_meun_0" id=""> 381 <!-- 左边 1--> 382 <div class="div_meun_1 div_left"> 383 <div class="menu_cent_1"> 384 <a href="#" class="a_red" id="meun_1">全部商品分类</a> 385 </div> 386 <div class="menu_cent_2"> 387 <a href="" class="a_red">首页</a> 388 <a href="" class="a_red">网上超市</a> 389 <a href="" class="a_red">水果超市</a> 390 <a href="" class="a_red">超级订餐</a> 391 <a href="" class="a_red">生活娱乐</a> 392 <a href="" class="a_red">研究院</a> 393 </div> 394 <div style="clear: both;"></div> 395 396 </div> 397 <!--右边--> 398 <div class="div_right"> 399 400 <a href="" class="a_red">研究院</a> 401 <a href="" class="a_red">开发组</a> 402 <a href="" class="a_red">论 坛</a> 403 404 </div> 405 </div> 406 <div class="div_float"></div> 407 </div> 408 409 <!--中间部分--> 410 <div class="cent_mingr"> 411 <div class="mingr cent_meun div_mingr"> 412 <div class="div_left"> 413 <!--左边菜单--> 414 <div class="left_big_meun"> 415 <div class="span_menu"> 416 <!--左边菜单 分类--> 417 <a href="#" class="a_red_z">家用电器</a> <br /> 418 <a href="" class="a_red_let">电冰箱</a> 419 <a href="" class="a_red_let">电冰箱</a> 420 <a href="" class="a_red_let">电冰箱</a> 421 </div> 422 <div class="span_menu"> 423 <!--左边菜单 分类--> 424 <a href="#" class="a_red_z">水果</a> <br /> 425 <a href="" class="a_red_let">香蕉</a> 426 <a href="" class="a_red_let">苹果</a> 427 <a href="" class="a_red_let">桃子</a> 428 </div> 429 <div class="span_menu"> 430 <!--左边菜单 分类--> 431 <a href="#" class="a_red_z">家用电器</a> <br /> 432 <a href="" class="a_red_let">电冰箱</a> 433 <a href="" class="a_red_let">电冰箱</a> 434 <a href="" class="a_red_let">电冰箱</a> 435 436 </div> 437 <div class="span_menu"> 438 <!--左边菜单 分类--> 439 <a href="#" class="a_red_z">家用电器</a> <br /> 440 <a href="" class="a_red_let">电冰箱</a> 441 <a href="" class="a_red_let">电冰箱</a> 442 <a href="" class="a_red_let">电冰箱</a> 443 </div> 444 <div class="span_menu"> 445 <!--左边菜单 分类--> 446 <a href="#" class="a_red_z">家用电器</a> <br /> 447 <a href="" class="a_red_let">电冰箱</a> 448 <a href="" class="a_red_let">电冰箱</a> 449 <a href="" class="a_red_let">电冰箱</a> 450 </div> 451 <div class="span_menu"> 452 <!--左边菜单 分类--> 453 <a href="#" class="a_red_z">水果</a> <br /> 454 <a href="" class="a_red_let">香蕉</a> 455 <a href="" class="a_red_let">苹果</a> 456 <a href="" class="a_red_let">桃子</a> 457 </div> 458 </div> 459 <div style=" 160px ; height: 15px; clear: both"> 460 461 </div> 462 <div class="cent_l_d"> 463 <!-- 左边下方--> 464 <p>热销排行榜</p> 465 </div> 466 <div style="border: 1px solid ;border-color:#ECECEC ;"> 467 <a href="">coneting</a> 468 </div> 469 470 </div> 471 472 <div class="div_right"> 473 <!--右边内容--> 474 <div class="div_cen_r_u"> 475 <!-- 右边内容上方--> 476 <div style="height: 30px;"></div> 477 <div class="div_cen_r_u_1"> 478 <a href="#">电脑</a> >> 479 <a href="">品牌</a>>> 480 <a href="#">联想</a>>> 481 </div> 482 <div id="div_r_u"> 483 <p>您已选择： 联想 </p> 484 <hr/> 485 <p class="p_m"> 486 <tr> 487 <a href=""> 488 <td class="td_1">材质：</td> 489 </a> 490 <a href=""> 491 <td> 工艺金属</td> 492 </a> 493 <a href=""> 494 <td> 工程塑料</td> 495 </a> 496 <a href=""> 497 <td> 红木</td> 498 </a> 499 </tr> 500 </p> 501 <hr /> 502 <p class="p_m"> 503 <tr> 504 <a href=""> 505 <td class="td_1">风格：</td> 506 </a> 507 <a href=""> 508 <td> 小清新</td> 509 </a> 510 <a href=""> 511 <td> 温情脉脉</td> 512 </a> 513 <a href=""> 514 <td> 创意</td> 515 </a> 516 </tr> 517 </p> 518 <hr /> 519 <p class="p_m"> 520 <tr> 521 <a href=""> 522 <td class="td_1">材质：</td> 523 </a> 524 <a href=""> 525 <td> 工艺金属</td> 526 </a> 527 <a href=""> 528 <td> 工程塑料</td> 529 </a> 530 <a href=""> 531 <td> 红木</td> 532 </a> 533 </tr> 534 </p> 535 536 </div> 537 <div> 538 <div style="70px;height: 20px; border: 1px solid #DDDDDD; margin: 0 auto; font-size:12px ; text-align: center;"> 539 <a href="">更多选项</a> 540 </div> 541 </div> 542 543 </div> 544 545 <!-- 右边内容下方--> 546 <div class="div_cen_r_d"> 547 <!-- 右边内容下方--> 548 <div class="cen_r_d_1"> 549 <div class="r_d_2"> 550 <p><span id="" style="margin-right: 25px;">排序:</span> 551 <a href="" class="a_33">价格</a> 552 <a href="" class="a_33">销量</a> 553 <a href="" class="a_33">最新</a> 554 </p> 555 </div> 556 <div class="r_d_3"> 557 <p> 558 <a href="" style="color:red">共XX件商品 1</a> 559 <a href="">/1685</a> <input type="button" name="" id="" value="<" /><input type="button" name="" id="" value=">" /></p> 560 </div> 561 </div> 562 <!--<div class="div_float"></div>--> 563 <!-- 右边内容下方 产品图片--> 564 <div class="product"> 565 <!--<div class="lp">--> 566 <ul class="rp"><!--小视窗--> 567 568 <li class="rp1"><a class="a1" href="#"><img src="img/11.jpg"><p>¥5999.00<br>Apple MacBook Air <br>13.3英寸笔记本电脑</p></a> 569 <input type="button" name="" id="" value="-" /> 570 <input type="text" value="1"/> 571 <input type="button" name="" id="" value="+" /> 572 </li> 573 <li class="rp1"><a class="a1" href="#"><img src="img/12.jpg"><p>¥6480.00<br>拯救者R720<br>联想电脑旗舰店</p></a> 574 <input type="button" name="" id="" value="-" /> 575 <input type="text" value="1"/> 576 <input type="button" name="" id="" value="+" /> 577 578 </li> 579 <li class="rp1"><a class="a1" href="#"><img src="img/13.jpg"><p>¥5999.00<br>惠普(HP)暗影精灵II代Pro 暗影红<br>15.6英寸游戏笔记本</p></a> 580 <input type="button" name="" id="" value="-" /> 581 <input type="text" value="1"/> 582 <input type="button" name="" id="" value="+" /> 583 </li> 584 <li class="rp1"><a class="a1" href="#"><img src="img/14.jpg"><p>¥3599.00<br>小米(MI) Air 12.5英寸<br>金属超轻薄笔记本电脑</p></a> 585 <input type="button" name="" id="" value="-" /> 586 <input type="text" value="1"/> 587 <input type="button" name="" id="" value="+" /> 588 </li> 589 590 </ul> 591 <ul class="rp"> 592 <li class="rp1"><a class="a1" href="#"><img src="img/15.jpg"><p>¥4199.00<br>宏碁（acer）小e E5<br>15.6英寸便携笔记本电脑</p></a> 593 <input type="button" name="" id="" value="-" /> 594 <input type="text" value="1"/> 595 <input type="button" name="" id="" value="+" /> 596 </li> 597 <li class="rp1"><a class="a1" href="#"><img src="img/13.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a> 598 <input type="button" name="" id="" value="-" /> 599 <input type="text" value="1"/> 600 <input type="button" name="" id="" value="+" /> 601 </li> 602 <li class="rp1"><a class="a1" href="#"><img src="img/12.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a> 603 <input type="button" name="" id="" value="-" /> 604 <input type="text" value="1"/> 605 <input type="button" name="" id="" value="+" /> 606 </li> 607 <li class="rp1"><a class="a1" href="#"><img src="img/11.jpg"><p>¥5999.00<br>拯救者R720<br>联想电脑旗舰店</p></a> 608 <input type="button" name="" id="" value="-" /> 609 <input type="text" value="1"/> 610 <input type="button" name="" id="" value="+" /> 611 </li> 612 </ul> 613 614 615 <!--</div>--> 616 617 </div> 618 </div> 619 620 621 </div> 622 623 </div> 624 <div class="div_float"></div> 625 626 </div> 627 </body> 628 629 </html>