淘宝页面

Posted 2020-11-02 web--yang

tags:

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淘宝网 - 淘！我喜欢</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/taobao.css"/>
</head>
<body>

    <!-- 顶部-->
    <header>
        <nav>
            <ul>
                <li><a class="denglu" href="">亲，请登录</a></li>
                <li><a href="">免费注册</a></li>
                <li><a href="">手机逛淘宝</a></li>
            </ul>
            <ul>
                <li><a href="">我的淘宝 <i class="tubiao1"></i> </a>
                    <ol>
                        <li><a href="">已买到的宝贝</a></li>
                        <li><a href="">我的足迹</a></li>
                    </ol>
                </li>
                <li><a href=""> <i class="tubiao2"></i> 购物车<span class="gouwuche">0</span> <i class="tubiao1"></i></a>
                    <ol  class="gouwuche1">
                        <li>您购物车里还没有任何宝贝。<a class="gouwuche2" href="">查看我的购物车</a></li>
                    </ol>
                </li>
                <li><a href=""> <i class="tubiao3"></i> 收藏夹 <i class="tubiao1"></i></a>
                    <ol>
                        <li><a href="">收藏的宝贝</a></li>
                        <li><a href="">收藏的店铺</a></li>
                    </ol>
                </li>
                <li class="wuxiaoguo"><a href="">商品分类</a></li>
                <li class="shuxian">|</li>
                <li><a href="">卖家中心 <i class="tubiao1"></i></a>
                    <ol>
                        <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>
                    </ol>
                </li>
                <li><a href="">联系客户 <i class="tubiao1"></i></a>
                    <ol>
                        <li><a href="">消费者客户</a></li>
                        <li><a href="">卖家客户</a></li>
                    </ol>
                </li>
                <li><a href=""> <i class="tubiao4"></i> 网站导航 <i class="tubiao1"></i></a>
                    <ol>
                        <li><a href="">大牌女装</a></li>
                        <li><a href="">大牌男装</a></li>
                        </ol>
                </li>
            </ul>
        </nav>
    </header>
    <!-- logo 搜索栏-->
    <div class="souluolan">
        <div class="souluolan1">
            <div class="souluolan1top">
                <!-- LOGO-->
                <div class="logo">
                    <img src="../image/logo.png" />
                </div>
                <!-- 搜索框-->
                <div class="souluolan1top1">
                    <section class="souluolantop">
                        <a class="baobei" href="">宝贝</a>
                        <a href="">天猫</a>
                        <a href="">店铺</a>
                    </section>
                    <section>
                        <input type="text" placeholder="家居摆设填欣喜" /><button>搜索</button>
                      <span><a href="">高级搜索</a></span>
                        <i class="tubiao5"></i> <i class="tubiao6"></i>

                    </section>
                </div>
            </div>
           <div class="souluolan1middle">
               <ul>
                   <li><a href="">新款连衣裙</a></li>
                   <li><a href="">四件套</a></li>
                   <li><a href="">潮流T恤</a></li>
                   <li><a href="">时尚女鞋</a></li>
                   <li><a href="">短裤</a></li>
                   <li><a href="">半身裙</a></li>
                   <li><a href="">男士外套</a></li>
                   <li><a href="">墙纸</a></li>
                   <li><a href="">行车记录仪</a></li>
                   <li><a href="">新款男鞋</a></li>
                   <li><a href="">耳机</a></li>
                   <li><a href="">更多 &gt</a></li>
               </ul>
           </div>
            <div class="souluolan1bottom">
                <h2>主题市场 <i class="tubiao7"></i></h2>
                <ul>
                    <li><a href="">天猫</a></li>
                    <li><a href="">聚划算</a></li>
                    <li><a href="">天猫超市</a></li>
                </ul>
                <ul>
                    <li class="shuxian2">|</li>
                    <li><a href="">淘抢购</a></li>
                    <li><a href="">电器城</a></li>
                    <li><a href="">司法拍卖</a></li>
                    <li><a href="">中国质造</a></li>
                    <li><a href="">特色中国</a></li>
                </ul>
                <ul>
                    <li class="shuxian2">|</li>
                    <li><a href="">飞猪旅行</a></li>
                    <li><a href="">智能生活</a></li>
                    <li><a href="">苏宁易购</a></li>
                </ul>
            </div>
       </div>
    </div>
    <!-- 第一大块-->
    <div class="firstblock">
        <!-- 左大块-->
        <div class="leftblock1">
            <!-- 上边大块-->
            <div class="topblock1">
                <!-- 左小小块-->
                <div class="topblock1left">
                    <!-- 大列表-->
                    <div>
                        <ul>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>
                            <li>
                                <ol>
                                    <li></li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> / </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li>  /  </li>
                                    <li><a href=""> 女装 </a></li>
                                    <li> &gt </li>
                                </ol>
                            </li>



                        </ul>
                    </div>
                    <!-- 列表下方小图-->
                    <img src="../image/qietu.png" />
                </div>
                <!-- 中小小块-->
                <div class="topblock1middle">
                    <div class="beijingtu"></div>
                    <p><i class></i>  天猫必逛  <span class="menpai">热门品牌，天天上天猫!</span><span class="yanse1"><span class="yanse">3</span>/6</span></p>
                    <ul>
                        <li><img src="../image/qietu21.png" /></li>
                        <li><img src="../image/qietu21.png" /></li>
                        <li><img src="../image/qietu21.png" /></li>
                        <li><img src="../image/qietu21.png" /></li>
                    </ul>
                </div>
                <!-- 右小小块-->
                <div class="topblock1right">
                    <a href=""> <img src="../image/qietu02.png" /></a>
                    <p><a href="">今日热卖</a></p>
                    <a href=""><img src="../image/qietu03.png" /></a>
                </div>
            </div>
            <!-- 下边小块-->
            <div class="bottomblock1">
                <ul>
                    <li>
                        <div><img src="../image/qietu04.png" /></div>
                        <div>
                            <p>书呆子</p>
                            <p>书卷气更迷人</p>
                            <p><i class="tubiao8"></i>人气248006</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="../image/qietu04.png" /></div>
                        <div>
                            <p>书呆子</p>
                            <p>书卷气更迷人</p>
                            <p><i class="tubiao8"></i>人气248006</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="../image/qietu04.png" /></div>
                        <div>
                            <p>书呆子</p>
                            <p>书卷气更迷人</p>
                            <p><i class="tubiao8"></i>人气248006</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="../image/qietu04.png" /></div>
                        <div>
                            <p>书呆子</p>
                            <p>书卷气更迷人</p>
                            <p><i class="tubiao8"></i>人气248006</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="../image/qietu04.png" /></div>
                        <div>
                            <p>书呆子</p>
                            <p>书卷气更迷人</p>
                            <p><i class="tubiao8"></i>人气248006</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 右大块-->
        <div class="rightblock1">
            <!-- 第一块-->
            <div>
            <img src="../image/login-header.png" />
            <p>Hi!你好</p>
            <p><i class="tubiao9"></i> <span class="font2">领取金币抵钱</span>  或去   <span class="font2">会员俱乐部</span></p>
            <p>
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">开店</a>
            </p>
            </div>
            <!-- 第二块-->
            <div class="dierkuai">
                <ul>
                    <li>公告
                        <ol>
                            <li><a href="">马云访阿根廷签战略合作  总统里根亲自推销产品</a></li>
                            <li><a href="">马云阿阿根廷讲跨境贸易  淘宝发布空巢行动 </a></li>
                        </ol>
                    </li>
                    <li>规则
                        <ol>
                            <li><a href="">关于新增订单服务 云标签工具，30秒打标</a></li>
                            <li><a href="">淘宝网数字娱乐市场  淘宝网数字娱乐市场 </a></li>
                        </ol>
                    </li>
                    <li>论坛
                        <ol>
                            <li><a href="">40天小白变设计师中   差评功能升级</a></li>
                            <li><a href="">陌生人拼团上线2018年新零售趋势 </a></li>
                        </ol>
                    </li>
                    <li>安全
                        <ol>
                            <li><a href="">公益“护苗”行动招募你愿意加入我们吗？</a></li>
                            <li><a href="">卖家注意：风险通报！售假获刑又起诉！ </a></li>
                        </ol>
                    </li>
                    <li>公益
                        <ol>
                            <li><a href="">九寨沟地震紧急救援公益宝贝 卖家准入公告</a></li>
                            <li><a href="">致百万商家的感谢信公益宝贝 卖家发票索取 </a></li>
                        </ol>
                    </li>
                </ul>

                </div>
            <!-- 第三块-->
            <div class="disankuai">
                <ul>
                    <li>
                        <ol>
                            <li>
                                <img src="../image/phone.png" />
                               <p><a href="">充话费</a></p>
                            </li>
                            <li>
                                <img src="../image/phone.png" />
                                <p><a href="">充话费</a></p>
                            </li>
                            <li>
                                <img src="../image/phone.png" />
                               <p><a href="">充话费</a></p>
                            </li>
                        </ol>
                    </li><li>
                        <ol>
                            <li>
                                <img src="../image/phone.png" />
                               <p><a href="">充话费</a></p>
                            </li>
                            <li>
                                <img src="../image/phone.png" />
                                <p><a href="">充话费</a></p>
                            </li>
                            <li>
                                <img src="../image/phone.png" />
                               <p><a href="">充话费</a></p>
                            </li>
                        </ol>
                    </li><li>
                        <ol>
                            <li>
                                <img src="../image/phone.png" />
                               <p><a href="">充话费</a></p>
                            </li>
                            <li>
                                <img src="../image/phone.png" />
                                <p><a href="">充话费</a></p>
                            </li>
                            <li>
                                <img src="../image/phone.png" />
                               <p><a href="">充话费</a></p>
                            </li>
                        </ol>
                    </li><li>
                        <ol>
                            <li>
                                <img src="../image/phone.png" />
                               <p><a href="">充话费</a></p>
                            </li>
                            <li>
                                <img src="../image/phone.png" />
                                <p><a href="">充话费</a></p>
                            </li>
                            <li>
                                <img src="../image/phone.png" />
                               <p><a href="">充话费</a></p>
                            </li>
                        </ol>
                    </li>

                </ul>
            </div>
            <!-- 第四块-->
            <div class="disikuai">
                <h3>阿里APP</h3>
                <p><a href="">更多 &gt</a></p>
            </div>
            <!-- 第五块-->
            <div class="diwukuai">
              <p>
                  <a href=""><img src="../image/app-logo.png" /></a>
                  <a href=""><img src="../image/app-logo.png" /></a>
                  <a href=""><img src="../image/app-logo.png" /></a>
                  <a href=""><img src="../image/app-logo.png" /></a>
                  <a href=""><img src="../image/app-logo.png" /></a>

              </p>
                <p>
                    <a href=""><img src="../image/app-logo.png" /></a>
                    <a href=""><img src="../image/app-logo.png" /></a>
                    <a href=""><img src="../image/app-logo.png" /></a>
                    <a href=""><img src="../image/app-logo.png" /></a>
                    <a href=""><img src="../image/app-logo.png" /></a>
              </p>
            </div>
            </div>
        </div>
    <!-- 第二大块-->
    <div class="dierdakuai">
        <!-- 左边大块-->
        <div class="dierdakuaileft">
            <!-- 第1小块-->
            <div class="di1xixiaokuai">
                <h1><i class="tubiao10"></i> 我常逛的</h1>
                <p><a href="">更多</a></p>
            </div>
            <!-- 第2小块-->
            <div class="di2xixiaokuai">
                <!-- 第2小块左-->
                <div class="di2xixiaokuaileft">
                    <div class="di2xixiaokuaileft1">
                        <img src="../image/qietu05.png" />
                        <ul>
                            <li class="likai">热门TOP</li>
                            <li><a href="">童装新款</a></li>
                            <li><a href="">童装新款</a></li>
                            <li><a href="">连衣裙裙</a></li>
                            <li><a href="">童装新款</a></li>
                            <li><a href="">童装新款</a></li>
                            <li><a href="">男丝袜袜</a></li>
                            <li><a href="">童装新款</a></li>
                            <li><a href="">打底裤</a></li>
                        </ul>
                    </div>
                    <div class="di2xixiaokuaileft2">
                        <div class="di2xixiaokuaileft2top">
                            <section class="di2xixiaokuaileft21">
                                <div><img src="../image/qietu06.png" /></div>
                                <div><img src="../image/qietu06.png" /></div>
                            </section>
                            <section class="di2xixiaokuaileft22" >
                                <img src="../image/qietu07.png" />
                            </section>
                            <section class="di2xixiaokuaileft23">
                                <img src="../image/qietu08.png" />
                            </section>
                        </div>
                        <div class="di2xixiaokuaileft2bottom">
                            <section class="di2xixiaokuaileft2bottom1"><img src="../image/qietu09.png" /></section>
                            <section class="di2xixiaokuaileft2bottom2">
                                <img src="../image/qietu10.png" />
                                <img src="../image/qietu11.png" />
                            </section>
                        </div>
                    </div>

                </div>
                <!-- 第2小块右-->
                <div class="di2xixiaokuairight">
                    <div class="di2xixiaokuaileft">
                        <div class="di2xixiaokuaileft1">
                            <img src="../image/qietu05.png" />
                            <ul>
                                <li class="likai">热门TOP</li>
                                <li><a href="">童装新款</a></li>
                                <li><a href="">童装新款</a></li>
                                <li><a href="">连衣裙裙</a></li>
                                <li><a href="">童装新款</a></li>
                                <li><a href="">童装新款</a></li>
                                <li><a href="">男丝袜袜</a></li>
                                <li><a href="">童装新款</a></li>
                                <li><a href="">打底裤</a></li>
                            </ul>
                        </div>
                        <div class="di2xixiaokuaileft2">
                            <div class="di2xixiaokuaileft2top">
                                <section class="di2xixiaokuaileft21">
                                    <div><img src="../image/qietu06.png" /></div>
                                    <div><img src="../image/qietu06.png" /></div>
                                </section>
                                <section class="di2xixiaokuaileft22" >
                                    <img src="../image/qietu07.png" />
                                </section>
                                <section class="di2xixiaokuaileft23">
                                    <img src="../image/qietu08.png" />
                                </section>
                            </div>
                            <div class="di2xixiaokuaileft2bottom">
                                <section class="di2xixiaokuaileft2bottom1"><img src="../image/qietu09.png" /></section>
                                <section class="di2xixiaokuaileft2bottom2">
                                    <img src="../image/qietu10.png" />
                                    <img src="../image/qietu11.png" />
                                </section>
                            </div>
                        </div>

                </div>

            </div>

        </div>
            <!-- 第3小块-->
            <div class="di3xixiaokuai">
                <a href=""><img src="../image/qietu12.png" /></a>
            </div>
            <!-- 第4小块-->
            <div class="di1xixiaokuai">
                <h1><i class="tubiao10"></i> 时尚爆料王</h1>
                <p><a href="">更多</a></p>
            </div>
            <!-- 第5小块-->
            <div class="di5xixiaokuai">
                <div class="logo1">

                    <img src="../image/fashion-logo.png" />
                    <div>
                        <section class="biankuang1">
                            <a href=""> <img src="../image/pcldmzzi.png" /></a>
                            <div>软萌针织衫</div>
                        </section>
                        <section class="biankuang2">
                          <div><a href=""> <img src="../image/bkviblb.png" /></a></div>
                            <div><a href=""> <img src="../image/nyufvjxt.png" /></a></div>
                        </section>
                    </div>
                </div>
                <div class="jiyoujia">
                    <div class="logo2">
                        <img src="../image/jiybjw.png" />
                    </div>
                    <ul>
                        <li>
                            <ol>
                                <li class="biankuang3"><a href=""><img src="../image/hkugho.png" /></a></li>
                                <li class="biankuang5"><a href=""><img src="../image/xdlm.png" /></a></li>
                            </ol>
                        </li>
                        <li>
                            <ol>
                                <li class="biankuang4"><a href=""><img src="../image/uvhu.png" /></a></li>
                                <li ><a href=""><img src="../image/uvhu.png" /></a></li>
                            </ol>
                        </li>
                    </ul>
                </div><div class="logo1">

                    <img src="../image/fashion-logo.png" />
                    <div>
                        <section class="biankuang1">
                            <a href=""> <img src="../image/pcldmzzi.png" /></a>
                            <div>软萌针织衫</div>
                        </section>
                        <section class="biankuang2">
                          <div><a href=""> <img src="../image/bkviblb.png" /></a></div>
                            <div><a href=""> <img src="../image/nyufvjxt.png" /></a></div>
                        </section>
                    </div>
                </div>
                <div class="jiyoujia">
                    <div class="logo2">
                        <img src="../image/jiybjw.png" />
                    </div>
                    <ul>
                        <li>
                            <ol>
                                <li class="biankuang3"><a href=""><img src="../image/hkugho.png" /></a></li>
                                <li class="biankuang5"><a href=""><img src="../image/xdlm.png" /></a></li>
                            </ol>
                        </li>
                        <li>
                            <ol>
                                <li class="biankuang4"><a href=""><img src="../image/uvhu.png" /></a></li>
                                <li ><a href=""><img src="../image/uvhu.png" /></a></li>
                            </ol>
                        </li>
                    </ul>
                </div>

            </div>
            <!-- 第6小块-->
            <div class="di6xixiaokuai"></div>
        </div>
        <!-- 右边小块-->
        <div class="dierdakuairight">
            <!-- 上面-->
            <div class="dierdakuairighttop">
                <div class="dierdakuairighttop1">
                    <img src="../image/tkbktbtc.png" />
                    <a href="">更多 &gt</a>
                </div>
                <div class="dierdakuairighttop2">
                    <img src="../image/men.png" />
                    <div >
                        <h2><a href="">工作需要放松，享受下午茶时光</a></h2>
                        <p><a href="">你有吃下午茶的习惯吗？最早关于下午茶的由来，可以追溯到英国17世纪</a></p>
                    </div>
                </div>
            </div>
            <!-- 下面-->
            <div class="dierdakuairightbottom" >
                <img src="../image/ybhkho.png" />
                <ul>
                    <li class="rightliansuo">
                        <a href=""><img src="../image/555555.png" /></a>
                        <div >
                            <h3><a href="">印花长袖T恤</a></h3>
                            <p> 趣味十足的人像印花设计，让整个造型充满灵性和气氛。</p>
                            <p>6666 人都说好</p>

                        </div>
                    </li>
                    <li class="rightliansuo">
                        <a href=""><img src="../image/555555.png" /></a>
                        <div >
                            <h3><a href="">印花长袖T恤</a></h3>
                            <p> 趣味十足的人像印花设计，让整个造型充满灵性和气氛。</p>
                            <p>6666 人都说好</p>

                        </div>
                    </li>
                    <li class="rightliansuo">
                        <a href=""><img src="../image/555555.png" /></a>
                        <div >
                            <h3><a href="">印花长袖T恤</a></h3>
                            <p> 趣味十足的人像印花设计，让整个造型充满灵性和气氛。</p>
                            <p>6666 人都说好</p>

                        </div>
                    </li>
                    <li class="rightliansuo">
                        <a href=""><img src="../image/555555.png" /></a>
                        <div >
                            <h3><a href="">印花长袖T恤</a></h3>
                            <p> 趣味十足的人像印花设计，让整个造型充满灵性和气氛。</p>
                            <p>6666 人都说好</p>

                        </div>
                    </li>
                    <li class="rightliansuo">
                        <a href=""><img src="../image/555555.png" /></a>
                        <div >
                            <h3><a href="">印花长袖T恤</a></h3>
                            <p> 趣味十足的人像印花设计，让整个造型充满灵性和气氛。</p>
                            <p>6666 人都说好</p>

                        </div>
                    </li>
                    <li class="rightliansuo">
                        <a href=""><img src="../image/555555.png" /></a>
                        <div >
                            <h3><a href="">印花长袖T恤</a></h3>
                            <p> 趣味十足的人像印花设计，让整个造型充满灵性和气氛。</p>
                            <p>6666 人都说好</p>

                        </div>
                    </li>

                </ul>
                <p class="pp"><i class="tubiao11"></i>  <a href="">   换一组看看</a></p>
            </div>
        </div>
    </div>
    <!-- 第三大块-->
    <div class="disandakuai">
        <!-- 第一小块-->
        <div class="disandakuai1">
            <h1><i class="tubiao12"></i>   热卖单品</h1>
            <p><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="">运动鞋</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="">运动鞋</a><a href="">运动鞋</a><a href="">运动鞋</a><a
                    href="">运动鞋</a></p>
        </div>
        <!-- 第二小块-->
        <div class="disandakuai2">
            <div class="santu">
                <div>
                    <div>
                        <a href="">  <img src="../image/qietu14.png" /></a>
                        <h1>￥ 799.00</h1>
                        <p>月销两笔</p>
                        <p><a href="">真皮时尚  高档箱包  头层牛皮包  欧美时尚鳄鱼纹  气质女包</a></p>
                        <p><a href="">评价   0 </a>    <a href=""> 收藏  70  </a></p>
                    </div>
                    <div>
                        <a href=""><img src="../image/77.png" /> </a>
                        <a href=""> <img src="../image/88.png" /></a>
                    </div>
                </div>
                <div>
                    <img src="../image/add-two.png" />
                </div>
            </div>
            <div class="santu">
                <div>
                    <div>
                        <a href=""> <img src="../image/qietu14.png" /></a>
                        <h1>￥ 799.00</h1>
                        <p>月销两笔</p>
                        <p><a href="">真皮时尚  高档箱包  头层牛皮包  欧美时尚鳄鱼纹  气质女包</a></p>
                        <p><a href="">评价   0 </a>    <a href=""> 收藏  70  </a></p>
                    </div>
                    <div>
                        <a href=""><img src="../image/77.png" /> </a>
                            <a href=""> <img src="../image/88.png" /></a>
                    </div>
                </div>
                <div>
                    <img src="../image/add-three.png" />
                </div>
            </div>
            <div class="santu">
                <div>
                    <div>
                        <a href=""><img src="../image/qietu14.png" /></a>
                        <h1>￥ 799.00</h1>
                        <p>月销两笔</p>
                        <p><a href="">真皮时尚  高档箱包  头层牛皮包  欧美时尚鳄鱼纹  气质女包</a></p>
                        <p><a href="">评价   0 </a>    <a href=""> 收藏  70  </a></p>
                    </div>
                    <div>
                        <a href=""><img src="../image/77.png" /> </a>
                        <a href=""> <img src="../image/88.png" /></a>
                    </div>
                </div>
                <div>
                    <img src="../image/ad-one.png" />
                </div>
            </div>

    </div>



    </div>
    <!-- 第四大块-->
    <div class="disikuai">
        <ul>
            <li>
            <h1><i class="tubiao13"></i> 消费者保障</h1>
            <p><a href="">保障范围</a><a href="">退货退款流程</a><a href="">服务中心</a><a href="">更多特色服务</a></p>
        </li>
            <li>
                <h1><i class="tubiao13"></i> 消费者保障</h1>
                <p><a href="">保障范围</a><a href="">退货退款流程</a><a href="">服务中心</a><a href="">更多特色服务</a></p>
            </li>
            <li>
                <h1><i class="tubiao13"></i> 消费者保障</h1>
                <p><a href="">保障范围</a><a href="">退货退款流程</a><a href="">服务中心</a><a href="">更多特色服务</a></p>
            </li>
            <li>
                <h1><i class="tubiao13"></i> 消费者保障</h1>
                <p><a href="">保障范围</a><a href="">退货退款流程</a><a href="">服务中心</a><a href="">更多特色服务</a></p>
            </li>

        </ul>
    </div>
    <!-- 第五大块-->
    <footer>
        <div class="diwudakuai">
            <div class="diwudakuaitop">
                <p><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="">聚划算</a><a href="">聚划算</a><a href="">聚划算</a><a href="">聚划算</a><a href="">聚划算</a><a href="">聚划算</a><a href="">聚划算</a><a href="">聚划算</a></p>
                <p><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="">阿里体育</a><a href="">虾米</a><a href="">网商银行</a></p>
            </div>
            <p class="dibu1"><span><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="">网站地图</a><a href="">法律声明及隐私权政策</a><a href="">知识产权</a></span><span>? 2003-现在 Taobao.com 版权所有</span></p>
            <p class="dibu2"><span>网络文化经营许可证：浙网文[2016]0268-027号</span><span>增值电信业务经营许可证：浙B2-20080224</span><span>互联网违法和不良信息举报电话：0571-81683755 [email protected]</span></p>
            <p class="dibu3"><i class="tubiao14"></i> 浙公网安备 33010002000078号 </p>
            <img src="../image/22.png" />
        </div>

    </footer>
    <!-- 固定块-->
    <ul>
        <li class="guding1"><a href="">我常逛的</a></li>
        <li class="guding2"><a href="">时尚</a></li>
        <li class="guding3"><a href="">品质</a></li>
        <li class="guding4"><a href="">特色</a></li>
        <li class="guding5"><a href="">实惠</a></li>
        <li class="guding6"><a href="">猜你喜欢</a></li>
        <li class="guding7"><a href="">反馈</a></li>
        <li class="guding8"><a href="">高能预警</a>
            <ol>
                <li><img src="../image/timg.gif" /></li>
            </ol>

        </a></li>
    </ul>

