HTML_CSS学习：尚硅谷——尚品汇

马龙强_2024-05-11 10:51

一、index.html

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>荣耀</title>
<!--    引入页签图标-->
    <link rel="shortcut icon" href="./HONOR%20.ico" type="image/x-icon">
<!--    引入重置样式-->
    <link rel="stylesheet" href="./css/reset.css">
<!--    引入样式-->
    <link rel="stylesheet" href="./css/index.css">

</head>
<body>
<!--    顶部导航条-->
    <div class="topbar">
<!--        版心-->
        <div class="container clearfix">
<!--            左侧的欢迎区-->
            <div class="welcome leftfix">
                <span class="hello">尚品汇欢迎您</span>
                <span>请</span>
                <a href="#" class="login">登录</a>
                <a href="#" class="register">免费注册</a>
            </div>
<!--            右侧导航区-->
            <div class="topbar-nav rightfix">
                <ul class="list clearfix">
                    <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="#">关注尚品汇</a></li>
                    <li><a href="#">合作招商</a></li>
                    <li><a href="#">商家后台</a></li>
                </ul>
            </div>
        </div>

    </div>
<!--    <div class="header">-->
<!--        <div class="container"></div>-->
<!--    </div>-->
<!--    头部-->
    <div class="header">
        <div class="container clearfix">
<!--            左侧logo区-->
            <div class="logo leftfix">
                <img src="./images/logo.png" alt="尚品汇">
            </div>

<!--            右侧搜索区-->
            <div class="search rightfix">
                <form action="#">
                    <input type="text">
                    <button></button>
                </form>
            </div>
        </div>
    </div>
<!--    主导航区-->
    <div class = "main-nav">
        <div class="container clearfix">
            <div class="all-types leftfix">全部商品分类</div>
            <ul class="main-nav-list leftfix clearfix">
                <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="#">plus会员</a></li>
                <li><a href="#">进口好物</a></li>
                <li><a href="#">品牌闪购</a></li>
                <li><a href="#">拍卖</a></li>
                <li><a href="#">五金店</a></li>
            </ul>
        </div>
    </div>
<!--    主内容区-->
    <div class = "main-content">
        <div class="container clearfix">
            <ul class="slide-nav leftfix">
                <li>
<!--                    一级菜单-->
                    <a href="#">手机/运营商/数码</a>
