html实现京东网页
作者：互联网
html端
<!-- 顶部导航条用来居中的盒子 -->
<div class="juzhonghezi">
<!-- 左侧位置盒子 -->
<div class="left">
<!-- icon图标 -->
<i class="fa fa-map-marker"></i>
<span>江苏</span>
<!-- <a href="#">
</a> -->
</div>
<!-- 右侧信息盒子 -->
<div class="right">
</div>
<!-- 这是下部导航条 -->
<div class="bottom">
<div class="juzhonghezi">
<div class="logo"></div>
<div class="search">
<form action="">
<input type="text">
<span class="fa fa-camera"></span>
<button>
<i class="fa fa-search fa"></i>
</button>
</form>
</div>
<div class="hotwords">
<ul>
<li><a href="#" class="red1">百亿补贴</a></li>
<li><a href="#">VR一体机</a></li>
<li><a href="#">RTX3090</a></li>
<li><a href="#">PS5</a></li>
<li><a href="#">RYZEN5950X</a></li>
<li><a href="#">oled电视</a></li>
<li><a href="#">苹果12Pro</a></li>
</ul>
</div>
<div class="nav">
</div>
</div>
</div>
</div>
<!-- 下面是正文 -->
<div class="header1">
<div class="main1">
<div class="left1">
<ul class="menu">
<li class="menu-item">
<a href="#" class="font-a">家用电器</a>
</li>
<li class="menu-item">
<a href="#" class="font-a">手机</a>
<span class="font-a">/</span>
<a href="#" class="font-a">运营商</a>
<span class="font-a">/</span>
<a href="#" class="font-a">数码</a>
</li>
<li class="menu-item">
<a href="#" class="font-a">电脑</a>
<span class="font-a">/</span>
<a href="#" class="font-a">办公</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">家居</a>
<span class="font-a">/</span>
<a href="#" class="font-a">家具</a>
<span class="font-a">/</span>
<a href="#" class="font-a">家装</a>
<span class="font-a">/</span>
<a href="#" class="font-a">厨具</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">男装</a>
<span class="font-a">/</span>
<a href="#" class="font-a">女装</a>
<span class="font-a">/</span>
<a href="#" class="font-a">童装</a>
<span class="font-a">/</span>
<a href="#" class="font-a">内衣</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">美妆</a>
<span class="font-a">/</span>
<a href="#" class="font-a">个人清洁</a>
<span class="font-a">/</span>
<a href="#" class="font-a">宠物</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">女鞋</a>
<span class="font-a">/</span>
<a href="#" class="font-a">箱包</a>
<span class="font-a">/</span>
<a href="#" class="font-a">钟表</a>
<span class="font-a">/</span>
<a href="#" class="font-a">珠宝</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">男鞋</a>
<span class="font-a">/</span>
<a href="#" class="font-a">运动</a>
<span class="font-a">/</span>
<a href="#" class="font-a">户外</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">房产</a>
<span class="font-a">/</span>
<a href="#" class="font-a">汽车</a>
<span class="font-a">/</span>
<a href="#" class="font-a">汽车用品</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">母婴</a>
<span class="font-a">/</span>
<a href="#" class="font-a">玩具乐器</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">食品</a>
<span class="font-a">/</span>
<a href="#" class="font-a">酒类</a>
<span class="font-a">/</span>
<a href="#" class="font-a">生鲜</a>
<span class="font-a">/</span>
<a href="#" class="font-a">特产</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">艺术</a>
<span class="font-a">/</span>
<a href="#" class="font-a">礼品鲜花</a>
<span class="font-a">/</span>
<a href="#" class="font-a">农资绿植</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">医药保健</a>
<span class="font-a">/</span>
<a href="#" class="font-a">计生情趣</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">图书</a>
<span class="font-a">/</span>
<a href="#" class="font-a">文娱</a>
<span class="font-a">/</span>
<a href="#" class="font-a">教育</a>
<span class="font-a">/</span>
<a href="#" class="font-a">电子书</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">机票</a>
<span class="font-a">/</span>
<a href="#" class="font-a">酒店</a>
<span class="font-a">/</span>
<a href="#" class="font-a">旅游</a>
<span class="font-a">/</span>
<a href="#" class="font-a">生活</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">理财</a>
<span class="font-a">/</span>
<a href="#" class="font-a">众筹</a>
<span class="font-a">/</span>
<a href="#" class="font-a">白条</a>
<span class="font-a">/</span>
<a href="#" class="font-a">保险</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">安装</a>
<span class="font-a">/</span>
<a href="#" class="font-a">维修</a>
<span class="font-a">/</span>
<a href="#" class="font-a">清洗</a>
<span class="font-a">/</span>
<a href="#" class="font-a">二手</a>
</li>
<li class="menu-item">
<a class="font-a" href="#">工业品</a>
</li>
</ul>
</div>
<div class="center1">
<div class="center-left">
<div class="sider-list">
<div class="sider-item"></div>
<div class="sider-item"></div>
<div class="sider-item"></div>
<div class="sider-item"></div>
<div class="sider-item"></div>
<div class="sider-item"></div>
<div class="sider-item"></div>
<div class="sider-item"></div>
</div>
<div class="sider-left">
<i class="fa fa-chevron-left"></i>
</div>
<div class="sider-right">
<i class="fa fa-chevron-right"></i>
</div>
</div>
<div class="center-right">
<div class="goods top"></div>
<div class="goods"></div>
<div class="goods"></div>
</div>
</div>
<div class="right1">
<div class="user">
<div class="user-top">
<div class="head-img"></div>
<div class="hello">Hi~欢迎逛京东！</div>
<div class="login">
<li> <a href="#">登录</a>
<span > |</span>
<a href="#" >注册</a>
</li>
</div>
</div>
<div class="user-bottom">
<div class="hezi1">
新人福利
</div>
<div class="hezi2">
PLUS会员
</div>
</div>
</div>
<div class="news">
<ul>
<li>
<a href="#">
<span class="red1">推荐</span>
2019年度TWS真无线蓝牙耳机横评之选购指南
</a>
</li>
<li>
<a href="#">
<span class="red1">推荐</span>
票友圈装优雅不叫真优雅，想要表里如一得这样
</a>
</li>
<li>
<a href="#">
<span class="red1">热门</span>
这是来自未来的手机，vivo NEX 3的多面评测
</a>
</li>
<li>
<a href="#">
<span class="red1">热门</span>
冲奶粉不做这个动作，奶粉最贵都放浪费
</a>
</li>
</ul>
</div>
<div class="services"></div>
</div>
</div>
</div>
</body>
标签：网页,奶粉,热门,优雅,html,手机,京东 来源： https://blog.csdn.net/weixin_52323984/article/details/111472098