</body>
</html>

body
{
    background-color: #f4f4f4;
    color: #3C3C3C;
}
a
{
    text-decoration: none;
    font-size: 12px;
}
a:hover
{
    color:#ff5502 ;
}
li
{
    list-style: none;
}
header
{
    height: 35px;
    width: 100%;
    background-color: #f5f5f5;
    border-bottom: 1px solid #eee;



}
nav
{
    width: 1200px;
    height: 35px;
    margin: 0px auto;

}
nav a
{
    font-size: 12px;
    color: #6C6C6C;
    line-height: 35px;
}
nav>ul:first-child
{
    float: left;
}
nav>ul:last-child
{
    float: right;
}
.denglu
{
    color: #f26c60;
}
nav>ul:last-child>li
{
    float: left;
    text-align: center;
    position: relative;
    width: 93px;
    box-sizing: border-box;
    z-index: 999;

}
nav>ul:first-child>li
{
    float: left;
    padding: 0px 5px ;
    text-align: center;
}
.shuxian
{
    font-size: 10px ;
    font-weight: bold;
    color: #ddd;
    line-height: 34px;
    width: 1px !important;
}
nav a:hover
{
   color: #ff5502;
}
.tubiao1
{
    width: 8px;
    height: 4px;
   vertical-align: middle;
    background-image: url("../image/nav-icon.png");
    display: inline-block;
   margin: 0px 5px ;
}
.tubiao2
{
    width: 12px;
    height: 11px;
    line-height: 35px;
    background-image: url("../image/nav-cart.png");
    display: inline-block;
    vertical-align: middle;
}
.gouwuche
{
    color: #ff5502 ;
    font-weight: bold;
}
.tubiao3
{
    width: 12px;
    height: 11px;
    line-height: 35px;
    background-image: url("../image/nav-start.png");
    display: inline-block;
    vertical-align: middle;
}
.tubiao4
{
    width: 7px;
    height: 7px;
    line-height: 35px;
    background-image: url("../image/nav-ham.png");
    display: inline-block;
    vertical-align: middle;
}
nav ol
{
    display: none;
    border-left:1px solid  #ddd;;
    border-right:1px solid  #ddd;;
    border-bottom:1px solid #ddd;
    width: 91px;

}
nav>ul:last-child>li:hover
{
    background-color: white;
    border-left:1px solid  #ddd;;
    border-right:1px solid  #ddd;;
    border-bottom:1px solid transparent;
}
nav>ul>.shuxian:hover
{
   border: transparent;
    background-color: #f5f5f5 ;
}
nav>ul>.wuxiaoguo:hover
{
    border: transparent;
    background-color: #f5f5f5 ;
}

