好的，以下是一个简单的京东布局示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>京东布局</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #C8
1623;
color: #fff;
height: 50px;
line-height: 50px;
padding: 0 20px;
}
nav {
background-color: #F10215;
height: 40px;
padding: 0 20px;
display: flex;
align-items: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-grow: 1;
justify-content: space-between;
}
nav li {
margin-right: 20px;
font-size:
16px;
color: #fff;
cursor: pointer;
}
nav li:hover {
text-decoration: underline;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
background-color: #f5f5f5;
}
.product {
width: calc(25% - 20px);
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
overflow: hidden;
}
.product img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product .name {
padding: 10px;
font-size:
16px;
color: #333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.product .price {
padding: 10px;
font-size: 18px;
color: #C8
1623;
font-weight: bold;
}
</style>
</head>
<body>
<header>
欢迎来到京东！
</header>
<nav>
<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>
</ul>
<input type="text" placeholder="搜索">
<button>搜索</button>
</nav>
<main>
<div class="product">
<img src="https://img13.360buyimg.com/n1/jfs/t1/
167714/29/10153/1717
16/607a3c63E1f80f1c7/3ee3a11d3030a5b4.jpg" alt="">
<div class="name">Apple 苹果 iPhone 12 128GB 黑色 5G全网通手机</div>
<div class="price">￥7299</div>
</div>
<div class="product">
<img src="https://img14.360buyimg.com/n1/jfs/t1/174045/11/10991/247271/60b8d6a2E7c0d8b61/2a1a49fcbf24a5c9.jpg" alt="">
<div class="name">
华为 HUAWEI MateBook 13 2021款 2K高清屏 集成显卡 11代i5
16GB 512GB 独立双麦克风 轻薄金属版笔记本电脑 冰河银</div>
<div class="price">￥5999</div>
</div>
<div class="product">
<img src="https://img14.360buyimg.com/n1/jfs/t1/194865/8/1331/128070/60b44812Ed6d84e2b/cd2d8c9f3f8f0a1c.jpg" alt="">
<div class="name">小米电视 大师 65英寸 OLED画质 120Hz MEMC多区域全局背光系统 人工智能语音 家庭影院 电视机</div>
<div class="price">￥11999</div>
</div>
<div class="product">
<img src="https://img14.360buyimg.com/n1/jfs/t1/146474/28/2850/208408/5f1b5854E1f3bba5f/95c8c4b4f6a5e7d5.jpg" alt="">
<div class="name">惠普（HP）Pavilion Gaming 15-dk1000TX 15.6英寸游戏笔记本电脑（i5-10300H 8G 512GSSD GTX
1650Ti 4G独显 IPS 144Hz）</div>
<div class="price">￥6999</div>
</div>
<div class="product">
<img src="https://img13.360buyimg.com/n1/jfs/t1/172002/11/1482/197879/60b3f8b3Ef15f5d3b/c75d0d2cd5f7bae2.jpg" alt="">
<div class="name">海尔（Haier） BCD-509WDPG 509升 无霜多门冰箱</div>
<div class="price">￥4399</div>
</div>
<div class="product">
<img src="https://img13.360buyimg.com/n1/jfs/t1/131919/26/254/196647/5ec0c5b4E1da3b0f6/339d7cfe6a2b1af7.jpg" alt="">
<div class="name">
华为 HUAWEI MatePad Pro 10.8英寸平板电脑 麒麟990 2K屏幕 6GB+128GB（WiFi版）香槟金</div>
<div class="price">￥3499</div>
</div>
<div class="product">
<img src="https://img10.360buyimg.com/n1/jfs/t1/179751/38/10505/179703/60b8f0d6E6ce7f9f2/7d4a4d7b773d6f19.jpg" alt="">
<div class="name">
苏泊尔（SUPOR）电饭煲 高压 IH智能电饭锅 3L 4L 5L 6L 8L 多功能家用小电饭炊 5L车载式智能预约黑色 5L（含蒸锅）</div>
<div class="price">￥1199</div>
</div>
</main>
</body>
</html>
```
效果如下：
扫一扫
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
