模仿淘宝主页

Posted 你的指尖-有改变世界的力量

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了模仿淘宝主页相关的知识,希望对你有一定的参考价值。

图片资源链接:http://pan.baidu.com/s/1jHAdLNg 密码:5uo1    

代码资源链接:链接:http://pan.baidu.com/s/1slRaUIT 密码:8kin

html 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <style type="text/css">

    </style>
</head>
<body>
    <div class="header">
        <div class="w">
            <div class="top_left">
                <div class="top_left_1">
                    <a href="#" class="top_left_1_a">淘宝</a>
                    <span class="top_left_1_span"></span>
                </div>
                <div class="top_left_2">
                    <a href="#" class="top_left_2_a">消息</a>
                    <span class="top_left_2_span"></span>
                </div>
                <div class="top_left_3">
                    <a href="#" class="top_left_3_a">手机淘宝</a>
                    <a href="#"><img src="img/qqq.gif" alt="逛周末淘宝"></a>
                </div>
            </div>
            <div class="top_right">
                <div class="top_right_1">
                    <a href="#" class="top_right_1_a">我的淘宝</a>
                    <span class="top_right_1_span"></span>
                </div>
                <div class="top_right_2">
                    <a href="#" class="top_right_2_a">购物车</a>
                    <span class="top_right_2_span"></span>
                </div>
                <div class="top_right_3">
                    <a href="#" class="top_right_3_a">收藏夹</a>
                    <span class="top_right_3_span"></span>
                </div>
                <div class="top_right_4">
                    <a href="#" class="top_right_4_a">商品分类</a>
                    <span class="top_right_4_span">|</span>
                </div>
                <div class="top_right_5">
                    <a href="#" class="top_right_5_a">卖家中心</a>
                    <span class="top_right_5_span"></span>
                </div>
                <div class="top_right_6">
                    <a href="#" class="top_right_6_a">联系客服</a>
                    <span class="top_right_6_span"></span>
                </div>
                <div class="top_right_7">
                    <a href="#" class="top_right_7_a">网站导航</a>
                    <span class="top_right_7_span"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="head_main">
        <div class="w">
            <div class="head_main_img">
                <a href="#"><img src="img/logo.gif" alt="logo图片"></a>
            </div>
            <div class="head_main_search">
                <div class="head_main_search_box">
                    <div class="head_main_search_box_left">
                        <a href="#" class="top_left_1_a">宝贝</a>
                        <span class="top_left_1_span"></span>
                    </div>
                    <input type="search" class="head_main_search_box_input">
                    <input type="button" class="head_main_search_box_button" value="搜索">

                </div>
                <div class="head_main_search_a">
                    <a href="#" class="head_main_search_a">高级搜索</a>
                </div>
                <div class="head_main_search_down">
                    <a href="#">女士凉鞋</a>
                    <a href="#">男士T恤</a>
                    <a href="#">连衣裙</a>
                    <a href="#">时尚女包</a>
                    <a href="#">女士T恤</a>
                    <a href="#">雪纺衫</a>
                    <a href="#">中老年女装</a>
                    <a href="#">风衣</a>
                    <a href="#">童装</a>
                    <a href="#">孕妇装</a>
                    <a href="#">运动套装</a>
                    <a href="#">打底裤</a>
                    <a href="#">蚊帐</a>
                    <a href="#" class="head_main_search_down_a">更多</a>
                </div>

            </div>
            <div class="head_main_right">
                <a href="#">手机淘宝</a>
                <img src="img/code.png" alt="">
            </div>
        </div>
    </div>
    <div class="center_top">
        <div class="w">
            <div class="center_top_left">
            <h5>商品服务分类</h5>
                <div class="center_top_left_ul">
                    <ul>
                        <li class="center_top_left_li_1">
                            <h3>服装内衣</h3>
                        </li>
                        <li class="center_top_left_li_2">
                            <h3>鞋包配饰</h3>
                        </li>
                        <li class="center_top_left_li_3">
                            <h3>运动户外</h3>
                        </li>
                        <li class="center_top_left_li_4">
                            <h3>珠宝手表</h3>
                        </li>
                        <li class="center_top_left_li_5">
                            <h3>手机数码</h3>
                        </li>
                        <li class="center_top_left_li_6">
                            <h3>家电办公</h3>
                        </li>
                        <li class="center_top_left_li_7">
                            <h3>护肤彩妆</h3>
                        </li>
                        <li class="center_top_left_li_8">
                            <h3>母婴用品</h3>
                        </li>
                        <li class="center_top_left_li_9">
                            <h3>家纺居家</h3>
                        </li>
                        <li class="center_top_left_li_10">
                            <h3>家具建材</h3>
                        </li>
                        <li class="center_top_left_li_11">
                            <h3>美食特产</h3>
                        </li>
                        <li class="center_top_left_li_12">
                            <h3>日用百货</h3>
                        </li>
                        <li class="center_top_left_li_13">
                            <h3>汽车摩托</h3>
                        </li>
                        <li class="center_top_left_li_14">
                            <h3>文化娱乐</h3>
                        </li>
                        <li class="center_top_left_li_15">
                            <h3>本地生活</h3>
                        </li>
                        <li class="center_top_left_li_16">
                            <h3>虚拟服务</h3>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="center_top_right">
                <div class="center_top_right_head">
                    <a href="#" class="center_top_right_head_a">天猫</a>
                    <a href="#" class="center_top_right_head_a">聚划算</a>
                    <a href="#" class="center_top_right_head_a">二手</a>
                    <span>|</span>
                    <a href="#">拍卖</a>
                    <a href="#">一淘</a>
                    <a href="#">电器城</a>
                    <a href="#">Hitao粉妆</a>
                    <a href="#">旅行</a>
                    <a href="#">云手机</a>
                    <a href="#">特色中国</a>
                    <img src="img/ad.gif" alt="">
                    <span class="center_top_right_head_s"><a href="#">消费者保障</a></span>
                </div>
                <div class="center_top_right_left">
                    <div class="center_top_right_left_lunbo1">
                        <!--<ul>-->
                            <!--<li><a href="#"><img src="" alt=""></a></li>-->
                            <!--<li><a href="#"><img src="" alt=""></a></li>-->
                            <!--<li><a href="#"><img src="" alt=""></a></li>-->
                            <!--<li><a href="#"><img src="" alt=""></a></li>-->
                            <!--<li><a href="#"><img src="" alt=""></a></li>-->
                            <!--<li><a href="#"><img src="" alt=""></a></li>-->
                        <!--</ul>-->
                        <a href="#"><img src="img/1.jpg" alt=""></a>
                        <!--上面这个是轮播图,要写成-->
                        <div class="center_top_right_left_lunbo1_btn1">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>

                    </div>
                    <a href="#"><img src="img/6.6.jpg" alt=""></a>
                    <div class="center_top_right_left_lunbo2">
                        <ul>
                            <li>
                                <a href="#"><img src="img/01.png" alt=""></a>
                                <a href="#"><img src="img/02.jpg" alt=""></a>
                                <a href="#"><img src="img/03.png" alt=""></a>
                                <a href="#"><img src="img/04.png" alt=""></a>
                            </li>
                            <!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a-->
                                    <!--href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
                            <!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a-->
                                    <!--href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
                            <!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a-->
                                    <!--href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
                            <!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img-->
                                    <!--src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
                            <!--<li><a href=""><img src="" alt=""></a><a href=""><img src="" alt=""></a><a href=""><img-->
                                    <!--src="" alt=""></a><a href=""><img src="" alt=""></a></li>-->
                        </ul>
                        <div class="center_top_right_left_lunbo2_btn2">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <a href="#"><img src="img/15.jpg" alt=""></a>
                </div>
                <div class="center_top_right_right">
                    <div class="center_top_right_right_top">
                        <ul>
                            <li class="li_1">公告</li>
                            <li>规则</li>
                            <li>论坛</li>
                            <li>安全</li>
                            <li>公益</li>
                        </ul>
                        <div class="center_top_right_right_top_a">
                            <a href="#">淘宝2014:开放多样性</a>
                            <a href="#"> 舌尖中国二季 天猫首尝</a>
                            <a href="#">阿里通信自建计费系统</a>
                            <a href="#">来往首届419宇宙节</a>
                        </div>
                    </div>
                    <div class="center_top_right_right_center">
                        <div class="center_top_right_right_center_box">
                            <img src="img/user-head.jpg" alt="" width="62px" height="62px">
                            <div class="center_top_right_right_center_box_right">
                                <h3>Hi天之狼2011</h3>
                                <a href="#" class="a_1">
                                    <span class="s1"></span>
                                    <span class="s2">零淘金币抵钱</span>
                                </a>
                                <a href="#" class="a_2">会员俱乐部</a>
                             </div>
                        </div>
                        <div class="center_top_right_right_center_down">
                            <a href="#" class="a1">登录</a>
                            <a href="#">免费注册</a>
                            <a href="#">免费开店</a>
                        </div>


                    </div>
                    <div class="center_top_right_right_down">
                        <h3>便民服务</h3>

                        <div>
                            <a href="#">
                                <h5><img src="img/phone.png" alt=""></h5>
                                <h6>话费</h6>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <h5><img src="img/game.png" alt=""></h5>
                                <h6>游戏</h6>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <h5><img src="img/plane.png" alt=""></h5>
                                <h6>旅行</h6>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <h5><img src="img/save.png" alt=""></h5>
                                <h6>保险</h6>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <h5><img src="img/18.png" alt=""></h5>
                                <h6>彩票</h6>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <h5><img src="img/move.png" alt=""></h5>
                                <h6>电影</h6>
                            </a>
                        </div> <div>
                        <a href="#">
                            <h5><img src="img/eat.png" alt=""></h5>
                            <h6>点外卖</h6>
                        </a>
                    </div> <div>
                        <a href="#">
                            <h5><img src="img/money.png" alt=""></h5>
                            <h6>理财</h6>
                        </a>
                    </div> <div>
                        <a href="#">
                            <h5><img src="img/book.png" alt=""></h5>
                            <h6>电子书</h6>
                        </a>
                    </div> <div>
                        <a href="#">
                            <h5><img src="img/miusc.png" alt=""></h5>
                            <h6>音乐</h6>
                        </a>
                    </div>
                        <div>
                            <a href="#">
                                <h5><img src="img/bag.png" alt=""></h5>
                                <h6>水电煤</h6>
                            </a>
                        </div>
                    <div>
                        <a href="#">
                            <h5><img src="img/....png" alt=""></h5>
                            <h6>请期待</h6>
                        </a>
                    </div>




                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="center_top2">
        <div class="w">
            <div class="center_top2_left center_top2_left1">
                <h3>主题市场</h3>
                <ul>
                    <li><a href="#">爱美女人</a></li>
                    <li><a href="#">品质男人</a></li>
                    <li><a href="#">淘宝二手</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">品牌街</a></li>
                    <li><a href="#">汽车生活</a></li>
                    <li><a href="#">花嫁新娘</a></li>
                    <li><a href="#">孕婴童</a></li>
                </ul>
            </div>
            <div class="center_top2_left center_top2_left2">
                <h3 class="h3_2">特色购物</h3>
                <ul>
                    <li><a href="#">爱美女人</a></li>
                    <li><a href="#">品质男人</a></li>
                    <li><a href="#">淘宝二手</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">品牌街</a></li>
                    <li><a href="#">汽车生活</a></li>
                    <li><a href="#">花嫁新娘</a></li>
                    <li><a href="#">孕婴童</a></li>
                </ul>
            </div>
            <div class="center_top2_left center_top2_left3">
                <h3 class="h3_3">当前热点</h3>
                <ul>
                    <li><a href="#">爱美女人</a></li>
                    <li><a href="#">品质男人</a></li>
                    <li><a href="#">淘宝二手</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">品牌街</a></li>
                    <li><a href="#">汽车生活</a></li>
                    <li><a href="#">花嫁新娘</a></li>
                    <li><a href="#">孕婴童</a></li>
                </ul>
            </div>
            <div class="center_top2_left center_top2_left4">
                <h3 class="h3_4">更多精彩</h3>
                <ul>
                    <li><a href="#">爱美女人</a></li>
                    <li><a href="#">品质男人</a></li>
                    <li><a href="#">淘宝二手</a></li>
                    <li><a href="#">全球购</a></li>
                    <li><a href="#">品牌街</a></li>
                    <li><a href="#">汽车生活</a></li>
                    <li><a href="#">花嫁新娘</a></li>
                    <!--<li><a href="#">孕婴童</a></li>-->
                    <input type="button" class="center_top2_btn" value="更多" >
                </ul>
            </div>

        </div>
    </div>
    <div class="main">
        <div class="w">
            <div class="main_left">
                <div class="main_left_top">
                    <h1>万能的淘宝</h1>
                    <span>下面有30个特色市场等你来逛哦!</span>
                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                <div class="main_left_center">
                    <div>
                        <span class="s1">|</span>
                        <span class="s2">女人爱搭配</span>
                    </div>
                    <div class="main_left_center_left">
                        <img src="img/show1.png" alt="">
                        <h1>
                            <a href="#">有到一年雪绒坊</a>
                        </h1>
                        <span>优雅的温柔</span>
                    </div>
                    <div class="main_left_center_right">
                        <div class="main_left_center_right_top">
                            <a href="#">
                                <img src="img/shooes.jpg" alt="">
                                <p>春夏皮鞋</p>
                            </a>
                            <a href="#">
                                <img src="img/c.gif" alt="">
                                <p>春季亮色搭</p>
                            </a>
                            <table>
                                <tr>
                                    <td><a href="#">潮流女装</a></td>
                                    <td><a href="#">小个子美搭</a></td>
                                </tr>
                                <tr>
                                    <td><a href="#">胖MM显瘦</a></td>
                                    <td><a href="#">复古多包袋</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>




            </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                <div class="main_left_center">
                    <div>
                        <span class="s1">|</span>
                        <span class="s2">女人爱搭配</span>
                    </div>
                    <div class="main_left_center_left">
                        <img src="img/show1.png" alt="">
                        <h1>
                            <a href="#">有到一年雪绒坊</a>
                        </h1>
                        <span>优雅的温柔</span>
                    </div>
                    <div class="main_left_center_right">
                        <div class="main_left_center_right_top">
                            <a href="#">
                                <img src="img/shooes.jpg" alt="">
                                <p>春夏皮鞋</p>
                            </a>
                            <a href="#">
                                <img src="img/c.gif" alt="">
                                <p>春季亮色搭</p>
                            </a>
                            <table>
                                <tr>
                                    <td><a href="#">潮流女装</a></td>
                                    <td><a href="#">小个子美搭</a></td>
                                </tr>
                                <tr>
                                    <td><a href="#">胖MM显瘦</a></td>
                                    <td><a href="#">复古多包袋</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>




            </div>
                <div class="main_left_box">
                <div class="main_left_center">
                    <div>
                        <span class="s1">|</span>
                        <span class="s2">女人爱搭配</span>
                    </div>
                    <div class="main_left_center_left">
                        <img src="img/show1.png" alt="">
                        <h1>
                            <a href="#">有到一年雪绒坊</a>
                        </h1>
                        <span>优雅的温柔</span>
                    </div>
                    <div class="main_left_center_right">
                        <div class="main_left_center_right_top">
                            <a href="#">
                                <img src="img/shooes.jpg" alt="">
                                <p>春夏皮鞋</p>
                            </a>
                            <a href="#">
                                <img src="img/c.gif" alt="">
                                <p>春季亮色搭</p>
                            </a>
                            <table>
                                <tr>
                                    <td><a href="#">潮流女装</a></td>
                                    <td><a href="#">小个子美搭</a></td>
                                </tr>
                                <tr>
                                    <td><a href="#">胖MM显瘦</a></td>
                                    <td><a href="#">复古多包袋</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>




            </div>
                <div class="main_left_box">
                <div class="main_left_center">
                    <div>
                        <span class="s1">|</span>
                        <span class="s2">女人爱搭配</span>
                    </div>
                    <div class="main_left_center_left">
                        <img src="img/show1.png" alt="">
                        <h1>
                            <a href="#">有到一年雪绒坊</a>
                        </h1>
                        <span>优雅的温柔</span>
                    </div>
                    <div class="main_left_center_right">
                        <div class="main_left_center_right_top">
                            <a href="#">
                                <img src="img/shooes.jpg" alt="">
                                <p>春夏皮鞋</p>
                            </a>
                            <a href="#">
                                <img src="img/c.gif" alt="">
                                <p>春季亮色搭</p>
                            </a>
                            <table>
                                <tr>
                                    <td><a href="#">潮流女装</a></td>
                                    <td><a href="#">小个子美搭</a></td>
                                </tr>
                                <tr>
                                    <td><a href="#">胖MM显瘦</a></td>
                                    <td><a href="#">复古多包袋</a></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>




            </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="#">复古多包袋</a></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>




                </div>
                <div class="main_left_box">
                    <div class="main_left_center">
                        <div>
                            <span class="s1">|</span>
                            <span class="s2">女人爱搭配</span>
                        </div>
                        <div class="main_left_center_left">
                            <img src="img/show1.png" alt="">
                            <h1>
                                <a href="#">有到一年雪绒坊</a>
                            </h1>
                            <span>优雅的温柔</span>
                        </div>
                        <div class="main_left_center_right">
                            <div class="main_left_center_right_top">
                                <a href="#">
                                    <img src="img/shooes.jpg" alt="">
                                    <p>春夏皮鞋</p>
                                </a>
                                <a href="#">
                                    <img src="img/c.gif" alt="">
                                    <p>春季亮色搭</p>
                                </a>
                                <table>
                                    <tr>
                                        <td><a href="#">潮流女装</a></td>
                                        <td><a href="#">小个子美搭</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="#">胖MM显瘦</a></td>
                                        <td><a href="

以上是关于模仿淘宝主页的主要内容,如果未能解决你的问题,请参考以下文章

拼夕夕(模仿淘宝登录界面)

模仿淘宝评分

模仿京东淘宝的物流跟踪模板样式

模仿淘宝卖家的店铺分类

模仿淘宝侧边栏的滚动条

Flutter 颜色渐变及模仿淘宝渐变关注按钮