nav>ul>li:hover ol
{
    display: block;
    position: absolute;
    left: -1px ;
    z-index: 99999;
}
.gouwuche1
{
    width: 300px;
    font-size: 12px;
    color: black;
    height: 60px;
    line-height: 60px;
}
.gouwuche2
{
    background-color: #ff5d02;
    color: white;
    font-size: 12px;
    padding: 5px;
}
.gouwuche2:hover
{
    color: white;
}






/*搜索栏*/
.souluolan
{
    width: 100%;
    height: 166px;
    background-color: white;

}
.souluolan1
{
    width: 1200px;
    height: 166px;
    margin: 0px auto;
}
.souluolan1top
{
    width: 100%;
    height: 66px;
    padding-top: 30px;
    overflow: hidden;
}
.souluolan1top>div
{
    float: left;
}
.logo
{
    width: 190px;
    height: 66px;
    text-align: center;
    margin-right: 77px;
}

.souluolan1top img
{
   height: 66px ;
}
.souluolan1top1
{
    width: 668px;
    height: 66px;
    position: relative;
}

.souluolantop>a
{
    width: 56px ;
    height: 26px;
    display: inline-block;
    line-height: 26px;
    text-align: center  ;
    border-radius:8px 8px 0px 0px  ;
}
.souluolantop>a
{
    color: #ff5502;
}
.baobei
{
    color: white !important;
    background-color: #ff5502;
    font-weight: bold;
}
.souluolantop>a:not(:first-child):hover
{
    background-color:#FFEEE5 ;
}

