<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="font_jd/iconfont.css"> <style> * { padding: 0px; margin: 0px; list-style: none; box-sizing: border-box; } .box { width: 29.3125rem; height: 100vh; display: flex; flex-direction: column;
} header { height: 3.5625rem; /* */ display: flex; flex-direction: row; align-items: center; justify-content: space-around; }
section>.left { width: 6.75rem; overflow: auto; }
section>.left>ul>li { text-align: center; height: 3.75rem; line-height: 3.75rem; font-size: 1.125rem; color: black; background-color: #F8F8F8; }
section>.left li:hover { background-color: white; color: red; }
section { display: flex; flex: 1; overflow: auto; }
section>.right { overflow: auto; flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; box-sizing: border-box; /* flex-direction: column; */ }
section>.right>.title { display: flex; flex-direction: row; height: 3.125rem; width: 22.5625rem; box-sizing: border-box; justify-content: space-between; align-items: center; padding: 0rem ，.3125rem; box-sizing: border-box; }
section>.right>.title>p { font-size: 1.25rem; line-height: 3.125rem; font-weight: bold; }
section>.right>.title>.iconfont { color: red; }
section>.right>.title>i>span { color: black; }
section>.right>.content { width: 33%; box-sizing: border-box; height: 10rem; display: flex; flex-direction: column; justify-content: center; padding: .625rem; box-sizing: border-box; }
section>.right>.content p { font-size: .875rem; text-align: center; padding: .9375rem ，0rem; box-sizing: border-box; }
section>.right>.content img { width: 100%; }
/* 隱藏谷歌瀏覽器中的滾動條樣式 */ ::-webkit-scrollbar { display: none; }
@media screen and (orientation:portrait) { section>.right>.content { width: 24%; } }
header>.inconfont { font-size: 1.125rem; line-height: 1.875rem; }
header>i>a { text-decoration: none; text-align: center; padding-left: 1.25rem; box-sizing: border-box; }
header>i { width: 15%; }
header>.sec { width: 85%; position: relative; }
header>.sec>p { position: absolute; left: .625rem; top: .3125rem }
header>.sec>input { width: 20.625rem; height: 2.25rem; border-radius: .3125rem; }
input::placeholder { text-indent: 3.125rem; }
footer { height: 4.0625rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; }
footer>div>img { width: 100%; }
footer>div { width: 24%; background-color: #F8F8F8; }
footer>div:hover { background-color: white; color: red; } </style> </head>
<body> <div class="box"> <header> <i><a href="#" class="icon iconfont icon-fenxiang"></a></i>
<div class="sec"> <input type="search" placeholder="鍵鼠套裝"> <p class="icon iconfont icon-sousuo"></p> </div> </header> <section>
<div class="left"> <ul> <li>熱門推薦</li> <li>手機數位</li> <li>京東超市</li> <li>家用電器</li> <li>電腦辦公</li> <li>玩具樂器</li> <li>傢具廚具</li> <li>家居家裝</li> <li>男裝</li> <li>男鞋</li> <li>女裝</li> <li>女鞋</li> <li>美妝護膚</li> <li>醫葯保健</li> <li>酒水飲料</li> <li>運動戶外</li> <li>汽車生活</li> <li>禮品鮮花</li> <li>京東國際</li> <li>寵物生活</li> <li>二手商品</li> <li>拍賣</li> <li>箱包手袋</li> <li>鐘錶珠寶</li> <li>農資綠植</li> <li>生活旅行</li> <li>奢飾品</li> <li>計生情趣</li> <li>藝術郵市</li> <li>工藝品</li> </ul> </div> <div class="right">
<div class="title"> <p>熱門推薦</p> <i class="icon iconfont icon-paihangbang"> <span> 排行榜></span></i> </div>
<div class="content"> <img src="img/養生壺.jpg" alt=""> <p>養生壺 </p> </div> <div class="content"> <img src="img/咖啡機.jpg" alt=""> <p>咖啡機</p> </div> <div class="content"> <img src="img/多用途鍋.jpg" alt=""> <p>多用途鍋</p> </div> <div class="content"> <img src="img/微波爐.jpg" alt=""> <p>微波爐</p> </div> <div class="content"> <img src="img/料理機.jpg" alt=""> <p>料理機</p> </div> <div class="content"> <img src="img/榨汁機.jpg" alt=""> <p>榨汁機</p> </div> <div class="content"> <img src="img/熱水壺.jpg" alt=""> <p>熱水壺</p> </div> <div class="content"> <img src="img/煮蛋器.jpg" alt=""> <p>煮蛋器</p> </div> <div class="content"> <img src="img/電壓力鍋.jpg" alt=""> <p>電壓力鍋</p> </div> <div class="content"> <img src="img/電燉鍋.jpg" alt=""> <p>電燉鍋</p> </div> <div class="content"> <img src="img/電烤箱.jpg" alt=""> <p>電烤箱</p> </div> <div class="content"> <img src="img/電燒烤爐.jpg" alt=""> <p>電燒烤爐</p> </div> <div class="content"> <img src="img/電熱飯盒.jpg" alt=""> <p>電熱飯盒</p> </div> <div class="content"> <img src="img/電磁爐.jpg" alt=""> <p>電磁爐</p> </div> <div class="content"> <img src="img/電飯煲.jpg" alt=""> <p>電飯煲</p> </div>
<div class="content"> <img src="img/電餅鐺.jpg" alt=""> <p>電飯煲</p> </div>
<div class="content"> <img src="img/空氣炸鍋.jpg" alt=""> <p>空氣炸鍋</p> </div>
<div class="content"> <img src="img/豆漿機.jpg" alt=""> <p>豆漿機</p> </div>
<div class="content"> <img src="img/酸奶機.jpg" alt=""> <p>酸奶機</p> </div>
<div class="content"> <img src="img/麵包機.jpg" alt=""> <p>麵包機</p> </div>
<div class="content"> <img src="img/麵條機.jpg" alt=""> <p>麵條機</p> </div>
<div class="content"> <img src="img2/其他設備.jpg" alt=""> <p>其他設備</p> </div>
<div class="content"> <img src="img2/剃鬚刀.jpg" alt=""> <p>剃鬚刀</p> </div>
<div class="content"> <img src="img2/卷髮器.jpg" alt=""> <p>卷髮器</p> </div>
<div class="content"> <img src="img2/按摩器.jpg" alt=""> <p>按摩器</p> </div>
<div class="content"> <img src="img2/按摩椅.jpg" alt=""> <p>按摩椅</p> </div>
<div class="content"> <img src="img2/牙刷.jpg" alt=""> <p>牙刷</p> </div>
<div class="content"> <img src="img2/理髮器.jpg" alt=""> <p>理髮器</p> </div>
<div class="content"> <img src="img2/電吹風.png" alt=""> <p>電吹風</p> </div>
<div class="content"> <img src="img2/電子秤.jpg""> <p>電子秤</p> </div>
<div class=" content"> <img src="img2/美容器.jpg" alt=""> <p>美容器</p> </div>
<div class="content"> <img src="img2/脫毛器.jpg" alt=""> <p>脫毛器</p> </div>
<div class="content"> <img src="img2/足浴盆.jpg" alt=""> <p>足浴盆</p> </div>
</div> </section>
<footer> <div><img src="img/首頁.png" alt=""></div> <div><img src="img/京喜.png" alt=""></div> <div><img src="img/分類.png" alt=""></div> <div><img src="img/購物車.png" alt=""></div> <div><img src="img/未登錄.png" alt=""></div> </footer> </div> </body> <script> document.documentElement.style.fontSize = document.documentElement.clientWidth / 469 * 16 + "px"; </script>
</html>
