京东网页-J

最新推荐文章于 2024-01-12 09:36:39 发布

芜湖起飞咯

最新推荐文章于 2024-01-12 09:36:39 发布

阅读量207

点赞数

分类专栏：京东前端练习文章标签： html

本文链接：https://blog.csdn.net/weixin_52323984/article/details/111473203

版权

京东同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端练习

4 篇文章 0 订阅

订阅专栏

在这里插入图片描述

            </div>
            <div class="right">
               <ul>
                <li><a herf="#">你好，请登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li class="shu"></li>
                <li><a herf="#">我的订单</a></li>
                <li class="shu"></li>
                <li><a herf="#">我的京东</a>
                    <i class="fa fa-angle-down"></i>
                </li>
                <li class="shu"></li>
                <li><a herf="#">京东会员</a></li>
                <li class="shu"></li>
                <li><a herf="#">企业采购</a>
                    <i class="fa fa-angle-down"></i>
                </li>
                <li class="shu"></li>
                <li><a herf="#">客户服务</a>
                    <i class="fa fa-angle-down"></i>
                </li>
                <li class="shu"></li>
                <li><a herf="#">网站导航</a>
                    <i class="fa fa-angle-down"></i>
                </li>
                <li class="shu"></li>
                <li><a herf="#">手机京东</a></li>
                
               </ul>
             </div>
         </div>
    </div>  

    <!-- 以下是下部导航条 -->
    <div class="bottom">
        <div class="jz">
            <div class="logo"></div>
            <div class="search">
                <form action="">
                    <input type="text">
                    <span class="fa fa-camera fa-2x"></span>
                    <button> 
                        <i class="fa fa-search"></i>
                    </button>
                </form>
            </div>
            <div class="hotword">
                <ul>
                    <li><a href="#">爆款降千元</a></li>
                    <li><a href="#">国际大牌</a></li>
                    <li><a href="#">特价冰洗</a></li>
                    <li><a href="#">满千减百</a></li>
                    <li><a href="#">黑五感恩</a></li>
                    <li><a href="#">OLED电视</a></li>
                    <li><a href="#">热门微单</a></li>
                   
                </ul>
            </div>
            <div class="nav">
                
            </div>
        </div>
    </div>
</div>

<!-- --------------------以下是主页右边导航条部分----------------------------- -->

家用电器
手机 / 运营商 / 数码
电脑 / 办公
家居 / 家具 / 家装 / 厨具
男装 / 女装 / 童装 / 内衣
美妆 / 个人清洁 / 宠物
女鞋 / 箱包 / 钟表 / 珠宝
男鞋 / 运动 / 户外
房产 / 汽车 / 汽车用品
母婴 / 玩具乐器
食品 / 酒类 / 生鲜 / 特产

艺术 / 礼品鲜花 / 农资绿植

                </li>
            <li class="menu-item"><a href="#">医药保健 </a>
                <span class="font-a">/</span>
                <a href="#">计生情趣</a>
            </li>
            <li class="menu-item"><a href="#">图书 </a>
                <span class="font-a">/</span>
                <a href="#">文娱</a>
                <span class="font-a">/</span>
                <a href="#">教育</a>
            </li>
            <li class="menu-item"><a href="#">机票 </a>
                <span class="font-a">/</span>
                <a href="#">酒店</a>
                <span class="font-a">/</span>
                <a href="#">旅游</a>
            </li>
            <li class="menu-item"><a href="#">理财 </a>
                <span class="font-a">/</span>
                <a href="#">众筹</a>
            </li>
            <li class="menu-item"><a href="#">安装 </a>
                <span class="font-a">/</span>
                <a href="#">维修</a>
            </li>
               
        
            <li class="menu-item"><a href="#">工业品 </a></li>
        </ul>
    </div>
    <div class="zhong">
        <div class="zhong-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="zhong-you">
            <div class="goods1"></div>
            <div class="goods2"></div>
            <div class="goods3"></div>

        </div>
    </div> 


<!-- ------------------以下是最右边用户登录栏------------------------------------- -->
<div class="right1">
    <div class="user">
        <div class="user-top">
            <div class="head-img"></div>
            <div class="hello"><a href="#">Hi,欢迎登录京东</a></div>
            <div class="login"><a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a></div>
        </div>
        <div class="user-bottom">
            <div class="bot1">新人福利</div>
            <div class="bot2">PLUS会员</div>
        </div>
    </div>
    <div class="news">
        <ul>
            <li><a href="#"><span class="red">推荐</span>
                2019年度TWS真无线蓝牙耳机横评之选购指南
            </a></li>
            <li><a href="#"><span class="red">推荐</span>
                票友圈装优雅不叫真优雅，想要表里如一得这样
            <li><a href="#"><span class="red">热门</span>
                这是来自未来的手机，vivo NEX 3的多面评测
            </a></li>
            <li><a href="#"><span class="red">热门</span>
                冲奶粉不做这个动作，奶粉最贵都放浪费
            </a></li>
        </ul>
    </div>
    <div class="service"></div>
</div>