input
 {
     border: 3px solid  #ff5502;
    padding: 0px 30px ;
     width: 500px;
     height: 40px;
     box-sizing: border-box;
     outline: none;
 }
button
{
    width: 100px;
    font-size: 18px;
    height: 41px;
    color: white;
    background-color:#ff5502 ;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    border: none;
    vertical-align: middle;
}

.souluolan1top1 span>a
{
    color: #6C6C6C;
    font-size: 12px;
}
.tubiao5
{
    width: 14px;
    height: 14px;
    background-image: url("../image/search-input.png");
    display: inline-block;
    position: absolute;
   left: 15px;
    bottom: 13px;
}
.tubiao6
{
    width: 17px;
    height: 14px;
    background-image: url("../image/search-camera.png");
    display: inline-block;
    position: absolute;
    right: 180px;
    bottom: 13px;

}








.souluolan1middle
{
    width: 600px;
    height: 36px;
    margin: 0px 0px 0px 270px ;
}
.souluolan1middle>ul>li:not(:last-child)
{
    float: left;
    padding-right:8px  ;
}
.souluolan1middle>ul>li:last-child
{
    float: right;
}
.souluolan1middle>ul>li>a
{
   color: #6C6C6C ;
}
.souluolan1middle>ul>li>a:hover
{
    color: #ff5502;
}
.txu
 {
    color: #ff5502  !important;
 }




