京东页面的响应式布局
在京东自营商品页面搜索'京豆'，可以用它抵扣部分订单金额 #生活技巧# #节省生活成本# #购物优惠技巧# #比价应用#
<!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>
网址：京东页面的响应式布局 https://www.yuejiaxmz.com/news/view/1235140
相关内容
利用@media screen实现网页布局的自适应（响应式布局）【css】移动端响应式布局与响应式字体大小
京东智能总裁王振辉：智能购物时代京东的智慧布局
京东入局 餐饮外卖行业格局会否生变？
京东入局，千亿外卖市场新战事又起
智慧物流：京东分布式仓储体系
即时零售行业2024年十大热点！ 01 京东 系即时零售大整合5月16日， 达达集团 宣布业务全面融入 京东 生态，原即时零售品牌京东小时达、京东到家全面...
京东ME桌面版
京东为骑手交社保 本地生活格局再生变数
CSS+JavaScript实现页面不同布局的切换 « 张鑫旭
随便看看
最新动态分享
- 台江县革一镇：环境整治“对症下药” 描绘和谐美好村景
- 全民参与，源头治理！福强社区筑牢社区健康防线
- 整治农村十乱，守护美丽家园——大方县妇联开展农村家庭环境卫生清洁行动
- 绿色画卷丨山东“点绿成金”谱新篇
- 世净十周年：以洁净初心守品质本真，用创新之力开全球新篇
- “遵”行新风尚·文明我先行 | 乌江镇：深耕人居环境整治 绘就和美乡村新图景
- 农村大规模启动行动，这次覆盖三个领域，整治4个突出问题，每个村都涉及
- 石泉乡波斯菊盛放，点亮和谐美丽乡村
- 【两清两改两治理】务川：扎实推进“两清两改两治理”工作 建设和美乡村
- 【基层动态】敖其镇开展“精绣敖其新画卷 全民参与展新颜”人居环境整治活动
热点动态分享
- 28814
- 18314
- 7070
- 6821
- 6567
- 6098
- 5920
- 4945
- 4885
- 4834