<!--                    二级菜单-->
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络资源</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">音像</a></dt>
                            <dd><a href="#">音乐</a></dd>
                            <dd><a href="#">影视</a></dd>
                            <dd><a href="#">教育音像</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">电脑/办公</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络资源</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">音像</a></dt>
                            <dd><a href="#">音乐</a></dd>
                            <dd><a href="#">影视</a></dd>
                            <dd><a href="#">教育音像</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">家居/家具/家装/厨具</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络资源</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">音像</a></dt>
                            <dd><a href="#">音乐</a></dd>
                            <dd><a href="#">影视</a></dd>
                            <dd><a href="#">教育音像</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">男装/女装/童装/内衣</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络资源</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">美妆/个护清洁/宠物</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">女鞋/箱包/钟表/珠宝</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络资源</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">男鞋/运动</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">汽车/汽车用品</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">母婴/玩具乐器</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络资源</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">音像</a></dt>
                            <dd><a href="#">音乐</a></dd>
                            <dd><a href="#">影视</a></dd>
                            <dd><a href="#">教育音像</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">食品/酒类/生鲜/特产</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">电子书刊</a></dt>
                            <dd><a href="#">电子书</a></dd>
                            <dd><a href="#">网络资源</a></dd>
                            <dd><a href="#">数字杂志</a></dd>
                            <dd><a href="#">多媒体图书</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">音像</a></dt>
                            <dd><a href="#">音乐</a></dd>
                            <dd><a href="#">影视</a></dd>
                            <dd><a href="#">教育音像</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                    </div>
                </li>
                <li><a href="#">艺术/礼品鲜花/农资绿植</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">经管励志</a></dt>
                            <dd><a href="#">经济</a></dd>
                            <dd><a href="#">金融与投资</a></dd>
                            <dd><a href="#">管理</a></dd>
                            <dd><a href="#">励志与成功</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">医药保健/计生情趣</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">图书/音像/电子书刊</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">人文社科</a></dt>
                            <dd><a href="#">历史</a></dd>
                            <dd><a href="#">哲学</a></dd>
                            <dd><a href="#">国学</a></dd>
                            <dd><a href="#">政治/军事</a></dd>
                            <dd><a href="#">法律</a></dd>
                            <dd><a href="#">人文社科</a></dd>
                            <dd><a href="#">心理学</a></dd>
                            <dd><a href="#">文化</a></dd>
                            <dd><a href="#">社会科学</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">机票/旅行/充值/生活</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">众筹/白条/保险</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">生活</a></dt>
                            <dd><a href="#">健康与保健</a></dd>
                            <dd><a href="#">家庭与育儿</a></dd>
                            <dd><a href="#">旅游</a></dd>
                            <dd><a href="#">烹饪美食</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">科技</a></dt>
                            <dd><a href="#">工业技术</a></dd>
                            <dd><a href="#">科普读物</a></dd>
                            <dd><a href="#">建筑</a></dd>
                            <dd><a href="#">医学</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">计算机与互联网</a></dd>
                            <dd><a href="#">电子通信</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>
                <li><a href="#">安装/维修/清洗/二手</a>
                    <div class="second-menu">
                        <dl class="clearfix">
                            <dt><a href="#">英文原版</a></dt>
                            <dd><a href="#">少儿</a></dd>
                            <dd><a href="#">商务投资</a></dd>
                            <dd><a href="#">英语学习考试</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">励志</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">文艺</a></dt>
                            <dd><a href="#">小说</a></dd>
                            <dd><a href="#">文学</a></dd>
                            <dd><a href="#">青春文学</a></dd>
                            <dd><a href="#">传记</a></dd>
                            <dd><a href="#">艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">少儿</a></dt>
                            <dd><a href="#">胎教</a></dd>
                            <dd><a href="#">0-2岁</a></dd>
                            <dd><a href="#">3-6岁</a></dd>
                            <dd><a href="#">7-10岁</a></dd>
                            <dd><a href="#">11-14岁</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">教育</a></dt>
                            <dd><a href="#">中小学教辅</a></dd>
                            <dd><a href="#">教育和考试</a></dd>
                            <dd><a href="#">外语学习</a></dd>
                            <dd><a href="#">大中专教材</a></dd>
                            <dd><a href="#">科学与自然</a></dd>
                            <dd><a href="#">字典词典</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">艺术与收藏</a></dt>
                            <dd><a href="#">经济管理</a></dd>
                            <dd><a href="#">文化与艺术</a></dd>
                        </dl>
                        <dl class="clearfix">
                            <dt><a href="#">其他</a></dt>
                            <dd><a href="#">工具书</a></dd>
                            <dd><a href="#">杂志期刊</a></dd>
                            <dd><a href="#">套装书</a></dd>
                            <dd><a href="#">打折图书</a></dd>
                        </dl>

                    </div>
                </li>

            </ul>
            <div class="banner leftfix">
                <img src="./images/banner主图.png" alt="">
            </div>
            <div class="slide-other leftfix">
                <div class="message">
                    <div class="title clearfix">
                        <span class="leftfix">尚品快报</span>
                        <a href="#" class="rightfix">更多&nbsp;&gt</a>
                    </div>
                    <ul class="msg-list">
                        <li><a href="#">【公告】尚品汇官网正式上线</a></li>
                        <li><a href="#">【公告】尚品汇官网正式上线</a></li>
                        <li><a href="#">【公告】尚品汇官网正式上线</a></li>
                        <li><a href="#">【公告】尚品汇官网正式上线</a></li>

                    </ul>
                </div>
                <div class="other-nav">
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>话费</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>火车票</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>加油卡</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>白条</span>
                        </li>
                    </ul>
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>电影票</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>酒店</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>理财</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>机票</span>
                        </li>
                    </ul>
                    <ul class="other-nav-list clearfix">
                        <li>
                            <div class="picture"></div>
                            <span>礼品卡</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>彩票</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>游戏</span>
                        </li>
                        <li>
                            <div class="picture"></div>
                            <span>众筹</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<!--    秒杀-->
    <div class="seckill">
        <div class="container clearfix">
            <img src="./images/seckill.png" alt="秒杀">
            <img src="./images/banner1.png" alt="秒杀1">
            <img src="./images/banner2.png" alt="秒杀2">
            <img src="./images/banner3.png" alt="秒杀3">
            <img src="./images/baner4.png" alt="秒杀4">

        </div>
    </div>