.souluolan1bottom
{
    width: 100%;
    height: 34px;
    overflow: hidden;
}
.souluolan1bottom>h2
{
    width: 190px;
    height: 34px;
    box-sizing: border-box;
    color: white;
    background-color: #ff6706;
    line-height: 34px;
    float: left;
    padding-left: 10px;
    position: relative;
}
.tubiao7
{
    width: 15px;
    height: 13px;
    vertical-align: middle;
    background-image: url("../image/menu-item-ham.png");
    display: inline-block;
    position: absolute;
    right: 10px; top: 10px;

}

.souluolan1bottom>ul
{
    float: left;
    overflow: hidden;
}
.souluolan1bottom>ul>li
{
    float: left;
    line-height: 34px;
    padding-left: 2px;
}

.souluolan1bottom>ul:not(:first-of-type)>li
{
    padding-left: 16px;
}
.souluolan1bottom>ul:not(:first-of-type)>li>a
{
    color: black;
    font-size: 14px;
    font-weight: 600;
}
.souluolan1bottom>ul:not(:first-of-type)>li>a:hover
{
    color: #ff6706;

}
.souluolan1bottom>ul:first-of-type>li>a
{
    color: #ff6706;
    font-size: 16px;
    font-weight: bold;
    padding: 5px 12px;
}
.souluolan1bottom>ul:first-of-type>li>a:hover
{
    background-color: #ff6706 ;
    color: white;
    border-radius:  8px 8px 8px 8px;
}
.shuxian2
{
    font-size: 12px;
    color: #dddde3;
}







/*第一大块*/


.firstblock
{
    width: 1200px;
    height: 608px;
    margin: 0px auto;
    overflow: hidden;
}
/*<!-- 左大块-->*/
.leftblock1
{
    width: 890px;
    height: 608px;
    float: left;
}
.topblock1
{
    width: 890px;
    height: 522px;
    overflow: hidden;
}

/* <!-- 左小小块-->*/
.topblock1left
{
    width: 190px;
    height:522px;
    float: left;
    background-color: #ff6706;
    margin-right: 10px;

}
.topblock1left>div>ul
{
   padding: 8px 12px 10px 10px ;
}
.topblock1left>div>ul>li>ol
{
    overflow: hidden;
}
.topblock1left>div>ul>li>ol>li
{
    float: left;
    font-size: 12px ;
    color: white;
    /*padding-top: 16px;*/
    /*padding-left: 2px;*/
    font-weight: bold;
    margin-right: 4px;
}
.topblock1left>div>ul>li>ol>li:first-child
{
    width: 17px;    
    height: 15px;
    display: inline-block;
    background-image: url("../image/menu-item-icon.png");
    vertical-align: bottom;
}
.topblock1left>div>ul>li>ol>li:last-child
{
   float: right;
}
.topblock1left>div>ul>li:not(:first-child)
{
    padding-top: 14px;
}


.topblock1left a
{
    font-size: 12px;
    font-weight: bold;
    color: white;
}
/*.topblock1left>div>ul>li:hover>ol>li>a*/
/*{*/
    /*background-color: white;*/
    /*color: #ff5502;*/
/*}*/
.topblock1left>div>ul>li>ol>li>a:hover
{
    text-decoration: underline;
    background-color: white;
    color: #ff5d02;

}

.topblock1left img
{
    height: 40px;
}








/* <!-- 中小小块-->*/
.topblock1middle
{
    width: 520px;
    height:522px;
    float: left;
}
.beijingtu
{
    width: 520px;
    height: 280px;
    background-image: url("../image/qietu01.png");
    animation: beijing 40s infinite ;
    /*transition: all 1s;*/
    margin-top: 10px;
}

@keyframes beijing {

    20%{
    background-image: url("../image/XX1.jpg");
}
    40% {
        background-image: url("../image/XX2.jpg");
    }
    60%{
        background-image: url("../image/XX3.jpg");
    }

    80%{
        background-image: url("../image/XX4.jpg");
    }
    100%{
        background-image: url("../image/qietu01.png");
    }
}
.topblock1middle>p>i
{
    width: 49px;
    height: 17px;
    vertical-align: bottom;
    background-image: url("../image/tianCat.gif");
    display: inline-block;
}
.topblock1middle>p
{
    color: #3d3d3d;
    font-weight: bold;
    overflow: hidden;
    font-size: 14px;
    height: 19px;
    margin-top: 10px;
    overflow: hidden;
    border-bottom: 2px solid #c12e28;
}
.menpai
{
    font-size: 12px;
    color: #898e8e;
}
.yanse
{
    color: red;
}
.yanse1
{
    font-size: 12px;
    float: right;
}
.topblock1middle>ul
{
    width: 100%;
    height: 204px;
    overflow: hidden;
}
.topblock1middle>ul>li
{
    width: 25%;
    box-sizing: border-box;
    float: left;
    height: 204px;
    opacity: 1;
}
.topblock1middle>ul>li:not(:last-child)
{
    border-right: 1px solid #ebebeb;
}
.topblock1middle>ul>li:hover
{
    opacity: 0.8;
}
























/*<!-- 右小小块-->*/
.topblock1right
{
    width: 160px;
    height:522px;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
}
.topblock1right>p>a
{
 font-size: 12px;
    color: #abadb5;
}
.topblock1right>p
{
    margin: 12px 0px 6px ;
}
.topblock1right>a:hover
{
    opacity: 0.8;
}












/*下边小块*/
.bottomblock1
{
    width: 890px;
    height:77px;
    overflow: hidden;
    margin-top: 10px;
    background-color: white;
}

.tubiao8
{
    width: 14px;
    height: 16px;
    vertical-align: middle;
    background-image: url("../image/qietu23.png");
    display: inline-block;
}
.bottomblock1>ul>li
{
    width: 20%;
    height: 77px;
    float: left;
    overflow: hidden;
}
.bottomblock1>ul>li>div
{
    float: left;
}
.bottomblock1>ul>li>div:last-child>p:nth-child(1)
{
    font-size: 14px;
    color: #a17560;
    font-weight: bold;
    padding-top: 10px;
}
.bottomblock1>ul>li>div:last-child>p:nth-child(2)
{
    font-size: 12px;
    color: #9b7960;
    padding-top: 4px;
}
.bottomblock1>ul>li>div:last-child>p:nth-child(3)
{
    font-size: 12px;
    color: #9a9a9a;
    padding-top: 10px;
}
.bottomblock1>ul>li:hover>div:last-child>p:nth-child(1),.bottomblock1>ul>li:hover>div:last-child>p:nth-child(2)
{
    text-shadow: 1px 1px 1px  #9b7960 ;
}










