第三次作业

最新推荐文章于 2024-09-30 18:55:14 发布

小易要自律

最新推荐文章于 2024-09-30 18:55:14 发布

阅读量110

点赞数 2

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/2301_79204554/article/details/139646551

版权

作业：完成一套电商（至少三个页面）

页面一：淘宝主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝</title>
    <style>
        /* 主体设置 */
        div{
            float: left;
            /* unicode-bidi: isolate; */
        }
        span:hover{
            color: red;
        }
        /* 分步设置 */
        .img{
            width: 3840px;
            /* position: absolute; */
            top: 0;
            height: 60px;
            left: 50%;
            transform: translateX(-29.5%);
            background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN01kGXeX81ctPlqc47vy_!!6000000003658-0-tps-7680-120.jpg);
            background-size: cover;
        }
        span{
            float: left;
            margin-right: 7px;
            font-size: 12px;
            color: #6C6C6C;
            margin: 5px;
        }
        .top{
            margin-top:0px ;
            margin-bottom: 0x;
            margin-left: auto;
            margin-left: auto;
        }
        .dalu,.sj,.wangye,.my,.mianfei,.help{
            width: 79px;
            height: 32px;
        }
        .denglu{
            width: 134px;
            height: 32px;
        }
        .car{
            width: 72px;
            height: 32px;
        }
        .shoucang{
            width: 84px;
            height: 32px;
        }
        .fenlei{
            width: 67px;
            height: 32px;
        }
        .qianniu{
            width: 103px;
            height: 32px;
        }
        .dalu{
            margin-left: 180px;
        }
        .my{
            margin-left: 260px;
        }
        /* 搜索框 */
        .search{
            margin-left: 130px;
            width: 1400px;
            height: 90px;
            /* border: 1px solid red; */
        }
        .tubiao{
            margin: 10px;
            float: left;
        }
        .tubiao-1{
            margin: 10px;
           
        }
        .kuang{
            width: 760px;
            height: 42px;
            border: 2px solid red;
            border-radius: 5px;
            margin: 10px;
        }
        .span-1{
            font-size: 15px;
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            margin-left: 12px;
            font-weight: 400;
            color: black;
        }
        .span-2{
            width: 560px;
            height: 25px;
            margin-top: 5px;
            outline: none;
            border:none;
        }
        .span-3{
            width: 80px;
                height: 38px;
                margin-top: 1px;
                float: right;
                background-color:orangered;
                border-radius: 4px;
                color: #fff;
                font-size: 16px;
                border: none;
                font-weight: 700;
                margin-left: 40px;
        }
      .text{
        float: none;
        margin-top: -3px;
      }
        .div-0{
            margin-left: 20px;
            width: 60px;
            height: 15px;
        }
        .div-1{
            width: 60px;
            height: 15px;
        }
        .div-2{
            width: 70px;
            height: 15px;
        }
        .div-3{
            width: 75px;
            height: 15px;
        }
        .div-4{
            width: 37px;
            height: 15px;
        }
        .div-5{
            width: 17px;
            height: 15px;
        }
        /* body */
        .body{
            width: 1300px;
            height: 900px;
            /* border: 1px solid red; */
          margin-left: 130px;
        }
        .b1{
            width: 1300px;
            height: 440px;
            /* border: 1px solid red; */
        }
        .b2{
            width: 1300px;
            height: 60px;
            /* border: 1px solid red; */
        }
        .b1-left{
            width:240px ;
            height: 400px;
            /* border: 1px solid red; */
            margin-top: 20px;
            margin-left: 20px;
            background-color: #F3F6F8;
            border-radius: 6px ;
        }
        .b1-center{
            width: 730px;
            height: 400px;
            margin-top: 20px;
            margin-left: 20px;
            /* border: 1px solid red; */
        }
        .b1-right{
            width:240px ;
            height: 400px;
            /* border: 1px solid red; */
            margin-top: 20px;
            margin-left: 20px;
            margin-right: 20px;
            float: right;
        }
        .b1l{
            width: 240px;
            height: 40px;
        }
        .fenlei-wenzi{
            width: 32px;
            height: 21px;
            font-size: 16px;
            font-weight: 700;
            color: black;
            margin-left: 20px;
            
        }
        .kuanghuan{
            width: 90px;
            height: 16px;
            font-size: 16px;
            /* color: red; */
        }
        .ll{
            margin-left: -25px;
            width: 208px;
            height: 32px;
            /* border: 1px solid red; */
            list-style-type: none;
            float: left;
        }
        .span-4{
            font-size: 16px;
            color: #50607A;
            margin-left:5px ;
            margin-top: 5px;
        }
        .c-top{
            width: 730px;
            height: 48px;
            /* border: 1px solid red; */
            background-color:#F3F6F8 ;
            border-radius: 6px;
        }
        .c-center{
            width: 730px;
            height: 336px;
            /* border: 1px solid red; */
        }
        .c-top-text{
            width: 112px;
            height: 48px;
        }
        .c-top-span{            
            /* color: #ff0036; */
            font-weight: 600;
            font-size: 16px;
            margin: 10px;
            margin-top: 15px;
        }
        .c-top-span1{            
            font-size: 16px;
            margin: 10px;
            margin-top: 15px;
            color:rgb(76, 187, 76);
            font-weight: 600;
        }
        .c-top-span2{            
            font-size: 16px;
            margin: 10px;
            margin-top: 15px;
            color: black;
        }
        .c-top-symbol-0{
            font-size: 16px;
            margin-left: 45px;
            margin-top: 15px;
            color: #a49d9d;
        }
        .c-top-symbol{
            font-size: 16px;
            margin-left: 6px;
            margin-top: 15px;
            color: #a49d9d;
            margin-right: 10px;
        }
        .c-center-left,.c-center-center,.c-center-right{
            width: 240px;
            height: 335px;
            /* border: 1px solid red; */
        }
        .c-center-left{
            background-image: url(./屏幕截图-淘宝.png);
            background-size: cover;
        }
        .c-center-center1{
            width: 240px;
            height: 160px;
            /* border: 1px solid red; */
            /* margin: 10px; */
            background-color: rgb(255, 235, 235);
        }
        .c-center-center2{
            width: 110px;
            height: 160px;
            /* border: 1px solid red; */
            margin: 4px;
            background-color:rgb(255, 235, 235);
        }
        .c-center-center3{
            width: 110px;
            height: 160px;
            /* border: 1px solid red; */
            margin: 4px;
            background-color:rgb(235, 240, 245);
        }
        .c-center-center1-top{
            width: 240px;
            height: 48px;
            /* border: 1px solid red; */
            
        }
        .c-center-center1-body{
            width: 240px;
            height: 96px;
            /* border: 1px solid red; */
        }
        .c-c-c1-body-span{
            width: 140px;
            height: 96px;
            /* border: 1px solid red; */
        }
        .c-c-c1-body-span2{
            margin-top: 13px;
        }
        .renmingbi{
            margin-top: 5px;
            margin-right: -5px;
        }
        .huatibang{
            margin-top: 13px;
            height:16px ;
            width: 44px;
            background-color: orangered;
            border-radius:6px ;
        }
        .zhibo1{
            width: 96px;
            height: 96px;
            background-image: url(./屏幕截图-淘宝2.png);
            background-size: cover;
            margin-left:10px;
            margin-top: 10px;
            border-radius:6px ;
        }
        .zhibo2{
            width: 96px;
            height: 96px;
            background-image: url(./屏幕截图-淘宝3.png);
            background-size: cover;
            margin-left:20px;
            margin-top: 10px;
            border-radius: 6px;
        }
        .b1-right-top{
            width: 224px;
            height: 124px;
            /* border: 1px solid red; */
            margin-left: 7px;
        }
        .b1-right-body1{
            width: 240px;
            height: 48px;
            /* border: 1px solid red; */
        }
        .b1-right-body2{
            width: 240px;
            height: 48px;
            /* border: 1px solid red; */
        }
        .b1-right-foot{
            width: 240px;
            height: 142px;
            /* border: 1px solid red; */
        }
        .b1-r-b1-dl{
            width: 72px;
            height:48px ;
            background-color: #FF6408;
            margin-right: 10px;
            border-radius:6px ;
        }
        .b1-r-b1-zc{
            width: 72px;
            height:48px ;
            background-color: #FEB306;
            margin-right: 10px;
            border-radius:6px ;
        }
        .b1-r-b1-kd{
            width: 72px;
            height:48px ;
            background-color:#F4F6F8 ;
            border-radius:6px ;
        }
        .b1-r-b1-span{
            font-size: 16px;
            color: #fff;
            font-weight: 700;
            margin-top: 10px;
            margin-left: 15px;
        }
        .b1-right-body2-span{
            font-size: 12px;
            color: black;
            /* margin-left: 10px; */
        }
        .b1-right-body2-span-1{
            font-size: 12px;
            color: black;
            margin-left: 15px;
        }
        .b2-style{
            width: 172px;
            height: 48px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="dalu"><span>中国大陆</span></div>
        <div class="denglu"><a href="https://login.taobao.com/member/login.jhtml?f=top&redirectURL=https%3A%2F%2Fwww.taobao.com%2F"><span style="color: red;">亲,请登录</span></a>
            <a href="https://reg.taobao.com/member/reg/fast/union_reg?_regfrom=TB&_regbizsource=tbtop"><span>免费注册</span></a>
        </div>
        <div class="sj"><a href="https://market.m.taobao.com/app/fdilab/download-page/main/index.html"><span>手机逛淘宝</span></a></div>
        <div class="wangye"><a href=""><span>网页无障碍</span></a></div>
        <div class="my"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fi.taobao.com%2Fmy_taobao.htm"><span>我的淘宝</span></a></div>
        <div class="car"><a href="https://login.taobao.com/member/login.jhtml?redirectURL=http%3A%2F%2Fcart.taobao.com%2Fcart.htm%3Ffrom%3Dmini%26pm_id%3D1501036000a02c5c3739"><span>购物车</span></a></div>
        <div class="shoucang"><a href="https://login.taobao.com/member/login.jhtml?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fshoucang.taobao.com%2Fitem_collect_n.htm"><span>收藏夹</span></a></div>
        <div class="fenlei"><a href="https://huodong.taobao.com/wow/tbhome/act/market-list"><span>商品分类</span></a></div>
        <div class="mianfei"><a href="https://ishop.taobao.com/openshop/tb_open_shop_landing.htm"><span>免费开店</span></a></div>
        <div class="qianniu"><a href="https://loginmyseller.taobao.com/?from=taobaoindex&f=top&style=&sub=true&redirect_url=https%3A%2F%2Fmyseller.taobao.com%2Fhome.htm%2FQnworkbenchHome%2F"><span>千牛卖家中心</span></a></div>
        <div class="help"><a href="https://consumerservice.taobao.com/"><span>帮助中心</span></a></div>
    </div>
    <a href="https://pages.tmall.com/wow/a/act/tmall/tmc/39090/22344/wupr?wh_pid=main-533831&disableNav=YES&status_bar_transparent=true" style="width: 784px;height: 60px;">
        <div class="img">
    </div>
</a>
    <div class="search">
        <div class="tubiao">
            <img src="https://img.alicdn.com/imgextra/i1/O1CN012Xz4CP1dq2T2HuNwT_!!6000000003786-1-tps-480-144.gif" style="width:240px ; height: 72px;">
        </div>
        <div class="center">
            <div class="kuang">
                <span class="span-1">宝贝</span>
                <span style="color: #6C6C6C; margin-top:10px ;font-size: 14px;">|</span>
                <input type="text" class="span-2">
                <button type="submit" class="span-3">搜索</button>
            </div>
            <div class="text">
                <div class="div-0"><a href=""><span style="color: red;">大额神劵</span></a></div>
                <div class="div-2"><a href=""><span>苹果惊喜券</span></a></div>
                <div class="div-1"><a href=""><span>买一享十</span></a></div>
                <div class="div-1"><a href=""><span>家电爆款</span></a></div>
                <div class="div-3"><a href=""><span>3c数码优惠</span></a></div>
                <div class="div-4"><a href=""><span>女装</span></a></div>
                <div class="div-1"><a href=""><span>美味狂欢</span></a></div>
                <div class="div-4"><a href=""><span>货架</span></a></div>
                <div class="div-4"><a href=""><span>空调</span></a></div>
                <div class="div-4"><a href=""><span>手机</span></a></div>
                <div class="div-2"><a href=""><span>笔记本电脑</span></a></div>
                <div class="div-1"><a href=""><span>电脑主机</span></a></div>
                <div class="div-4"><a href=""><span>瓷砖</span></a></div>
                <div class="div-5"><a href=""><span>床</span></a></div>
            </div>
        </div>
        <div class="tubiao-1">
            <img src="https://gw.alicdn.com/imgextra/i1/O1CN01zPQ3cI1ZW6lIk3apB_!!6000000003201-2-tps-480-144.png" style="width: 240px; height: 72px;">
        </div>
    </div>
    <div class="body">
        <!-- body 分为三个部分
        b1,b2,b3
        再分别对其下再进行布局
        层层深入
        -->
        <div class="b1">
            <div class="b1-left">
                <div class="b1l-top">
                    <span class="fenlei-wenzi">分类</span>
                    <span class="kuanghuan">618狂欢节</span>
                </div>
                <ul style="width: 240px; height: 352px;">
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">电脑</span><span class="span-4">/</span><span class="span-4">办公</span><span class="span-4">/</span><span class="span-4">文具</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">工业品</span><span class="span-4">/</span><span class="span-4">商业</span><span class="span-4">/</span><span class="span-4">定制</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">家电</span><span class="span-4">/</span><span class="span-4">手机</span><span class="span-4">/</span><span class="span-4">数码</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">家具</span><span class="span-4">/</span><span class="span-4">家装</span><span class="span-4">/</span><span class="span-4">家具</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">女装</span><span class="span-4">/</span><span class="span-4">男装</span><span class="span-4">/</span><span class="span-4">内衣</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">女鞋</span><span class="span-4">/</span><span class="span-4">男鞋</span><span class="span-4">/</span><span class="span-4">运动</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">汽车</span><span class="span-4">/</span><span class="span-4">珠宝</span><span class="span-4">/</span><span class="span-4">箱包</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">食品</span><span class="span-4">/</span><span class="span-4">生鲜</span><span class="span-4">/</span><span class="span-4">健康</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">母婴</span><span class="span-4">/</span><span class="span-4">童装</span><span class="span-4">/</span><span class="span-4">潮玩</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">美妆</span><span class="span-4">/</span><span class="span-4">洗护</span><span class="span-4">/</span><span class="span-4">宠物</span></a></li>
                    <li class="ll"><a href=""><span class="span-4"></span><span class="span-4">娱乐</span><span class="span-4">/</span><span class="span-4">图书</span><span class="span-4">/</span><span class="span-4">鲜花</span></a></li>
                </ul>
            </div>
            <div class="b1-center">
                <div class="c-top">
                    <div class="c-top-text" style="margin-left: 14px;"><a href=""><span class="c-top-span">天猫</span></a><span class="c-top-symbol-0">|</span></div>
                    <div class="c-top-text"><a href=""><span class="c-top-span">淘宝直播</span></a><span class="c-top-symbol">|</span></div>
                    <div class="c-top-text"><a href=""><span class="c-top-span">1688严选</span></a><span class="c-top-symbol">|</span></div>
                    <div class="c-top-text"><a href=""><span class="c-top-span">司法拍卖</span></a><span class="c-top-symbol">|</span></div>
                    <div class="c-top-text"><a href=""><span class="c-top-span1">天猫超市</span></a><span class="c-top-symbol">|</span></div>
                    <div class="c-top-text"><a href=""><span class="c-top-span2">聚划算</span></a></div>
                </div>
                <div class="c-center">
                    <a href=""><div class="c-center-left"></div></a>
                    <div class="c-center-center">
                        <div class="c-center-center1">
                            <div class="c-center-center1-top">
                                <a href=""><span style="font-size: 16px; font-weight: 700; color: black; margin-top: 10px; margin-left: 10px;">百亿补贴 · 正品低价</span></a>
                            </div>
                            <div class="c-center-center1-body">
                                <a href=""><img src="https://img.alicdn.com/bao/upload/O1CN01pgXuz41GbcnomtudJ_!!6000000000641-0-yinhe.jpg" style="width: 96px; height: 96px; float: left;"></a>
                                <div class="c-c-c1-body-span">
                                    <div class="c-c-c1-body-span1"><a href=""><span style="font-size: 14px; color: black;">韩版ins网红高弹力组合套装头绳韩版..</span></a></div>
                                    <div class="c-c-c1-body-span2"><div class="renmingbi"><a href=""><span style="font-size: 12px;color: orangered;">¥</span></div><span style="font-size: 16px; font-weight: 600; color: orangered;">5.99</span></a></div>
                                </div>
                            </div>
                        </div>
                        <a href="">
                            <div class="c-center-center2">
                                <a href=""><span style="font-size: 16px; font-weight: 700; color: black; margin-top: 10px; margin-left: 10px;margin-right: 20px; ">淘工厂货</span>
                                <img src="./屏幕截图-淘宝4.png" style="margin-top: 20px;margin-left: 35px;  width: 30px; height: 60px;">

                            </div>
                        </a>
                        <a href=""> 
                            <div class="c-center-center3">
                                <a href=""><span style="font-size: 16px; font-weight: 700; color: black; margin-top: 10px; margin-left: 10px;">潮电数码</span>
                                <img src="./屏幕截图-淘宝5.png"  style="margin-top: 20px;margin-left: 25px;  width: 50px; height: 60px;">
                                
                            </div>
                        </a>  
                    </div>
                    <div class="c-center-right">
                        <div class="c-center-center1">
                            <a href=""><span style="font-size: 16px; font-weight: 700; color: black; margin-top: 10px; margin-left: 10px;">淘江湖</span><div class="huatibang"><span style="font-size: 11px; color: #fff; margin-top:-1px ;">话题榜</span></div></a>
                            <div class="remen"><a href=""><span style="font-size: 11px; color: red; margin-left: 10px; background-color:rgb(237, 208, 198);margin-top: 10px;">热门</span></a><a href=""><span style="margin-top: 8px; font-size: 14px; color: black;">致taobao.com用户的一封信...</span></a></div>
                            <div class="remen"><a href=""><span style="font-size: 11px; color: red; margin-left: 10px; background-color:rgb(237, 208, 198);margin-top: 10px;">热门</span></a><a href=""><span style="margin-top: 8px; font-size: 14px; color: black;">十年前装修vs现在装修,真的...</span></a></div>
                            <div class="remen"><a href=""><span style="font-size: 11px; color: red; margin-left: 10px; background-color:rgb(237, 208, 198);margin-top: 10px;">热门</span></a><a href=""><span style="margin-top: 8px; font-size: 14px; color: black;">打工"牛马"终于实现副业收入...</span></a></div>
                            <div class="remen"><a href=""><span style="font-size: 11px; color: red; margin-left: 10px; background-color:rgb(237, 208, 198);margin-top: 10px;">热门</span></a><a href=""><span style="margin-top: 8px; font-size: 14px; color: black;">端午节真生气了在周一</span></a></div>
                        </div>
                        <div class="c-center-center1">
                            <a href=""><span style="font-size: 16px; font-weight: 700; color: black; margin-top: 10px; margin-left: 10px;margin-right: 80px;">淘宝直播</span>
                                <a href=""><div class="zhibo1"></div></a>
                                <a href=""><div class="zhibo2"></div></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="b1-right">
                <div class="b1-right-top">
                    <a href=""><img src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=60&height=60&type=sns&_input_charset=UTF-8" style="width: 76px;height: 76px;border-radius:50%;margin-left: 70px;"></a>
                    <a href=""><span style="font-size: 16px; font-weight: 600; color: black; margin-left: 85px;margin-top: 10px;">晚上好</span></a>
                </div>
                <div class="b1-right-body1">
                    <a href=""><div class="b1-r-b1-dl"><span class="b1-r-b1-span">登录</span></div></a>
                    <a href=""><div class="b1-r-b1-zc"><span class="b1-r-b1-span">注册</span></div></a>
                    <a href=""><div class="b1-r-b1-kd"><span class="b1-r-b1-span" style="color: black;">开店</span></div></a>
                </div>
                <div class="b1-right-body2">
                    <a href=""><img src="./收藏.png" style="width: 30px; height: 25px; margin-top: 6px;margin-left: 15px;"></a>
                    <a href=""><img src="./软件商店.png" style="width: 30px; height: 25px; margin-top: 6px;margin-left: 20px;"></a>
                    <a href=""><img src="./收藏的店铺.png" style="width: 30px; height: 25px; margin-top: 6px;margin-left: 20px;"></a>
                    <a href=""><img src="./我的足迹.png" style="width: 30px; height: 25px; margin-top: 6px;margin-left: 20px;"></a>
                    <a href=""><span class="b1-right-body2-span">宝贝收藏</span></a>
                    <a href=""><span class="b1-right-body2-span">买过的店</span></a>
                    <a href=""><span class="b1-right-body2-span">收藏的店</span></a>
                    <a href=""><span class="b1-right-body2-span">我的足迹</span></a>
                </div>
                <div class="b1-right-foot">
                    <a href=""><img src="https://gw.alicdn.com/imgextra/i1/O1CN01nTz9d01PAuH2K5Ifh_!!6000000001801-2-tps-128-128.png" style="width: 32px;height: 32px;margin-left: 10px;margin-top: 10px; margin-right: 10px;"></a>
                    <a href=""><img src="https://gw.alicdn.com/imgextra/i2/O1CN01nb35qq1elkMpL4lGP_!!6000000003912-2-tps-128-128.png" style="width: 32px;height: 32px;margin-left: 10px;margin-top: 10px;  margin-right: 10px;"></a>
                    <a href=""><img src="https://gw.alicdn.com/imgextra/i2/O1CN01qcMRwH1q2CMpLLOu5_!!6000000005437-2-tps-128-128.png" style="width: 32px;height: 32px;margin-left: 10px;margin-top: 10px;  margin-right: 10px;"></a>
                    <a href=""><img src="https://gw.alicdn.com/imgextra/i4/O1CN01AZVESe20L6sXJXvyB_!!6000000006832-2-tps-128-128.png" style="width: 32px;height: 32px;margin-left: 10px;margin-top: 10px; "></a>
                    <a href=""><span class="b1-right-body2-span">云养熊猫</span></a>
                    <a href=""><span class="b1-right-body2-span">1688</span></a>
                    <a href=""><span class="b1-right-body2-span-1" >裹裹商家</span></a>
                    <a href=""><span class="b1-right-body2-span-1">书旗小说</span></a>
                    <a href=""><img src="https://gw.alicdn.com/imgextra/i2/O1CN01wG8KW31IGDYZJbMgy_!!6000000000865-2-tps-128-128.png" style="width: 32px;height: 32px;margin-left: 10px;margin-top: 10px; margin-right: 10px;"></a>
                    <a href=""><img src="https://gw.alicdn.com/imgextra/i3/O1CN01l6t3Jm1OlG5jE88tQ_!!6000000001745-2-tps-128-128.png" style="width: 32px;height: 32px;margin-left: 10px;margin-top: 10px;  margin-right: 10px;"></a>
                    <a href=""><img src="https://gw.alicdn.com/imgextra/i2/O1CN01q0xf7R1T1z1CRIvxn_!!6000000002323-2-tps-128-128.png" style="width: 32px;height: 32px;margin-left: 10px;margin-top: 10px;  margin-right: 10px;"></a>
                    <a href=""><img src="https://gw.alicdn.com/imgextra/i1/O1CN01ON7aSS26hRtJ2ZJcR_!!6000000007693-2-tps-128-128.png" style="width: 32px;height: 32px;margin-left: 10px;margin-top: 10px; "></a>
                    <a href=""><span class="b1-right-body2-span">云游戏</span></a>
                    <a href=""><span class="b1-right-body2-span">飞猪旅行</span></a>
                    <a href=""><span class="b1-right-body2-span-1" >大麦网</span></a>
                    <a href=""><span class="b1-right-body2-span-1">优酷视频</span></a>
                </div>
            </div>
        </div>
        <div class="b2">
            <a href="">
                <div class="b2-style">
                    <img src="https://gw.alicdn.com/imgextra/i2/O1CN011E0R1J23w9lJDeJXk_!!6000000007319-2-tps-192-192.png " style="width: 48px;height: 48px;border-radius:50%;margin-left: 10px;float: left;background-color: rgb(241, 233, 229);margin-top: 5px;">
                    <span style="color: #FF5000;font-size: 16px;margin-top: 10px;">猜你喜欢</span>
                    <span style="color: #FF5000;font-size: 12px;margin-top:-4px;">精选好物推荐</span>
                </div>
            </a>
            <span style="font-size: 25px;margin-top: 10px;font-weight: 300;color: #d6d3d3;">|</span>
            <a href="">
                <div class="b2-style">
                    <img src="https://img.alicdn.com/imgextra/i4/O1CN01O363PQ23L3gUtAlg5_!!6000000007238-2-tps-192-192.png" style="width: 48px;height: 48px;border-radius:50%;margin-left: 10px;float: left;background-color: rgb(241, 233, 229);margin-top: 5px;">
                    <span style="color: #11192D;font-size: 16px;margin-top: 10px;">潮电数码</span>
                    <span style="color: #7C889C;font-size: 12px;margin-top:-4px;">疯抢8.5折起</span>
                </div>
            </a>
            <span style="font-size: 25px;margin-top: 10px;font-weight: 300;color: #d6d3d3;">|</span>
            <a href="">
                <div class="b2-style">
                    <img src="https://img.alicdn.com/imgextra/i3/O1CN01wCKde31iiJrvWtIbb_!!6000000004446-2-tps-192-192.png" style="width: 48px;height: 48px;border-radius:50%;margin-left: 10px;float: left;background-color: rgb(241, 233, 229);margin-top: 5px;">
                    <span style="color: #11192D;font-size: 16px;margin-top: 10px;">服装时尚</span>
                    <span style="color: #7C889C;font-size: 12px;margin-top:-4px;">大牌直降</span>
                </div>
            </a>
            <span style="font-size: 25px;margin-top: 10px;font-weight: 300;color: #d6d3d3;">|</span>
            <a href="">
                <div class="b2-style">
                    <img src="https://gw.alicdn.com/imgextra/i4/O1CN01HcFWbP25zTrvtEkbS_!!6000000007597-2-tps-192-192.png " style="width: 48px;height: 48px;border-radius:50%;margin-left: 10px;float: left;background-color: rgb(241, 233, 229);margin-top: 5px;">
                    <span style="color: #11192D;font-size: 16px;margin-top: 10px;">运动户外</span>
                    <span style="color: #7C889C;font-size: 12px;margin-top:-4px;">满300jian</span>
                </div>
            </a>
            <span style="font-size: 25px;margin-top: 10px;font-weight: 300;color: #d6d3d3;">|</span>
            <a href="">
                <div class="b2-style">
                    <img src="https://img.alicdn.com/imgextra/i3/O1CN01LTDjKk29LPgYe0Mmb_!!6000000008051-2-tps-192-192.png " style="width: 48px;height: 48px;border-radius:50%;margin-left: 10px;float: left;background-color: rgb(241, 233, 229);margin-top: 5px;">
                    <span style="color: #11192D;font-size: 16px;margin-top: 10px;">家享生活</span>
                    <span style="color: #7C889C;font-size: 12px;margin-top:-4px;">大牌不止五折</span>
                </div>
            </a>
            <span style="font-size: 25px;margin-top: 10px;font-weight: 300;color: #d6d3d3;">|</span>
            <a href="">
                <div class="b2-style">
                    <img src="https://img.alicdn.com/imgextra/i3/O1CN01LLu9731XNHuK080yf_!!6000000002911-2-tps-192-192.png" style="width: 48px;height: 48px;border-radius:50%;margin-left: 10px;float: left;background-color: rgb(241, 233, 229);margin-top: 5px;">
                    <span style="color: #11192D;font-size: 16px;margin-top: 10px;">食品生鲜</span>
                    <span style="color: #7C889C;font-size: 12px;margin-top:-4px;">满300减50</span>
                </div>
            </a>
        
        </div>
    </div>
</body>
</html>

页面二：登录页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网-淘！我喜欢</title>
    <style>
        div{
            float: left;
        }
        .all{
            width: 100%;
            height: 860px;
            background-color: #F0EFF2;
        }
        .top{
            width: 100%;
            height: 88px;
            /* border: 1px solid red; */
        }
        .t-left{
            width: 80px;
            height: 50px;
            margin-left:150px;
            margin-top: 20px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOQAAACPCAMAAADduocmAAAACXBIWXMAABcRAAAXEQHKJvM/AAAAM1BMVEVHcEz/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwD/XwBQTkMBAAAAEHRSTlMA4GAw8BCgQIDAINCQUHCwIFiu3AAAC5ZJREFUeNrtXeeCrCoMll6k+P5Pe6eplATQce7sOWfzc9cRPgjpwWkaIO+0YtNXSemVonnQ5fNxy51mo4MSXwKpl4LU1SPM6duNtF8AST8NUhTv/8ZuqhLk1Svt89fL6SeAPL1jNJKFmCDAI4kxiqJaGrP+kxgjNVU/FqTnr9/zkP+DZG+f93+wIMkC0yzpAa7uyzNbvJ/7XdA+SOrb2nZFrsQ4kuWvp69RQ+RLm+ZRnLcRSNRtpMsYtd8Tsmc1yq3zE+E8NuaYJKbbDIN6E+RzjgEe1nJUeJHiRApqDgwoB3ZT5oyu+sKvS4ai+h5i2Pz10Tp+bDjuj+nhWgXaYJbjROpxSwHC4WVe4onheptZ6GGTn1dHlpNkRI/lGSLWztAsjujhRETa8wgfO8XaamjjGb18HKWDD4qg89sD05Ya2kCK7gm8qf/NQ9DOkOMoMyz8JfKYvGJ1872s/i0QwzjleRdULauFhywEOXokn8prZBN5YgoYbC9IurqlQJkRgbQOEEPLuvC1OAxjDsZ9UkLzFuO4m2kDKXymgqvH1Q1XJjQ2ctZ9j1VV4toOaUk1WQzizZjx/YGZzpmAC1RXEfREkjDm5IjyTEXsyXQMZyXMmfqAu64MJnsyk2c9r6Vo5fJA1CGMubmpaUwgS8OEw6EOxZHFZfteEgbKXBKOucu6peRRW6tYVX/KRWe8ZMqVwV6Hgev1vdm2k9u+U3XIIY+olm/YWhnCK/zP6l9BJ35AKCA+OcsMnX/oSMsBcydhM3pRXGp4yx8DivloDITigg42jc+ejNZZaW7DDunFv3JEIbR4kfaDZM8VvCB84juioBAIxtbbQk9J2NgXwalIuCYo1OQ58RQbnNbcC/1QPYk+bVhjoI3ifbFD6HQN6cH9kKlPJtLpzJvNiIpGSEDXqtKXUaHLwnuyJQjy1QjACR1zWEFdqcsRsjUwg0dRreQ372ddc7KtL4GZztbrKFADvhsNAB1V04imPhl1T+xok9GBsTM7ylarOqsRI3qEPOiocnQj17N4gY/OU7HpIDln7CUYCeKoCvhE7hL1ApAPdpEcOpGbgQ5I8MMYE4d8bkgeUkdnLwAZ9vyF8Sjn+Dcxzk4goqVwnZ+IsjPyPsiGOM1eHkXLMYQ45C4o/EPi2aaToav0Cw/tZOtyVhq0nbrE18odTaIw4a9H/a1SvFpnp0tBEjUcw87shNXUcWK6HGQ/bT4QLHyQuzMTZePh3UKJ0urkHACpEKmL+S2moFVrkqVn63cJiB5lKDlt2irDIE8niAsBdrJkoI4D6maS9I8ECcD0w4P+OSArmE0DvgfSvnLb7KKijctAlkpRjw5qnnmQB82FJL1ocheCvK28qXIFLJV28zEb8meCvFnqvDhB6pxe1j8ZZBLoeMsK8T8a5I7qHZB8+tkg2RUgKcjr14FcYyAhDyTwUVWl8s1wZ/bRT8dBqp10RhLPsiLe3ni01ICLiL/5uZbxNiuFGQPNBMNyGZk+SJLLR5doEAcazOoai+c6kG48g6FGz4gadnD+J5DddNiWi+LTBSD1N0D2j6TsJsB/OkjORkVrxzEdBSkPCISrpE4XY5LzEG+AVLB++wxIkgjFMJIMl3WiTd6DEEodAOkJgaNHcRQkz4MgsQx/hLsyPZvj84CEShRhGAH5KDGBd0d/0Gm+p3+GaqWTLD+HNJ3sg3xVY4G5kA+C9OSVcDj0Kgklg7s7SUkuRq8yXXsgKV7l2pL3CoqBqybINHyiQA3CPgRSjVs7CoyQGjArVYNUEphFvCiO1QFphuNIWdkNzJiodLWBgLMgR52DUyDtuOGKLAe8E5nrA5RgekjuyA+B9MPKWCMKDU6ijkV46GjR63sghxMuCjPj4RTEGEh5ldxpg1SDIPPuF44YW7vpOwaS9Op4PnEm0UNRlLA4wIV+8bG+ByccEi0wMgPJlgNG3WXSVY05C5kUHq8uMWpnHAVEh+jHQLIRbg2NEMloHCuq5HQQgAneaqEdtnjQ7gzVih6wIT/1VcGhUhFDr+PWru26VvajPVOML618cJ9fk/LUJ2QF/ZB+EuTdC4ka7wKo6uY0zvAgn/pcFq+lR365TLa+H0GvdsqiDA9tYv603mr/BbnKzToAUpTFhfJ570JVp1OfHY/1ozg2Gt2BU7pCjVLBbTJraG735glom4CgpagbNjqdTFjPUFvifYI4VN0Cl6EIKuc9DNKumIEwztO3QEaoLaNlRbPB6JGo6mPZ10DSuzdPlrdVdiGpgKqgMH0L5EsWUPKuz+eeV7y8Su3nZn3X/w3SV+Gnk+5Qz1yQ09dAphbIdnfAqQgFP4nx0yB5eZnDq+vwjO0l2iPR6aMgs/s/XqTA2tsV5inbqzlV0wqeWT1ClWXwVg+Qle7MzyhvuZh/DbEQAdNqDnb6y0g8rx8yy+vqoa9dGvZLv/RLv/RLv/RLv/RLv/RLRxw6hfu0fw3pS/IGR2kszar/BZDhXwDJ/gGQ5F84k/4fABmmPxwkzXuG9kTnRvRKnfYdkDmp6zrb/lSQq7nSvY4bfyoHaXvWD1NjFpI9YkehIL3Ok/Ozw/Y6vf3UVBHmBCTbHuTAFWeCurzbzmgEgqD7heU8DpTboyBHswCUtJ/aQDLTfhmUY4EuHa8uD+DdO7sxkHbM2GNQa3d2b8gKcu41y9FmZ+bON/xYKq0FUg0lH5FqmLTiTY9mMnU/rzqhtX/yFMjXFUH3JlCXduJnY6JXQyYo9Wi+Nr7yj/Fec4Qlw+Xx1G8DpJudt8lRJ0AV0l6lxx8yIukwmGGQ/K6NI8z+xuhEWO7lFmk2fK/vNHd5k163ry/Qk1sZS/KyuWpB2WFrCOSrDM/GkYYHO1cmJqshhUMNuj1jYC2e4/UeJcy5o7QVyKTRkY5wGasK4wywbeFIxb1qaHmRHvntQQ5tRyinr0GjX6Jb+SzAyzBVczWgLe5PgWRu3moH7fakbu8GKcqgNFipuLXeOMSumIPYfqrKlVEggngCZKG8pS+mFWH/2hVyWLcfSx1Xn9kVXOtCoiPOLulWl6EgK9HPC17h8JDlVasafqy+/rGu0OM57yjEinBdfsVA4vfXmWKWEbEHSQ6yfIwXM2vcRKqLZS/A+K4WUb1WIX43B0gNEn31nLd6Ya6WKf6eXIp4U6aS1yBjr4PCHAOpSjs0sd9MsQwBizyI7LnSvHQ5gk0qr5cUhgqkwVoWT4I0lRW315iXIBUGUmXPYWc+5tJ2V6aVYXExSAsccfYhkCbXRx5QuZ8BGaByefkeSN/cyQjNk3wUZITUvM9fFZaOROkIHgk27NHGsTWIPhTnQBpIpoj8VQoDyc9IV9BiKGws13N95SmQCuIK014/gZxdTE+qDOTUABkQeU7P6UkDnqMCFIGPiC+Elob7mljOeyAnFiAx80N28zdNkBp6UratqXLIju0ac9mhWiFbArcP9W8UAkFqqES9EAOIoWFLK1qDJ2bTizRfVgnZTrp8FQW51R0D6YE/bm3QEtEVhe1FKwORAftNihVMP2hRiTYLdYLtVoo9BnK3PwQQ66h+msyMVu7QDjL56hUtlwJgC9EIpURgVd3RyMB2sObX8gsDpC63U7ldTQ1EXBKXja+3hrgaEinjRYzUkbh919Yrv3f/jIijIJMWfXm/DDxrw9ueTLwj6e3Eki+dadgvnbVXdPcwkuDQ7hJwd2+IlGCfYhIfdEpMybyaN2UhrlarU5RvX6lGfUA5FFzmbMiBvX/LQFUoj8TQ0bjrgvnp6Q6I2M3hvkBC7Qe246ZDH2ZhpLtcB8If5V7GLQ6avTLUSzuzStndFrpqJ3Gdjycv2kJ8Dd2538v44IEsG4sc1Lpt+W1GZbdi+X1WvSan8m++Qfmq7Itu9wfWdFIuOK3k3dRXGZMz6IfmbXgkDElck47KGQN834/p+JgeN7LOxNP9G842xMesDfpZZ/ZMUc5xfY+XJgJNNWvylBhXfVTtP+nJAgRmtgUIAAAAAElFTkSuQmCC);
            background-size: cover;
        }
        .t-right{
            width:127px;
            height: 40px;
            float: right;
            margin-top: 10px;
            margin-right: 190px;
        }
        a:hover{
            text-decoration: none;
            color: red;
        }
        a{
            color: black;
            text-decoration: none;
        }
        .body{
            width: 885px;
            height: 554px;
            margin-top: 80px;
            /* border: 1px solid red; */
            border-radius: 6px;
            background-color: white;
            margin-left: 357px;
        }
        .b-left{
            width: 500px;
            height: 554px;
            /* border: 1px solid red; */
        }
        .b-right{
            width: 380px;
            height: 554px;
            /* border: 1px solid red; */
        }
        .b-left-1{
            margin-top: 70px;
            margin-left: 130px;
            font-size: 23px;
            font-weight: 800;
        }
        .b-left-2,.b-left-3{
            width: 350px;
            height: 48px;
            margin-left: 70px;
            /* border: 1px solid red; */
        }
        .b-left-2{
            margin-top: 60px;
        }
        .b-left-3{
            margin-top: 30px;
            margin-bottom: 60px;
        }
        .b-left-4{
            width: 350px;
            height: 48px;
            margin-left: 70px;
            background-color:#FF6200;
            border-radius:6px;
            /* text-align: center; */
            /* margin: auto; */
        }
        .bl4-span{
            color: #F3F6F8;
            margin-top: 10px;
            margin-left: 160px;
        }
        .b-left-5{
            width: 360px;
            height: 21px;
            margin-left: 70px;
            /* border: 1px solid red; */
            margin-top: 50px;
        }
        .b15-text{
            width: 88px;
            height: 22px;
            /* border: 1px solid red; */
            
        }
        .b15-text-1{
            width: 69px;
            height: 21px;
            /* border: 1px solid red; */
        }
        .br-text{
            width: 176px;
            height: 30px;
            /* border: 1px solid red; */
            margin-top: 70px;
            margin-left: 95px;
            font-size: 22px;
            color: black;
        }
        .br-img{
            width: 200px;
            height: 200px;
            margin-top: 60px;
            margin-left: 80px;
            border: 1px solid #d6d7d7;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="top">
            <a href="https://www.taobao.com/"><div class="t-left"></div></a>
            <div class="t-right">
                <a href=""><span style="font-size: 12px;margin-right: 50px;color: #666666;">网页无障碍</span></a>
                <a href=""><img src="./消息.png" style="width: 20px; height: 20px;"><span style="font-size: 12px; margin-right: 15px;color: #666666;">"登录改进建议"</span></a>
            </div>
        </div>
        <div class="body">
            <div class="b-left">
                <div class="b-left-1"><a href=""><span style="color: #FF6200;">密码登录</span></a><span style="margin-left: 20px; margin-right: 20px;font-size: 14px;color: #c9c6c6;">|</span><a href=""><span style="color: #11192D;">短信验证</span></a></div>
                <div class="b-left-2"><input type="text" placeholder="&nbsp&nbsp&nbsp&nbsp账号名/邮箱/手机号" style="width: 350px; height: 48px;border-radius: 6px;border: none;background-color: #F3F6F8;"></div>
                <div class="b-left-3"><input type="password" placeholder="&nbsp&nbsp&nbsp&nbsp请输入登录密码" style="width: 350px; height: 48px;border-radius: 6px;border: none;background-color: #F3F6F8;"></div>
                <div class="b-left-4"><div class="bl4-span">登录</div></div>
                <div class="b-left-5">
                    <div class="bl5-text">
                     <img src="./支付平台-支付宝.png" style="width: 18px;height: 18px;margin-left: 10px;">  
                    <a href=""><span style="color: #50607A;font-size: 14px;">支付宝登录</span></a>
                    </div>
                    <div class="bl5-text"><a href=""><span style="color: #50607A;font-size: 14px; margin-left: 20px;">免费注册</span></a></div>
                    <div class="bl5-text"><a href=""><span style="color: #50607A;font-size: 14px;margin-left: 20px;">忘记账号名</span></a></div>
                    <div class="bl5-text"><a href=""><span style="color: #50607A;font-size: 14px;margin-left: 20px;">忘记密码</span></a></div>
                </div>
            </div>
            <div class="b-right">
                <div class="br-text">手机扫码安全登录</div>
                <div class="br-img">
                    <img src="./二维码.png" style="margin: 10px;width: 180px; height: 180px;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

页面三：商品展示页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width`, initial-scale=1.0">
    <title>TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷</title>
    <!-- 该页面仅属于一个比较简单的仿写页面，如若要加入其他商品，只需修改其对应的元素信息即可 -->
    <style>
        *{
            margin: 0px;
        }
        
        .head{
            width: 1284px;
            height: 42px;
            /* border: 1px solid red; */
            text-align: center;
            margin: auto;
        }
        .danti{
            display:inline-block;
        }
        .img1{
        display: block;
        margin-top: 10px;
        padding-top: 42px;
        width: 240px;
        height: 0;
        text-indent: -9999px;
        overflow: hidden;
        background-image: url(https://gw.alicdn.com/imgextra/i4/O1CN01H11jUw1gVppn3YjsM_!!6000000004148-2-tps-480-144.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left center;
        float: left;
        
        }
        .search{
            margin-top: 10px;
            width: 696px;
            height: 40px;
            border: 2px solid red;
             float: left;
             margin-left:50px;
             border-radius: 10px;
        }
        .dianjia{
            /* margin-left:10px; */
            float: left;
            margin: 10px;
            font-size: 15px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .wenzi{
            /* font-family: "宋体"; */
            font-weight: 500;
        }
        .fuhao{
            color:silver;
            font-size: 15px;
        }
        .ipt{
            width: 500px;
            height: 25px;
            margin-top: -5px;
            outline: none;
            border: none;
        }
        .submit{
                width: 80px;
                height: 38px;
                margin-top: -9px;
                float: right;
                background-color:orangered;
                border-radius: 4px;
                color: #fff;
                font-size: 16px;
                border: none;
                font-weight: 700;
                margin-left: 40px;
                }
                .img{
                    width: 240px;
                    height: 240px;
                    background-image: url(https://img.alicdn.com/bao/uploaded/i3/2212786706596/O1CN012uXyWN1yb1HJeCCVw_!!0-item_pic.jpg_q95.jpg_.webp);
                    background-size: cover;
                    text-align: center;
                    margin: 5px;
                    /* padding: 5px; */
                    
                }
                .body{
                    width: 1200px;
                    height: 800px;
                    text-align: center;
                    margin: auto;
                    /* float: left; */
                }
                .danti:hover{
                    border: 1px solid red;
                    border-radius:5px;
                }
                .danti{
                    height: 346px;
                    width: 248px;
                    float: left;
                   
                }
                .img2{
                    background-image: url(https://img.alicdn.com/imgextra/i1/O1CN01nRidmm1UAVxdcYMzF_!!6000000002477-2-tps-104-56.png);
                    width: 30px;
                    height: 16px;
                    margin-top: 5px;
                    margin-right:10px;
                    background-size: cover;
                    
                    float: left;
                }
                
                .wenzi-1{
                    color: #11192d;
                    display: inline-block;
                    font-size: 16px;
                    font-weight: 500;
                    height: 20px;
                    margin-left: 8px;
                    margin-right: 8px;
                    /* max-height: 48px; */
                    word-break: break-all;
                }
                .wenzi-2{
                    color: tomato;
                    float: left;
                    margin-left:10px;
                    margin-top:5px;
                    margin-right:10px;
                    font-size: 13px;
                   
                }
                .wenzi-3{
                    width: 70px;
                    height: 20px;
                    /* float: left; */
                }
                .tubiao{
                    font-size: 14px;
                    line-height: 14px;
                    margin-top:10px;
                    margin-right: 2px;
                    margin-left: 8px;
                    color: tomato;
                    float: left;
                }
                .jiage{
                    font-size: 23px;
                    font-weight: 700;
                    /* line-height: 24px; */
                    float: left;
                    color: tomato;
                    }
                .goumai{
                    color: #50607a;
                    font-size: 14px;
                    line-height: 14px;
                    margin-bottom: 1px;
                    margin-left: 13px;
                    float: left;
                    margin-top: 10px;
                }
    </style>
</head>
<body>
    <div class="head">
       <div class="img1">
        <a  class="biaozhi" href="https://www.taobao.com/?spm=a21bo.jianhua/a.201857.3.5af92a890cX6y6"></a>
    </div> 
        <div class="search">
            <div class="dianjia">
                <a href="https://www.taobao.com"><span class="wenzi">宝贝</span></a>
                <span class="fuhao">&nbsp;|</span>
                <input id="q" name="q" class="ipt">
                <button type="submit" class="submit">搜索</button>
                </div>
           </div>
    </div>
    <br>
    <br>
    <div class="body">
        <ul>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
      <li class="danti">
        <a href="https://detail.tmall.com/item.htm?id=661995603514&spm=a21bo.jianhua/a.201876.d81.5af92a890Ux4uK&scm=1007.40986.369799.0&pvid=2a0137e0-fba6-4717-a1a0-52597a33672c">
       <div class="img"></div>
        <div class="wenzi-1">
            <div class="img2"></div>
           TaoKaeNoi老板仔旗舰店泰国进口儿童即食海苔卷bigroll
        </div>
        <div class="wenzi-2">送运费险</div>
        <div class="wenzi-3">
            <div class="tubiao">¥</div>
            <div class="jiage">47.9</div>
        </div>
        <div class="goumai">1000+人购买</div>
        </li>
    </a>
</ul>
    </div>
</body>
</html>

页面四：淘宝商品分类页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝首页行业市场</title>
    <!-- 注释：该页面由于是仿写，所以并未加入超链接地址，引用需更改各元素文本的名称，同时加入对应的超链接地址，例如女鞋下面的帆布鞋只需要修改其文本信息并加入对应超链接即可直接跳转 -->
    <style>
        div{
            float: left;
        }
        a:hover{
            color: red;
        }
        a{
            text-decoration: none;
        }
        /* 顶部搜索框 */
        .top{
            width: 100%;
            height: 60px;
        }
        .top-img{
            width: 130px;
            height: 60px;
            background-image:url(https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png) ;
            background-size: cover;
            margin-left: 170px;
        }
        .kuang{
            width: 760px;
            height: 42px;
            border: 2px solid red;
            border-radius: 5px;
            margin: 10px;
            margin-left: 270px;
        }
        .span-2{
            width: 560px;
            height: 25px;
            margin-top: 5px;
            outline: none;
            border:none;
        }
        .span-3{
            width: 80px;
                height: 38px;
                margin-top: 1px;
                float: right;
                background-color:orangered;
                border-radius: 4px;
                color: #fff;
                font-size: 16px;
                border: none;
                font-weight: 700;
                margin-left: 40px;
        }
        .span-1{
            font-size: 15px;
            margin-top: 10px;
            margin-right: 10px;
            margin-bottom: 10px;
            margin-left: 12px;
            font-weight: 400;
            color: black;
        }
        /* 头部 */
        .head{
            margin-top: 20px;
            width: 100%;
            height: 35px;
            
        }
        .app{
            width: 91px;
            height: 28px;
            border-bottom:1.5px solid red;
            font-size: 16px;
            color:#333333;
            font-family: "宋体";
            margin-left: 200px;
            padding-left: 30px;
            padding-top: 10px;
        }
        .tese{
            width: 91px;
            height: 28px;
            border-bottom:1.5px solid red;
            font-size: 16px;
            color:#333333;
            font-family: "宋体";
            padding-left: 30px;
            padding-top: 10px;
        }
        .title{
            width: 91px;
            height: 28px;
            border-top:1.5px solid red;
            border-left:1.5px solid red;
            border-right:1.5px solid red;
            font-size: 16px;
            color:#FF4400;
            font-family: "宋体";
            padding-left: 30px;
            padding-top: 10px;
        }
        .xiahuaxian{
            width: 850px;
            height: 38px;
            border-bottom:1.5px solid red;
        }
        /* 主体 */
        .body{
            margin-top: 80px;
            margin-left: 170px;
            width: 1240px;
            height: 1100px;
            /* border: 1px solid red; */
        }
        .b1{
            height: 800px;
            width: 70px;
            /* border: 1px solid red; */
            margin-left: 70px;
            margin-top:100px;
        }
        .nan{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgb(240, 41, 75);
            margin-top: 10px;
            margin-left: 10px;
        }
        .other{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #f5f5f5;
            margin-top: 15px;
            margin-left: 20px;
        }
        .style{
            width: 1050px;
            height: 360px;
            /* border: 1px solid red; */
            /* margin-top: -50px; */
            margin-left: 40px;
        }
        .b2-title{
            width: 1050px;
            height: 30px;
            font-size: 16px;
            color: #F56293;
            border-bottom:2px solid #F56293;
        }
        .li{
            width: 333px;
            height: 54px;
            margin-top:20px;
            list-style-type: none;
            /* border: 1px solid rebeccapurple; */
            float: left;
            margin-left: -30px;
        }
        .li-1{
            width: 333px;
            height: 54px;
            margin-top:20px;
            list-style-type: none;
            /* border: 1px solid rebeccapurple; */
            float: left;
            /* margin-left: -30px; */
        }
        .small-title{
            width: 68px;
            height: 22px;
            font-size: 14px;
            color: black;
        }
        .text{
            width: 252px;
            height: 44px;
            /* border: 1px solid red; */
        }
        
    </style>
</head>
<body>
    <div class="top">
       <a href="https://www.taobao.com"><div class="top-img"></div></a>
        <div class="kuang">
            <span class="span-1">宝贝</span>
            <span style="color: #6C6C6C; margin-top:10px ;font-size: 14px;">|</span>
            <input type="text" class="span-2">
            <button type="submit" class="span-3"><a href="" style="color: #fff;">搜索</a></button>
        </div>
    </div>
    <div class="head">
        <a href=""><div class="app">app下载</div></a>
        <a href=""><div class="tese">特色市场</div></a>
        <a href=""><div class="title">主题市场</div></a>
        <div class="xiahuaxian"></div>
    </div>
    <div class="body">
        <div class="b1">
            <div class="nan"><a href=""><img src="./衣服.png" style="margin-top: 8px; margin-left: 8px;"></a></div>
            <div class="other"><a href=""><img src="./高跟鞋.png" alt=""></a></div>
            <div class="other"><a href=""><img src="./奶瓶.png" alt=""  style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./粉底.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./纸杯蛋糕.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./钻石_o.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./滚刷.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./沙发.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./购物车空.png" astyle="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./汽车.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./手机.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./电脑.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./爱心.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./客服.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./篮球.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./植物.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
            <div class="other"><a href=""><img src="./刀叉.png" style="width: 25px;height: 25px;margin-left: 2px;"></a></div>
        </div>
        <div class="b2">
            <div class="style">
                <div class="b2-title">
                    <a href="">女装男装</a>
                </div>
                <ul>
                    <li class="li">
                        <a href=""><div class="small-title">潮流女装</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">羽绒服</span></a>
                            <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">连衣裙</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">毛呢衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">轻薄装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">羽绒服</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">连衣裙</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">毛呢衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">轻薄装</span></a>
                        </div>
                    </li>
                    <li class="li-1">
                        <a href=""><div class="small-title">时尚男装</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬新品</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬外套</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">时尚套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">爸爸潮牌</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬新品</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬外套</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">时尚套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">爸爸潮牌</span></a>
                        </div>
                    </li>
                    <li class="li-1">
                        <a href=""><div class="small-title">家居服</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">睡衣套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">男士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">女士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">情侣睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">睡衣套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">男士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">女士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">情侣睡衣</span></a>
                        </div>
                    </li>
                    <li class="li">
                        <a href=""><div class="small-title">潮流女装</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">羽绒服</span></a>
                            <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">连衣裙</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">毛呢衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">轻薄装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">羽绒服</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">连衣裙</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">毛呢衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">轻薄装</span></a>
                        </div>
                    </li>
                    <li class="li-1">
                        <a href=""><div class="small-title">时尚男装</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬新品</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬外套</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">时尚套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">爸爸潮牌</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬新品</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬外套</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">时尚套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">爸爸潮牌</span></a>
                        </div>
                    </li>
                    <li class="li-1">
                        <a href=""><div class="small-title">家居服</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">睡衣套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">男士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">女士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">情侣睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">睡衣套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">男士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">女士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">情侣睡衣</span></a>
                        </div>
                    </li>
                    <li class="li">
                        <a href=""><div class="small-title">潮流女装</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">羽绒服</span></a>
                            <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">连衣裙</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">毛呢衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">轻薄装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">羽绒服</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">连衣裙</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">毛呢衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">轻薄装</span></a>
                        </div>
                    </li>
                    <li class="li-1">
                        <a href=""><div class="small-title">时尚男装</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬新品</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬外套</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">时尚套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">爸爸潮牌</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬新品</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬外套</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">时尚套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">爸爸潮牌</span></a>
                        </div>
                    </li>
                    <li class="li-1">
                        <a href=""><div class="small-title">家居服</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">睡衣套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">男士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">女士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">情侣睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">睡衣套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">男士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">女士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">情侣睡衣</span></a>
                        </div>
                    </li>
                    <li class="li">
                        <a href=""><div class="small-title">潮流女装</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">羽绒服</span></a>
                            <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">连衣裙</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">毛呢衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">轻薄装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">羽绒服</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">连衣裙</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">毛呢衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">轻薄装</span></a>
                        </div>
                    </li>
                    <li class="li-1">
                        <a href=""><div class="small-title">时尚男装</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬新品</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬外套</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">时尚套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">爸爸潮牌</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬新品</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">秋冬外套</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">时尚套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">爸爸潮牌</span></a>
                        </div>
                    </li>
                    <li class="li-1">
                        <a href=""><div class="small-title">家居服</div></a>
                        <div class="text">
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">睡衣套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">男士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">女士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">情侣睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">睡衣套装</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">男士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">女士睡衣</span></a>
                            <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">情侣睡衣</span></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="style">
            <div class="b2-title">
                <a href="">鞋类箱包</a>
            </div>
            <ul>
                <li class="li">
                    <a href=""><div class="small-title">女鞋</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">潮流女包</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">精品男包</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                    </div>
                </li>
                <li class="li">
                    <a href=""><div class="small-title">女鞋</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">潮流女包</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">精品男包</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                    </div>
                </li>
                <li class="li">
                    <a href=""><div class="small-title">女鞋</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">潮流女包</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">精品男包</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                    </div>
                </li>
                <li class="li">
                    <a href=""><div class="small-title">女鞋</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">帆布鞋</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">潮流女包</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">人气潮款</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">精品男包</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">商务精装</span></a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="style">
            <div class="b2-title">
                <a href="">母婴用品</a>
            </div>
            <ul>
                <li class="li">
                    <a href=""><div class="small-title">宝宝奶粉</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">贝英美</span></a>
                        <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">可瑞康</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">雅培氏</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">美赞成</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">贝英美</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">可瑞康</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">雅培氏</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">美赞成</span></a>

                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">海外直邮</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘奶粉</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘辅食</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘营养</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">直邮花王</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘奶粉</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘辅食</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘营养</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">直邮花王</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">玩具</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">沙滩戏水</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">早教启蒙</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">拼插益智</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">遥控模型</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">沙滩戏水</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">早教启蒙</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">拼插益智</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">遥控模型</span></a>
                    </div>
                </li>
                <li class="li">
                    <a href=""><div class="small-title">宝宝奶粉</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">贝英美</span></a>
                        <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">可瑞康</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">雅培氏</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">美赞成</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">贝英美</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">可瑞康</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">雅培氏</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">美赞成</span></a>

                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">海外直邮</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘奶粉</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘辅食</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘营养</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">直邮花王</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘奶粉</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘辅食</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘营养</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">直邮花王</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">玩具</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">沙滩戏水</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">早教启蒙</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">拼插益智</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">遥控模型</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">沙滩戏水</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">早教启蒙</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">拼插益智</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">遥控模型</span></a>
                    </div>
                </li>
                <li class="li">
                    <a href=""><div class="small-title">宝宝奶粉</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">贝英美</span></a>
                        <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">可瑞康</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">雅培氏</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">美赞成</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">贝英美</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">可瑞康</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">雅培氏</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">美赞成</span></a>

                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">海外直邮</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘奶粉</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘辅食</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘营养</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">直邮花王</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘奶粉</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘辅食</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘营养</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">直邮花王</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">玩具</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">沙滩戏水</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">早教启蒙</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">拼插益智</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">遥控模型</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">沙滩戏水</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">早教启蒙</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">拼插益智</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">遥控模型</span></a>
                    </div>
                </li>
                <li class="li">
                    <a href=""><div class="small-title">宝宝奶粉</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">贝英美</span></a>
                        <!-- 案例，用同一种，要想不同，只需要修改文本信息及添加超链接地址即可 -->
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">可瑞康</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">雅培氏</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">美赞成</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">贝英美</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">可瑞康</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">雅培氏</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin: 10px; font-size: 12px; color: #6C6C6C;">美赞成</span></a>

                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">海外直邮</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘奶粉</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘辅食</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘营养</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">直邮花王</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘奶粉</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘辅食</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">淘淘营养</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">直邮花王</span></a>
                    </div>
                </li>
                <li class="li-1">
                    <a href=""><div class="small-title">玩具</div></a>
                    <div class="text">
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">沙滩戏水</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">早教启蒙</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">拼插益智</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">遥控模型</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">沙滩戏水</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">早教启蒙</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">拼插益智</span></a>
                        <a href=""><span style="width: 48px;height: 22px; margin-top:10px; margin-left: 10px; margin-bottom: 10px; font-size: 12px; color: #6C6C6C;">遥控模型</span></a>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</body>
</html>