<!--    楼层-->
    <div class="floor">
        <div class="container">
<!--            上部分-->
            <div class="floor-nav clearfix">
                <span class="floor-name leftfix">家用电器</span>
                <ul class="floor-nav-list rightfix clearfix">
                    <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="#">空气/净水</a></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
<!--            下部分-->
            <div class="floor-info clearfix">
                <div class="item item1">
                    <ul class="item1-list clearfix">
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">4K电视</a></li>
                        <li><a href="#">空气净化器</a></li>
                        <li><a href="#">IH电饭煲</a></li>
                        <li><a href="#">滚筒洗衣机</a></li>
                        <li><a href="#">电热水器</a></li>
                    </ul>
                    <img src="./images/编组.png" alt="广告图">
                </div>
                <div class="item item2">
                    <img src="./images/appliance_banner07.png" alt="广告图1">
                </div>
                <div class="item item3">
                    <img src="./images/微波炉.png" alt="广告图2">
                    <img src="./images/空气炸锅.png" alt="广告图3">
                </div>
                <div class="item item4">
                    <img src="./images/冰箱.png" alt="广告图4">
                </div>
                <div class="item item5">
                    <img src="./images/电饭煲.png" alt="广告图5">
                    <img src="./images/电饭煲2.png" alt="广告图6">
                </div>
            </div>
        </div>
    </div>
<!--    楼层-->
    <div class="floor">
        <div class="container">
<!--            上部分-->
            <div class="floor-nav clearfix">
                <span class="floor-name leftfix">家用电器</span>
                <ul class="floor-nav-list rightfix clearfix">
                    <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="#">空气/净水</a></li>
                    <li><a href="#">高端电器</a></li>
                </ul>
            </div>
<!--            下部分-->
            <div class="floor-info clearfix">
                <div class="item item1">
                    <ul class="item1-list clearfix">
                        <li><a href="#">节能补贴</a></li>
                        <li><a href="#">4K电视</a></li>
                        <li><a href="#">空气净化器</a></li>
                        <li><a href="#">IH电饭煲</a></li>
                        <li><a href="#">滚筒洗衣机</a></li>
                        <li><a href="#">电热水器</a></li>
                    </ul>
                    <img src="./images/编组.png" alt="广告图">
                </div>
                <div class="item item2">
                    <img src="./images/appliance_banner07.png" alt="广告图1">
                </div>
                <div class="item item3">
                    <img src="./images/微波炉.png" alt="广告图2">
                    <img src="./images/空气炸锅.png" alt="广告图3">
                </div>
                <div class="item item4">
                    <img src="./images/冰箱.png" alt="广告图4">
                </div>
                <div class="item item5">
                    <img src="./images/电饭煲.png" alt="广告图5">
                    <img src="./images/电饭煲2.png" alt="广告图6">
                </div>
            </div>
        </div>
    </div>
<!--    <div style="height: 2000px"></div>-->
<!--    页脚-->
    <div class="footer">
        <div class="container">
<!--            顶部链接-->
            <div class="top-links clearfix">
                <ul class="links-list">
                    <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="#">大家电</a></li>
                    <li><a href="#">联系客服</a></li>
                </ul>
                <ul class="links-list">
                    <li><a href="#">配送方式</a></li>
                    <li><a href="#">上门自提</a></li>
                    <li><a href="#">211限时达</a></li>
                    <li><a href="#">配送服务查询</a></li>
                    <li><a href="#">配送费收取标准</a></li>
                </ul>
                <ul class="links-list">
                    <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>
                </ul>
                <ul class="links-list">
                    <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="#">取消订单</a></li>
                </ul>
                <ul class="links-list">
                    <li><a href="#">特色服务</a></li>
                    <li><a href="#">夺宝岛</a></li>
                    <li><a href="#">DIY装机</a></li>
                    <li><a href="#">延保服务</a></li>
                    <li><a href="#">京东E卡</a></li>
                    <li><a href="#">京东通信</a></li>
                    <li><a href="#">鲸鱼坐智能</a></li>
                </ul>
                <ul class="links-list">
                    <li><a href="#">自营覆盖区县</a></li>
                    <li><a href="#">京东尚品汇已向全国2661个区县提供自营配送、支持货到付款、POS机刷卡和售后上门服务</a></li>
                    <li><a href="#">查看详情</a></li>
                </ul>

            </div>