/*<!-- 右大块-->*/
.rightblock1
{
    width: 292px;
    height: 608px;
    float: right;
    background-color: white;
    margin-top: 10px;
}
.rightblock1>div:first-child
{
    width: 292px;
    height: 150px;
    text-align: center;
    font-size: 12px;
    padding-top: 14px;
    border-bottom: 2px  solid #eeeeee;
}
.tubiao9
{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-image: url("../image/gold-money.png");
    display: inline-block;
}
.font2
{
    color: #ff4a02;
}
.rightblock1>div:first-child>p:nth-of-type(1)
{
    margin: 6px 0px 10px ;
}

.rightblock1>div:first-child a
{
    width: 92px;
    height: 25px ;
    font-size: 14px ;
    color: white;
    background-color: #ff6606;
    padding-left: 6px;
    margin-top: 4px;
    display: inline-block;
    box-sizing: border-box;
    line-height: 25px;
    font-weight: bold;
}
.dierkuai
{
    width: 292px;
    height: 100px;
    overflow: hidden;
    padding-top: 14px;
    position: relative;
    text-align: center;
}
.dierkuai>ul
{
    padding-left: 15px;
}
.dierkuai>ul>li
{
    float: left;
    height: 25px;
    width: 50px;
    /*padding: 0px 6px ;*/
    border-bottom: 2px solid transparent;
    text-align: center;
    font-size: 14px;
}
.dierkuai>ul>li>ol>li>a
{
    color: black;
    font-size: 12px;
}
.dierkuai>ul>li>ol>li>a:hover
{
    color:#ff6606 ;
}
.dierkuai>ul>li>ol>li:first-child>a
{
    color:#ff6606 ;
}

.dierkuai>ul>li>ol
{
    width: 292px;
    text-align: left;
    padding-top: 5px;
}
.dierkuai>ul>li>ol>li
{
    padding-top: 5px;
}
.dierkuai>ul>li:nth-child(1)>ol
{
    position: absolute;
    left: 10px;
    top: 40px;
}
.dierkuai>ul>li:nth-child(2)>ol
{
    position: absolute;
    left: 10px;
    top: 10px;
    display: none;
}


.dierkuai>ul>li:nth-child(3)>ol
{
    position: absolute;
    left: 10px;
    top: 10px;
    display: none;
}


.dierkuai>ul>li:nth-child(4)>ol
{
    position: absolute;
    left: 10px;
    top: 10px;
    display: none;

}

.dierkuai>ul>li:nth-child(5)>ol
{
    position: absolute;
    left: 10px;
    top: 10px;
    display: none;
}
.dierkuai>ul>li:nth-child(1):hover
{
    border-bottom: 2px solid #ff6606;
}
.dierkuai>ul>li:nth-child(2):hover
{
    border-bottom: 2px solid #ff6606;
}
.dierkuai>ul>li:nth-child(3):hover
{
    border-bottom: 2px solid #ff6606;
}
.dierkuai>ul>li:nth-child(4):hover
{
    border-bottom: 2px solid #ff6606;
}
.dierkuai>ul>li:nth-child(5):hover
{
    border-bottom: 2px solid #ff6606;
}

.disankuai
{
    width: 292px;
    height: 200px;
    border:2px solid #eaeaea ;
    border-left:1px solid transparent;
    /*box-sizing: border-box;*/

}
.disankuai>ul
{
    overflow: hidden;
}
.disankuai>ul>li
{
    float: left;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
}
.disankuai>ul>li>ol>li
{
    width: 100%;
    height: 65px;
    border: 1px solid #eaeaea;
    border-left:1px solid transparent ;
    border-top:1px solid transparent ;
}
.disankuai>ul>li>ol>li>img
{
    padding: 12px 0px 6px ;
}
.disankuai>ul>li>ol>li:hover img
{
    transform:scale(1.1);
}
.disankuai>ul>li>ol>li:hover a
{
    color: #ff6606;
}
.disikuai
{
    margin: 10px 0px 6px ;
    overflow: hidden;
}
.disikuai>p
{
    float: right;
}
.disikuai>p>a
{
    font-size: 12px;
    color: #3d3d3d;
}
.disikuai>p>a:hover
{
    color: #ff6606;
}
.disikuai>h3
{
    font-size: 14px;
    font-weight: bold;
    float: left;
    padding: 4px 0px 0px 12px ;
}

.diwukuai>p img
{
    padding-left: 18.5px;
    padding-bottom: 6px;
    display: inline-block;
}
.diwukuai>p img:hover
{
    box-shadow: 5px 5px 5px 5px  color: #ff6606;
}










/*第二大块*/
.dierdakuai
{
    width: 1200px;
    height: 884px;
    margin: 10px auto;
    overflow: hidden;
}


/*左边大块*/
.dierdakuaileft
{
    width: 890px ;
    height: 884px;
    float: left;
    overflow: hidden;
}
/*<!-- 第1小块-->*/
.di1xixiaokuai
{
    width: 890px ;
    height: 38px;
    overflow: hidden;
}
.tubiao10
{
    width: 19px;
    height: 19px;
    vertical-align: middle;
    background-image: url("../image/i-shopping-icon.png");
    display: inline-block;
}
.di1xixiaokuai>h1
{
    font-weight: bold;
    font-size: 18px;
     text-align: center;
    float: left;
     padding-left: 400px;
    padding-top: 10px;
}
.di1xixiaokuai>p
{
    width: 60px;
    height: 20px;
    float: right;
    background-color: white;
    border-radius: 20px 20px 20px 20px ;
    text-align: center;
    line-height: 20px;
    margin-top: 12px;
    /*box-sizing: border-box;*/
}
.di1xixiaokuai>p>a
{
    color: #3d3d3d;
}
.di1xixiaokuai>p:hover
{
    background-color: #ff5022;
}
.di1xixiaokuai>p:hover>a
{
    color: white;
}

/*<!-- 第2小块-->*/
.di2xixiaokuai
{
    width: 890px ;
    height: 364px;
    overflow: hidden;
}

/* <!-- 第2小块左-->*/
.di2xixiaokuaileft
{
    width: 440px;
    height: 364px;
    float: left;
    overflow: hidden;
}
.di2xixiaokuairight
{
    width: 440px;
    height: 364px;
    float: right;
    overflow: hidden;
}

.di2xixiaokuaileft1
{
    width: 100px;
    height: 364px;
    float: left;
    background-color: #ff3386;
}
.di2xixiaokuaileft1>ul
{
    padding: 10px 0px  0px 8px ;
    color: white;
    font-size: 14px;
    font-weight: bold;

}

.di2xixiaokuaileft1>ul a
{
    font-size: 12px;
    color: white;
    padding: 4px 8px ;
    background-color: #ff5b9e;
    margin-bottom: 4px;
    display: inline-block;
    transition: all 1s;
}
.di2xixiaokuaileft1>ul>li>a:hover
{
    transform: translate(20px,0px );
}
.likai
{
    padding-bottom: 5px;
}













