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>
  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值