<!--            分割线-->
            <div class="line"></div>
<!--            底部链接-->
            <div class="bottom-links">
                <ul class="bottom-links-list clearfix">
                    <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="#">营销中心</a></li>
                    <li><a href="#">手机京东</a></li>
                    <li><a href="#">友情链接</a></li>
                    <li><a href="#">销售联盟</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
                <div class="copyright">
                    <p>京ICP备15033511号-3 京公网安备11010802020134号 京ICP证110507号</p>
                    <p>Copyright © 2004-2019 京东JD.com 版权所有</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

二、index.css

html 复制代码 
/*基础设置*/
.container{
    width: 1190px;
    margin: 0 auto;
}
/*顶部导航条start*/

.topbar{
    height: 30px;
    background-color: #ececec;
}
.welcome{
    height: 30px;
    line-height: 30px;
    font-size: 0;
    color: #666666;
}
.welcome span,.welcome a{
    font-size: 12px;
}
.welcome .hello{
    margin-right: 28px;
}
.welcome .login{
    padding-right: 10px;
    border-right: 1px solid #666;

}
.welcome .register{
    padding-left: 10px;

}
.topbar-nav .list{
    height: 30px;
    line-height: 30px;
}
.topbar-nav .list li{
    float: left;

}
.topbar-nav .list li a{
    padding: 0 15px;
    border-right: 1px solid #666;
}

.topbar-nav .list li:first-child a{
    padding-left: 0;
}
.topbar-nav .list li:last-child a{
    padding-right: 0;
    border: 0;
}

.header{
    height: 120px;
}
.header .search form{
    margin-top: 42px;
    font-size: 0;
}
.header .search input{
    width: 508px;
    height: 34px;
    border: 1px solid #DD302D;

}
.header .search button{
    width: 80px;
    height: 36px;
    background-color: #DD302D;
    vertical-align: top;
    background-image: url("../images/serch_icon.png");
    background-repeat: no-repeat;
    background-position: 28px 6px;
}

/*顶部导航条end*/
/*主导航页*/
.main-nav{
    height: 48px;
    border-bottom: 1px solid #DD302D;
}
.main-nav .all-types{
    width: 190px;
    height: 48px;
    line-height: 48px;
    background-color: #DD302D;
    color: white;
    text-align: center;
    font-size: 16px;
}
.main-nav-list{
    height: 48px;
    line-height: 48px;
}
.main-nav-list li{
    float: left;
    margin: 0 10px;
    font-size: 16px;
}
.main-content{
    margin-top: 10px;
}
.main-content .slide-nav{
    width: 190px;
    height: 458px;
    background-color: #F4F4F4;
    position: relative;
}
.main-content .slide-nav li{
    font-size: 14px;
    height: 28px;
    line-height: 28px;
    padding-left: 16px;


}
.main-content .slide-nav li:hover{
    background-color: #DD302D;

}
.main-content .slide-nav li:hover>a{
    color: white;
}
.second-menu{
    width: 680px;
    height: 458px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 190px;
    padding-left: 20px;
    display: none;

}
.main-content .slide-nav li:hover .second-menu{
    display: block;
}
.slide-nav .second-menu dl{
    height: 36px;
    line-height: 36px;
}
.slide-nav .second-menu dl:first-child{
    margin-top: 10px;
}
.slide-nav .second-menu dt{
    float: left;
    width: 70px;
    font-weight: bold;
    margin-right: 10px;
}
.slide-nav .second-menu dd{
    float: left;
}
.slide-nav .second-menu dd a{
    padding: 0 10px;
    border-left: 1px solid #666;
}




.main-content .banner{
    width: 690px;
    height: 458px;
    background-color: #c0a3d2;
    margin: 0 10px;
}