.di2xixiaokuaileft2
{
    width: 340px;
    height: 364px;
    float: left;
    overflow: hidden;
    border: 2px solid #ffc0d9;
    border-left:0px solid transparent;
    box-sizing: border-box;
}
.di2xixiaokuaileft2top
{
    width: 340px;
    height: 200px;
    overflow: hidden;
}
.di2xixiaokuaileft21
{
    width: 100px;
    float: left;
}
.di2xixiaokuaileft21>div
{
    border-bottom: 1px solid #efefef;
}
.di2xixiaokuaileft21>div>img
{
    width: 100px;
}
.di2xixiaokuaileft22
{
    width: 100px;
    height: 200px;
    float: left;
    border-left: 1px solid #efefef;
    box-sizing: border-box;
}
.di2xixiaokuaileft23
{
    width: 140px;
    float: left;
    border-left: 1px solid #efefef;
    box-sizing: border-box;
}





.di2xixiaokuaileft2bottom
{
    width: 340px;
    height: 164px;
    overflow: hidden;
}
.di2xixiaokuaileft2bottom1
{
    width: 200px;
    float: left;
    text-align: center;
    line-height: 164px;
}

.di2xixiaokuaileft2bottom2
{
    width: 140px;
    float: left;
}
.di2xixiaokuaileft2bottom2 img
{
    width: 140px;
}
.di2xixiaokuaileft2 img
{
    opacity: 1;
}
.di2xixiaokuaileft2 img:hover
{
    opacity: 0.8;
}







/*<!-- 第3小块-->*/
.di3xixiaokuai
{
    width: 890px ;
    height:70px;
    margin: 20px 0px ;
}
.di3xixiaokuai img
{
    width: 890px;
}

/*<!-- 第4小块-->*/

/*<!-- 第5小块-->*/
.di5xixiaokuai
{
    width: 890px ;
    height: 260px;
    overflow: hidden;
}
.di5xixiaokuai>div
{
    float: left;
    width: 220px;
    height: 260px;
    overflow: hidden;
    background-color: white;
}
.di5xixiaokuai>div:not(:first-child)
{
    margin-left: 3px;
}
.logo1
{
    width: 224px;
    height: 40px;
    text-align: center;
    line-height: 40px;
}
.di5xixiaokuai section
{
    float: left;
    width: 110px;
    height: 220px;


}
.jiyoujia>ul>li>ol>li
{
    float: left;
    width: 110px;
    height: 110px;
    box-sizing: border-box;

    opacity: 0.8;
}
.jiyoujia>ul>li>ol>li>a>img
{
    width: 108px;
}
.biankuang1
{
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    position: relative;
}
.biankuang1>div
{
    width: 90px;
    height: 50px;
    background-color: #ff0256;
    color: white;
    text-align: center;
    line-height: 40px;
    position: absolute;
    bottom: -40px;
    left: 10px;
    font-size: 12px;
    transition: all 0.5s;
}
.biankuang1:hover>div
{
    bottom: 12px;
    left: 10px;
}









.biankuang2>div
{
    border-left: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    width: 110px;
    height: 110px;
    line-height: 110px;
    box-sizing: border-box;
    opacity: 1;
}
.biankuang2>div:hover
{
    opacity: 0.8;
}
.logo2
{
    width: 220px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    padding-top: 2px;
}
.biankuang3
{
        border-right: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    box-sizing: border-box;

}
.biankuang4
{
    border-right: 1px solid #f0f0f0;
    box-sizing: border-box;
}
.biankuang5
{
    border-bottom: 1px solid #f0f0f0;
}
.jiyoujia>ul>li>ol>li:hover
{
    opacity: 1;
}





/*<!-- 第6小块-->*/
.di6xixiaokuai
{
    width: 890px ;
    height: 70px;
    margin:12px 0px 10px  ;
    background-image: url("../image/qietu13.png");
    background-position: center;
    background-size:890px 70px  ;
    animation: xiaotu 60s infinite   ;
    margin-top: 10px;
}

@keyframes xiaotu {

    25%{
        background-image: url("../image/taobao-year.png");

        transform: rotatex(360deg);
    }
    50% {
        background-image: url("../image/large-top.jpg");
        transform: rotatex(720deg);
    }
    75%{
        background-image: url("../image/qietu12.png");
        transform: rotatex(1080deg);
    }
    100%{
        background-image: url("../image/qietu13.png");
        transform: rotatex(1440deg);
    }
}
.di6xixiaokuai:hover
{
    background-image: url("../image/qietu13.png");
    animation: xiaotu1 0s infinite   ;
}
@keyframes xiaotu1 {

    25%{
        background-image: url("../image/taobao-year.png");


    }
    50% {
        background-image: url("../image/large-top.jpg");

    }
    75%{
        background-image: url("../image/qietu12.png");

    }
    100%{
        background-image: url("../image/qietu13.png");

    }
}







/*右边大块*/
.dierdakuairight
{
    width: 290px ;
    height: 884px;
    float: right;
}
.dierdakuairighttop
{
    width: 290px;
    height: 110px;
    background-color: white;
    margin-bottom: 10px;
}
.dierdakuairighttop1
{
    width: 290px;
    height: 30px;
    overflow: hidden;
    line-height: 30px;
}
.dierdakuairighttop1>img
{
    float: left;
    line-height: 30px;
    padding: 10px 0px 0px 20px ;
    /*display: inline-block;*/
}
.dierdakuairighttop1>a
{
    float: right;
    color: #3d3d3d  ;
    line-height: 30px;
    /*display: inline-block;*/
}
.dierdakuairighttop1>a:hover
{
    color: #ff5022;
}

.dierdakuairighttop2
{
    width: 290px;
    height: 80px;
    overflow: hidden;
    opacity: 0.9;
}
.dierdakuairighttop2>img
{
    float: left;
    margin: 12px 12px ;
}
.dierdakuairighttop2>div
{
    float: left;
    width: 200px;
}
.dierdakuairighttop2>div>h2>a
{
    color: black;
}
.dierdakuairighttop2>div>p>a
{
    color: #3d3d3d  ;
}

.dierdakuairighttop2:hover>div>p>a
{
    color: #ff0522  ;
}
.dierdakuairighttop2:hover
{
    opacity: 1;
}



.dierdakuairightbottom
{
    width: 290px;
    height: 765px;
    background-color: white;
}
.dierdakuairightbottom>img
{
    padding: 10px 10px 0px;
}

.rightliansuo
{
    width: 290px;
    height: 100px;
    overflow: hidden;
    margin-top: 16px;
}
.rightliansuo>a>img
{
    float: left;
    padding: 8px 10px;
    opacity: 0.8;
}
.rightliansuo>div
{
    width: 158px;
    height: 100px;
    float: left;
}
.rightliansuo>div>h3
{
    margin: 10px 0px ;
}
.rightliansuo>div>h3>a
{
    font-size: 14px;
    color: black;

}
.rightliansuo>div>p:first-of-type
{
    font-size: 12px;
    color: #676767;
    margin-bottom: 8px;
}
.rightliansuo>div>p:last-of-type
{
    color: #69acf5;
    font-size: 12px;
    font-weight: bold;
}
.rightliansuo:hover>div>h3>a
{
    color: #ff5502;
}
.rightliansuo:hover>a>img
{
    opacity: 1;
}

.tubiao11
{
    width: 16px;
    height: 16px;
    vertical-align: middle;
    background-image: url("../image/change.png");
    display: inline-block;
}
.pp
{
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-top: 1px solid #f1f1f1;

}
.pp>a
{
    font-size: 14px;
    color: #676767;
}
.pp:hover>a
{
    color: #ff5d02;
}


/*第三大块*/

