<!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>