.main-content .slide-other{
    width: 290px;
    height: 458px;
    /*background-color: #cfe7a6;*/
}
.main-content .slide-other .message{
    width: 260px;
    height: 156px;
    padding: 0 14px;
    border: 1px solid #d9d9d9;

}
.main-content .slide-other .message .title{
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #d9d9d9;
}
.main-content .slide-other .message .title span{
    font-size: 14px;
}
.main-content .slide-other .message .title a{
    font-size: 12px;
}
.main-content .slide-other .msg-list li{
    height: 26px;
    line-height: 26px;
    padding: 1px;
}



.main-content .slide-other .other-nav{
    margin-top: 10px;
    width: 290px;
    height: 290px;
    /*background-color: gray;*/
    overflow: hidden;
}
.main-content .slide-other .other-nav-list:first-child{
    margin-top: 16px;
}
.main-content .slide-other .other-nav-list:nth-child(2){
    margin: 17px 0;
}


.main-content .slide-other .other-nav-list li{
    width: 48px;
    height: 70px;
    /*background-color: #bfd3db;*/
    float: left;
    margin: 0 11px;
    text-align: center;
    cursor: pointer;
}
.main-content .slide-other .other-nav-list li:first-child{
    margin-left: 16px;
}
.main-content .slide-other .other-nav-list .picture{
    width: 48px;
    height: 48px;
    background-image: url("../images/精灵图-侧边功能.png");
}
.main-content .slide-other .other-nav-list:nth-child(1) li:nth-child(1) .picture{
    background-position: 0 0;
}
.main-content .slide-other .other-nav-list:nth-child(1) li:nth-child(2) .picture{
    background-position: -48px 0;
}
.main-content .slide-other .other-nav-list:nth-child(1) li:nth-child(3) .picture{
    background-position: -96px 0;
}
.main-content .slide-other .other-nav-list:nth-child(1) li:nth-child(4) .picture{
    background-position: -144px 0;
}
.main-content .slide-other .other-nav-list:nth-child(2) li:nth-child(1) .picture{
    background-position: 0 -48px;
}
.main-content .slide-other .other-nav-list:nth-child(2) li:nth-child(2) .picture{
    background-position: -48px -48px;
}
.main-content .slide-other .other-nav-list:nth-child(2) li:nth-child(3) .picture{
    background-position: -96px -48px;
}
.main-content .slide-other .other-nav-list:nth-child(2) li:nth-child(4) .picture{
    background-position: -144px -48px;
}
.main-content .slide-other .other-nav-list:nth-child(3) li:nth-child(1) .picture{
    background-position: 0 -96px;
}
.main-content .slide-other .other-nav-list:nth-child(3) li:nth-child(2) .picture{
    background-position: -48px -96px;
}
.main-content .slide-other .other-nav-list:nth-child(3) li:nth-child(3) .picture{
    background-position: -96px -96px;
}
.main-content .slide-other .other-nav-list:nth-child(3) li:nth-child(4) .picture{
    background-position: -144px -96px;
}
/*秒杀区*/
.seckill{
    margin-top: 10px;
}
.seckill img{
    float: left;
    margin-right: 11px;
    cursor: pointer;

}
.seckill img:last-child{
    margin-right: 0;
}

/*楼层区*/
.floor {
    margin-top: 48px;
}
.floor-name {
    font-size: 20px;
}
.floor-nav {
    height: 30px;
    line-height: 30px;
    padding-bottom: 4px;
    border-bottom: 2px solid #DD302D;
}
.floor-nav-list li {
    float: left;
    font-size: 14px;
}
.floor-nav-list li a{
    padding: 0 10px;
    border-right: 1px solid #666;
}
.floor-nav-list li:first-child a{
    padding-left: 0;
}
.floor-nav-list li:last-child a{
    border-right: 0;
    border: 0;
}
.floor-info .item{
    float: left;
}
.floor-info .item1{
    width: 190px;
    height: 392px;
    background-color: #f4f4f4;
    padding: 20px;
}
.item1-list {
    margin-bottom: 29px;
}
.item1-list li{
    width: 90px;
    height: 22px;
    padding-bottom: 3.5px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
    text-align: center;
    /*float: left;*/

}