.disandakuai
{
    width: 1200px;
    height: 634px;
    margin: 10px auto 0px;
    background-color: white;
}
.disandakuai1
{
    width: 100%;
    height: 82px;
    text-align: center;
}
.tubiao12
{
    width: 18px;
    height: 20px;
    vertical-align: middle;
    background-image: url("../image/fire.png");
    display: inline-block;
}
.disandakuai1>h1
{
    font-size: 18px;
    color: black;
    padding: 14px 0px 20px ;
}
.disandakuai1>p>a
{
    font-size: 12px;
    color: #887671;
    padding: 0px 9px ;
    border-right: 1px solid #e6e6e6;
}
.disandakuai1>p>a:hover
{
    color: #ff5d02;
}





.disandakuai2
{
    width: 100%;
    height: 552px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-right: 1px solid transparent;
}
.santu
{
    width: 400px;
    height: 552px;
    border-right: 1px solid #e8e8e8;
    box-sizing: border-box;
    float: left;
}
.santu>div:first-child
{
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.santu>div:first-child>div:first-child
{
    width: 234px;
    height: 400px;
    float: left;
    border-right: 1px solid #e8e8e8;

}
.santu>div:first-child>div:first-child>a>img
{
    padding: 10px;
}
.santu>div:first-child>div:first-child>h1
{
    padding-left: 10px;
    color: #ff5d02;
}
.santu>div:first-child>div:first-child>p
{
    padding: 0px 10px;
}
.santu>div:first-child>div:first-child>p:nth-of-type(1)
{
   font-size: 12px;
    color: #9d9d9d;
    margin: 4px 0px 14px ;
}
.santu>div:first-child>div:first-child>p:nth-of-type(2)>a
{
  color: #6d6d6d;
}
.santu>div:first-child>div:first-child>p:nth-of-type(2)>a:hover
{
    color: #ff5d02;
}
.santu>div:first-child>div:first-child>p:nth-of-type(3)>a:hover
{
    color: #ff5d02;
}



.santu>div:first-child>div:first-child>p:nth-of-type(3)>a
{
    color: #9d9d9d;
    margin-top: 30px;
}
.santu>div:first-child>div:first-child>p:nth-of-type(3)
{
    margin-top: 40px;
}







.santu>div:first-child>div:last-child
{
    width: 162px;
    height: 400px;
    float: left;
}

.santu>div:first-child>div:last-child>a:last-child>img
{
    border-top: 1px solid #e8e8e8;
    box-sizing: border-box;
}
.santu>div:first-child>div:last-child>a>img:hover
{
    transform: scale(1.05);
}
.santu>div:last-child
{
    width: 100%;
    height: 150px;
    border-top: 1px solid #e8e8e8;
    text-align: center;
    line-height: 150px;
}
.disikuai
{
    width: 1200px;
    height: 100px;
    margin: 70px auto;
}
.tubiao13
{
    width: 31px;
    height: 32px;
    vertical-align: middle;
    background-image: url("../image/about-icon1.png");
    display: inline-block;
    overflow: hidden;
}
.disikuai>ul
{
    padding-left: 80px;
}
.disikuai>ul>li
{
    width: 25%;
    float: left;
    /*padding-left: 10px;*/
}
.disikuai>ul>li>h1
{
    color: #3C3C3C;

}
.disikuai>ul>li>p
{
    margin-top: 10px;
    margin-right: 80px;
}
.disikuai>ul>li>p>a
{
    color: #999;
    padding-right: 10px;
}
.disikuai>ul>li>p>a:hover
{
    color: #ff0522;
}
footer
{
    width: 100%;
    height: 250px;
    background-color: white;
}
.diwudakuai
{
    width: 1200px;
    height: 250px;
    margin: 0px auto;
}
.diwudakuaitop
{
    width: 100%;
    height: 70px;
    border-top: 1px solid rgb(221, 221, 221)
;
    border-bottom: 1px solid rgb(221, 221, 221)
;
}
.diwudakuaitop>p
{
    margin-top: 8px;
}
.diwudakuaitop>p>a
{
    color: #6c6c6c;
    padding: 0px 10px;

}
.diwudakuaitop>p>a:not(:last-child)
{

    border-right: 1px solid rgb(221, 221, 221);
}
.diwudakuaitop>p>a:hover
{
    color: #ff0522;
}
.dibu1
{
    margin: 10px 5px 0px  ;

}

.dibu1>span:last-child
{
    font-size: 12px;
    color: #9c9c9c;
    padding-left: 20px;

}
.dibu1>span:first-child>a
{
    padding-right: 6px;
    color: #6c6c6c;
}
.dibu1>span:first-child>a:hover
{
    color: #ff0522;
}
.dibu1>span:first-child>a:last-child
{
    border-right: 1px solid rgb(221, 221, 221)
}
.dibu2>span:nth-child(1)
{
    padding: 0px 5px ;
    font-size: 12px;
    color: #6c6c6c;
    border-right: 1px solid rgb(221, 221, 221)
}
.dibu2>span:nth-child(2)
{
    padding: 0px 5px ;
    color: #6c6c6c;
    font-size: 12px;
    border-right: 1px solid rgb(221, 221, 221)
}
.dibu2>span:nth-child(3)
{
    padding: 0px 5px ;
    color: #9c9c9c;
    font-size: 12px;
}
.dibu3
{
    font-size: 12px;
    color: #6c6c6c;
    padding-left: 2px;
    margin: 2px 0px 0px ;
}
.tubiao14
{
    width: 20px;
    height: 22px;
    vertical-align: middle;
    background-image: url("../image/6666.png");
    display: inline-block;
}

body>ul
{
    position: fixed;
    right: 50px;
    bottom: 200px;
    width: 50px;
    height: 500px;
    background-color: white;
    z-index: 2;
}
body>ul>li
{
    width: 100%;
    height: 12.5%;
    text-align: center;
        /*line-height:62.5px ;*/
}
body>ul>li:hover
{
    background-color: #ff5d02;
    background-clip:content-box ;
}
body>ul>li:hover>a
{
    color: white;
    font-weight: bold;
    /*background-color: #ff5d02;*/
}



body>ul>li>a
{
   font-size: 14px;
    width: 28px;
    display: inline-block;
}
body>ul>li>a
{
    border-top: 1px solid rgb(221, 221, 221);
    /*padding-top: 5px;*/
}
.guding8>ol>li>img
{
    width: 1400px;
}
.guding8>ol>li
{
    position: fixed;
    bottom:  1000px ;
    left: 300px;
    /*display: none;*/

    opacity: 0;
}
.guding8:hover>ol>li
{
    /*display: block;*/
    opacity: 1;
    transition:all 5s;
    bottom:  100px ;
}
.guding8 a
{
    color: #3d3d3d;
    padding-top: 10px;
}
.guding7 a
{
    color: #3d3d3d;
    line-height: 62.5px;
}
.guding6 a
{
    color: #ff5d02;
    padding-top: 10px;
}
.guding5 a
{
    color: #a8755c;
    line-height: 62.5px;
}
.guding4 a
{
    color: #b5c049;
    line-height: 62.5px;
}
.guding3 a
{
    color: #8e7ffb;
    line-height: 62.5px;
}
.guding2 a
{
    color: #ff0256;
    line-height: 62.5px;
}
.guding1 a
{
    color: #a8755c;
    padding-top: 5px;
    color: white;
}
.guding1
{
    background-color: #ff4302;
}

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

asp.net页面实用代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

淘宝主页(静态页面)第3天

HTML+CSS简易淘宝页面

前端防扒代码片段