.item1-list li:nth-child(2n-1){
    float: left;
}
.item1-list li:nth-child(2n){
    float: right;
}
.item1-list li:nth-child(3),
.item1-list li:nth-child(4) {
    margin: 14.4px 0;
}

.floor-info .item2{
    width: 340px;
    height: 432px;
}
.floor-info .item3,
.floor-info .item4,
.floor-info .item5 {
    width: 206px;
    height: 432px;
}
.floor-info .item3 img,
.floor-info .item4 img,
.floor-info .item5 img {
    border-bottom: 1px solid #e2e2e2;
}

.floor-info .item3,
.floor-info .item4 {
    border-right: 1px solid #e2e2e2;
}

/*页脚*/
.footer{
    margin-top: 48px;
    height: 440px;
    background-color: #483e3e;
}
.links-list {
    float: left;
    width: 190px;
    height: 176px;
    margin-top: 48px;
    margin-right: 10px;
}
.links-list:last-child{
    margin-right: 0;
}
.links-list a{
    color: white;
    font-size: 14px;
}
.line{
    margin-top: 22px;
    height: 1px;
    background-color: #584d4d;
}
.bottom-links{
    text-align: center;
    margin-top: 47px;
}
.bottom-links-list{
    display: inline-block;
}
/*.bottom-links-list{*/
/*    width: 900px;*/
/*    margin: 0 auto;*/
/*}*/
.bottom-links-list li{
    float: left;
}
.bottom-links-list li a{
    padding: 0 26px;
    border-right: 1px solid white;
    color: white;
}
.bottom-links-list li:first-child a{
    padding-left: 0;
}
.bottom-links-list li:last-child a{
    border-right: 0;
    border: 0;
}
.copyright{
    margin-top: 10px;
    color: white;
}

三、reset.css

html 复制代码 
/* 基础设置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{
    margin: 0;
    padding: 0;
}

ul,ol {
    list-style: none;
}

img {
    /* 底部留白 */
    display: block;
	border:0;
}

b,strong {
    font-weight: 400;
}

h1,h2,h3,h4,h5,h6 {
    /* 父元素字号的百分比 */
    font-size: 100%;
    font-weight: normal;
}

i,em {
    /* 不倾斜 */
    font-style: normal;
}

u,ins,s,del {
    /* 去掉中划线和下划线 */
    text-decoration: none;
}

table {
    border: 1px solid #999;
    /* 相当于是cellspacing */
    border-spacing: 0;
    /* 1px边框 */
    border-collapse: collapse;
}

td,th {
    border: 1px solid #999;
}

input,button {
    /* 去掉轮廓线 */
    outline: none;
    border:none;
}

/* 风格设置 */
body {
    font: 12px/1.5 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    color: #333;
}

a {
    text-decoration: none;
    color: #666;
}

a:hover {
    color:#DD302D;
    text-decoration: none;
}

.leftfix {
    float: left;
}

.rightfix {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

四、显示结果

相关推荐
biter00881 小时前
opencv(15) OpenCV背景减除器（Background Subtractors）学习
人工智能·opencv·学习
学代码的小前端2 小时前
0基础学前端-----CSS DAY9
前端·css
Code哈哈笑2 小时前
【Java 学习】深度剖析Java多态：从向上转型到向下转型，解锁动态绑定的奥秘，让代码更优雅灵活
java·开发语言·学习
m0_748248943 小时前
HTML5系列（11）-- Web 无障碍开发指南
前端·html·html5
QQ同步助手3 小时前
如何正确使用人工智能：开启智慧学习与创新之旅
人工智能·学习·百度
流浪的小新3 小时前
【AI】人工智能、LLM学习资源汇总
人工智能·学习
m0_748235613 小时前
从零开始学前端之HTML（三）
前端·html
A懿轩A4 小时前
C/C++ 数据结构与算法【数组】 数组详细解析【日常学习，考研必备】带图+详细代码
c语言·数据结构·c++·学习·考研·算法·数组
旭久4 小时前
SpringBoot的Thymeleaf做一个可自定义合并td的pdf表格
pdf·html·springboot
南宫生12 小时前
力扣-图论-17【算法学习day.67】
java·学习·算法·leetcode·图论
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play