淘宝网页练习

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>淘宝网-！我喜欢</title>
 <link rel="stylesheet" type="text/css" href="../css/reset.css">
 <link rel="stylesheet" type="text/css" href="../css/taobao.css">
</head>
<body>
 
 <!-- 导航栏 -->
<div class="dhl">
 <header>
  <!-- 登录  注册 -->
   <ul>
    <li>
     <a href="#">亲,请登录</a>
    </li>
    <li>
     <a href="#">免费注册</a>
    </li>
    <li>
     <a href="#">手机逛淘宝</a>
    </li>
   </ul> 
  <!-- 我的淘宝 -->
   <ul>
    <li>
     <img src="../img/images/nav-ham.png">
     <a href="#">网站导航</a>
     <img src="../img/images/nav-icon.png">
    </li>
    <li>
     
     <a href="#">联系客服</a>
     <img src="../img/images/nav-icon.png">
    </li>
    <li>
     
     <a href="#">卖家中心</a>
     <img src="../img/images/nav-icon.png">
    </li>
    <li class="spfl">|</li>
    <li>
     <a href="#">商品分类</a>
    </li>
    <li>
     <img src="../img/images/nav-start.png">
     <a href="#">收藏夹</a>
     <img src="../img/images/nav-icon.png">
    </li>
    <li>
     <img src="../img/images/nav-cart.png">
     <a href="#">购物车 <span class="gwc"> 0 </span></a>
     <img src="../img/images/nav-icon.png">
    </li>
    <li>
     
     <a href="#">我的淘宝</a>
     <img src="../img/images/nav-icon.png">
    </li>
   </ul>
 </header>
</div>
 <!-- 白底背景 -->
  <div class="beijing">
   <!-- 白底区域设置一个1200的宽 -->
   <div class="taobaowang">
    <!-- 上面 -->
    <div class="logo">
     <!-- logo图片-->
     <a href="#">
      <img src="../img/images/images/01-(233)_03.png" >
     </a>
     <!-- 搜索框那部分-->
     <div class="sousuokuang">
      <!-- 搜索框上面的宝贝、天猫、店铺-->
      <div class="sousuokuang-top">
       <ul>
        <li>
         <a href="#">宝贝</a>
        </li>
        <li>
         <a href="#">天猫</a>
        </li>
        <li>
         <a href="#">店铺</a>
        </li>
       </ul>
      </div>
      <!-- 搜索栏-->
      <div class="sousuo">
       <form action="#" method="post">
        <input type="text"/>
        <img class="fdj" src="../img/images/search-input.png">
        <img  class="zxj" src="../img/images/search-camera.png">
        <button>
        搜索
        </button>
        <div> 
         <a href="#">高级搜索</a>
        </div>
        <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="#">更多
           <img src="../img/images/nav-icon.png">
          </a>
         </li>
        </ul>
       </form>
      </div>
     </div>
    </div>

<!-- 主题市场那部分 -->
    <div class="ztsc-all">
     <!-- 主题市场分类 -->
     <div class="ztsc-l">
      <h1>主题市场</h1>
      <a href="#">
       <img src="../img/images/menu-item-ham.png">
      </a> 
     </div> 
     <!-- 天猫、聚划算 -->
     <ul class="ztsc-r">
      <li>
       <a href="#">天猫</a>
      </li>
      <li>
       <a href="#">聚划算</a>
      </li>
      <li>
       <a href="#">天猫超市</a>
      </li>
      <li>|</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>|</li>
      <li>
       <a href="#">智能生活</a>
      </li>
      <li>
       <a href="#">苏宁易购</a>
      </li>
     </ul>
    </div>
   </div> 
  </div>
  <!-- 整体的左边部分 -->
 <div class="demo">
  <!-- 淘宝网下面 -->
  <!-- 整体左边 -->
  <div class="demo-l">
    <div class="box">
     <!-- 左 -->
     <div class="box-l">
      <ul>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        女装</a>
        <span>/</span>
        <a href="#">男装</a>
        <span>/</span>
        <a href="#">内衣</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        鞋靴</a>
        <span>/</span>
        <a href="#">箱包</a>
        <span>/</span>
        <a href="#">配件</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        童装玩具</a>
        <span>/</span>
        <a href="#">孕产</a>
        <span>/</span>
        <a href="#">用品</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        家电</a>
        <span>/</span>
        <a href="#">手机</a>
        <span>/</span>
        <a href="#">数码</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        美妆</a>
        <span>/</span>
        <a href="#">洗护</a>
        <span>/</span>
        <a href="#">保健品</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        珠宝</a>
        <span>/</span>
        <a href="#">眼镜</a>
        <span>/</span>
        <a href="#">手表</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        运动</a>
        <span>/</span>
        <a href="#">户外</a>
        <span>/</span>
        <a href="#">乐器</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        游戏</a>
        <span>/</span>
        <a href="#">动漫</a>
        <span>/</span>
        <a href="#">影视</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        美食</a>
        <span>/</span>
        <a href="#">生鲜</a>
        <span>/</span>
        <a href="#">零食</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        鲜花</a>
        <span>/</span>
        <a href="#">宠物</a>
        <span>/</span>
        <a href="#">农资</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        房产</a>
        <span>/</span>
        <a href="#">装修</a>
        <span>/</span>
        <a href="#">建材</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        家具</a>
        <span>/</span>
        <a href="#">家饰</a>
        <span>/</span>
        <a href="#">家纺</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        汽车</a>
        <span>/</span>
        <a href="#">二手车</a>
        <span>/</span>
        <a href="#">用品</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        办公</a>
        <span>/</span>
        <a href="#">DIY</a>
        <span>/</span>
        <a href="#">五金电子</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        百货</a>
        <span>/</span>
        <a href="#">餐厨</a>
        <span>/</span>
        <a href="#">家庭保健</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <a href="#">
         <img src="../img/images/menu-item-icon.png">
        学习</a>
        <span>/</span>
        <a href="#">卡券</a>
        <span>/</span>
        <a href="#">本地服务</a>
        <span class="gt">&gt;</span >
       </li>
       <li>
        <img src="../img/images/index_01_03_03.png">
       </li>
      </ul>
     </div>

<!-- 中 -->
     <div class="box-m">
      <!-- 上 -->
      <div class="box-m-t">
       <!-- 左边 -->
       <div class="box-m-t-l">
        <img src="../img/images/images/index_01_03.png">
       </div>
       <!-- 右边 -->
       <div class="box-m-t-r">
        <img src="../img/images/images/index_01_03_04.png">
        <p>今日热卖</p>
       </div>
      </div>

<!-- 下面 -->
      <div class="box-m-b">
       <!-- 左边 -->
       <div class="box-m-b-l">
        <img src="../img/images/little-tmall.png">
        <span class="tmbg">
         天猫必逛&nbsp;
         <span>热门品牌，天天上天猫！</span>
        </span>
        <span class="tmbg2">3<span>/6</span>
        </span>
        
        <ul>
         <li>
          <img src="../img/images/images/index_01_032.png">
         </li>
         <li>
          <img src="../img/images/images/index_01_04_03.png">
         </li>
         <li>
          <img src="../img/images/images/index_01_04_031.png">
         </li>
         <li>
          <img src="../img/images/images/index_01-2_03.png">
         </li>
        </ul> 
       </div>
       <!-- 右边 -->
       <div class="box-m-b-r">
        <img src="../img/images/images/index_01-3_03.png">
       </div>
      </div>
     </div>
     
     <!-- 下 -->
     <ul class="box-b">
      <li>
        <div class="box-m-bt">
       <img src="../img/images/images/index_01-45_03.png">
       <div>
        <a href="#">
         <h1>书呆子</h1>
        </a>
        <p>书卷气更迷人</p>
        <img src="../img/images/images/index_012_06.png">
       </div>
      </div>
      </li>
      <li>
       <div class="box-m-bt">
      <img src="../img/images/images/index_01-45_03.png">
      <div>
       <a href="#">
        <h1>书呆子</h1>
       </a>
       <p>书卷气更迷人</p>
       <img src="../img/images/images/index_012_06.png">
      </div>
     </div>
      </li>
      <li>
       <div class="box-m-bt">
      <img src="../img/images/images/index_01-45_03.png">
      <div>
       <a href="#">
        <h1>书呆子</h1>
       </a>
       <p>书卷气更迷人</p>
       <img src="../img/images/images/index_012_06.png">
      </div>
     </div>
      </li>
      <li>
       <div class="box-m-bt">
      <img src="../img/images/images/index_01-45_03.png">
      <div>
       <a href="#">
        <h1>书呆子</h1>
       </a>
       <p>书卷气更迷人</p>
       <img src="../img/images/images/index_012_06.png">
      </div>
     </div>
      </li>
      <li>
        <div class="box-m-bt">
        <img src="../img/images/images/index_01-45_03.png">
        <div>
         <a href="#">
          <h1>书呆子</h1>
         </a>
         <p>书卷气更迷人</p>
         <img src="../img/images/images/index_012_06.png">
        </div>
       </div>
      </li>
     </ul>
   </div>

<!-- 我常逛的 -->
   <div class="wcgd">
      <!-- 上 -->
      <div class="wcgd2">
        <span class="wcgd3">
         <span class="hx">———</span>
        <img src="../img/images/i-shopping-icon.png">
        我常逛的</span>
        <span class="hx">———</span>
        <span>
        <a href="#">更多&gt;</a>
        </span>
      </div>
      <!-- 下 -->
      <div class="wcgd-b">
     <!-- 亲宝贝 -->
     <div class="wcgd-b-l">
      <!-- 左边 -->
      <div class="wcgd-b-l-b">
       <img  src="../img/images/images/common-l-t-m-l-l-t.png"><!-- 下 -->
       <ul>
        <li>
         <h1>热门TOP</h1>
        </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="#">儿童T恤</a>
        </li>
        <li>
         <a href="#">演出服</a>
        </li>
       </ul>
      </div>

<!-- 右边 -->
      <div class="qbb-r">
       <!-- 上面 -->
       <div class="qbb-r-t">
        <div class="qbb-img1">
         <img src="../img/images/1_03.png">
         <img src="../img/images/images/2_03.png">
        </div>
        <div class="qbb-img2">
         <img src="../img/images/images/common-l-t-m-l-r-t-m.png">
        </div>
        <div class="qbb-img3">
         <img src="../img/images/images/common-l-t-m-l-r-t-r.png">
        </div>
       </div>
       <!-- 下面 -->
       <div class="qbb-r-b">
        <div class="qbb-r-b-img"> 
         <img src="../img/images/images/common-l-t-m-l-r-b-l.png"> 
        
          <img src="../img/images/images/common-l-t-m-l-r-b-r-t.png">
          <img src="../img/images/images/common-l-t-m-l-r-b-r-b.png">
        </div>
       </div>
      </div>
     </div>

<!-- 右 -->
     <div class="wcgd-b-r">
      <!-- 左边 -->
      <div class="wcgd-b-l-b">
       <img  src="../img/images/images/common-l-t-m-r.png"><!-- 下 -->
       <ul class="qqg">
        <li>
         <h1>热门TOP</h1>
        </li>
        <li>
         <a href="#">面膜
          <sup><img src="../img/images/h.png"></sup>
          
         </a>
        </li>
        <li>
         <a href="#">香水</a>
        </li>
        <li>
         <a href="#">化妆品</a>
        </li>
        <li>
         <a href="#">修复面膜</a>
        </li>
        <li>
         <a href="#">洗发水</a>
        </li>
        <li>
         <a class="kh" href="#">口红</a>
         <a class="kh" href="#">bb霜</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="qbb-r">
       <!-- 上面 -->
       <div class="qbb-r-t">
        <div class="qbb-img1">
         <img src="../img/images/1_03.png">
         <img src="../img/images/images/2_03.png">
        </div>
        <div class="qbb-img2">
         <img src="../img/images/images/common-l-t-m-l-r-t-m.png">
        </div>
        <div class="qbb-img3">
         <img src="../img/images/images/common-l-t-m-l-r-t-r.png">
        </div>
       </div>
       <!-- 下面 -->
       <div class="qbb-r-b">
        <div class="qbb-r-b-img"> 
         <img src="../img/images/images/common-l-t-m-l-r-b-l.png"> 
        
          <img src="../img/images/images/common-l-t-m-l-r-b-r-t.png">
          <img src="../img/images/images/common-l-t-m-l-r-b-r-b.png">
        </div>
       </div>
      </div>
     </div>
      </div>
   </div>

<!-- 天丝新款裤子-->
   <div class="tskz">
    <img src="../img/images/common-l-t-b.png">
   </div>

<!-- 时尚爆料王 -->
   <div class="ssblw">
    <div class="ssblw-logo">
     <span class="wcgd3">
        <span class="hx">———</span>
       <img src="../img/images/i-shopping-icon.png">
       时尚爆料王</span>
       <span class="hx">———</span>
       <span class="gd">
       <a href="#">更多&gt;</a>
       </span>
    </div>
    <!-- 时尚爆料王下面 -->
    <div class="ssblw-nr">

<!-- ifashion -->
     <div class="ifashion">
      <div class="ifashion-t">
       <img src="../img/images/fashion-logo.png">
      </div>
      <div class="ifashion-b">
       <img src="../img/images/common-l-b-m-l-l-b-l.png">
       <div class="ifashion-b-r">
        <img src="../img/images/bkviblb.png">
        <img src="../img/images/nyufvjxt.png">
       </div>
      </div>
     </div>

<!-- 全球够 -->
     <div class="quanqiugou">
      <div class="ifashion-t">
       <img src="../img/images/fashion-logo.png">
      </div>
      <div class="ifashion-b">
       <img src="../img/images/common-l-b-m-l-l-b-l.png">
       <div class="ifashion-b-r">
        <img src="../img/images/bkviblb.png">
        <img src="../img/images/nyufvjxt.png">
       </div>
      </div>
     </div>

<!-- 美妆秀 -->
     <div class="meizhuangxiu">
      <div class="ifashion-t">
       <img src="../img/images/fashion-logo.png">
      </div>
      <div class="ifashion-b">
       <img src="../img/images/common-l-b-m-l-l-b-l.png">
       <div class="ifashion-b-r">
        <img src="../img/images/bkviblb.png">
        <img src="../img/images/nyufvjxt.png">
       </div>
      </div>
     </div>

<!-- 爱逛街 -->
     <div class="aiguangjie">
      <div class="ifashion-t">
       <img src="../img/images/fashion-logo.png">
      </div>
      <div class="ifashion-b">
       <img src="../img/images/common-l-b-m-l-l-b-l.png">
       <div class="ifashion-b-r">
        <img src="../img/images/bkviblb.png">
        <img src="../img/images/nyufvjxt.png">
       </div>
      </div>
     </div>

</div>
   </div>
 
   <!-- 街头潮流 -->
   <div class="jtcl">
    <img src="../img/images/common-l-b-m-b.png">
   </div>
  </div>

<!-- 整体右边部分 -->
  <div class="demo-r">
   <!-- 从登录注册到阿里app -->
   <div class="box-m-r">
    <!-- 登录 -->
    <div class="box-m-r-t">
     <!-- 登录、注册 -->
     <div class="dlzc">
      <figure>
       <img src="../img/images/login-header.png">
       <p>Hi! 你好</p>
       <figcaption>
        <img src="../img/images/gold-money.png">
        <span>
         <a href="#">领淘金币抵钱</a>
        </span>或去<span>
         <a href="#">会员俱乐部</a></span>
        <ul class="kd">
         <li>
          <a href="#">登录</a>
         </li>
         <li>
          <a href="#">注册</a>
         </li>
         <li>
          <a href="#">开店</a>
         </li>
        </ul>
       </figcaption>
      </figure>
     </div>
     <!-- 公告、规则 -->
     <div class="gz">
      <span>公告</span>
      <span>规则</span>
      <span>论坛</span>
      <span>安全</span>
      <span>公益</span>
      <a href="#">
       <p>马云访问阿根廷签战略合作
       总统里亲自推销农产品</p>
      </a>
      <a href="#">
       <p>马云阿根廷讲跨境贸易
       淘宝发布空巢青年图鉴</p>
      </a> 
     </div>
    </div>
    <!-- 充话费..... -->
    <div class="box-m-r-m">
     <ul>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
     </ul>
     <ul>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
     </ul>
     <ul>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
     </ul>
      <ul>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
      <li>
       <a href="#">
        <img src="../img/images/phone.png">
        <p>充话费</p>
       </a>
      </li>
     </ul>

</div>
    <!-- 阿里APP -->
    <div class="box-m-r-b">
     <span>阿里APP</span>
     <a href="#">更多&gt;</a>
     <ul>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
      <li>
       <img src="../img/images/app-logo.png">
      </li>
     </ul>
    </div>
   </div>
   
   <!-- 淘宝头条 -->
   <div class="tbtt">
    <div class="tbtt-t">
     <img src="../img/images/tkbktbtc.png">
     <a href="#">更多&gt;</a>
    </div>
    <!-- 淘宝头条内容 -->
    <div class="tbtt-b">
     <img src="../img/images/common-r-t-b-f.png">
     <div>
      <a href="#">
      <h1>工作需要放松,享受下午茶时光</h1>
      </a>
      <a href="#">
      <p>你有吃下午茶的习惯吗?最早关于下午茶的由来,可以追溯到英国17世纪</p>
      </a>
     </div>

</div>
   </div>

<!-- 有好货 -->
   <div class="yhh">
    <img src="../img/images/ybhkho.png">
    <!-- 丹麦 -->
    <div class="md">
     <img src="../img/images/common-r-b-m-f-1.png">
     <div>
      <a href="#">丹麦Mat  手工皮革隔热</a>
      <p>皮革质地能有效隔热 ,触感细腻独特.造型简约大方,质感</p>
      <p class="sh">164 人说好</p>
     </div>
    </div>

<!-- 广东特产 -->
    <div class="gdtc">
     <img src="../img/images/images/common-r-b-m-f-2.png">
     <div class="gdtc2">
      <a href="#">广东特产红豆饼糕点</a>
      <p>广东特产红豆饼糕点，馅心低糖清甜，饼皮软韧酥脆，馅料</p>
      <p class="gdtc3">17 人说好</p>
     </div>
    </div>

<!-- 韩国面膜 -->
    <div class="gdtc">
     <img src="../img/images/images/common-r-b-m-f-3.png">
     <div class="gdtc2">
      <a href="#">韩国VERITE镇静肌肤面</a>
      <p>暗黄斑点肤质适用的一款面膜贴，含有维他命C诱导体、樱</p>
      <p class="gdtc3">0 人说好</p>
     </div>
    </div>

<!-- 思亲肤青葡萄 -->
    <div class="gdtc">
     <img src="../img/images/images/common-r-b-m-f-4.png">
     <div class="gdtc2">
      <a href="#">思亲肤青葡萄唤醒粉饼</a>
      <p>控油和保湿兼具的一款粉饼，含有青葡萄萃取精华，可以调</p>
      <p class="gdtc3">159 人说好</p>
     </div>
    </div>
    
    <!-- 印花长袖T恤 -->
    <div class="gdtc">
     <img src="../img/images/images/01-(278)_03.png">
     <div class="gdtc2">
      <a href="#">印花长袖T恤</a>
      <p>趣味十足的人像印花设计，让整个造型充满灵气和气氛。简</p>
      <p class="gdtc3">20 人说好</p>
     </div>
    </div>

<!-- 短袖戴帽T恤 -->
    <div class="gdtc">
     <img src="../img/images/images/common-r-b-m-f-6.png">
     <div class="gdtc2">
      <a href="#">短袖戴帽T恤</a>
      <p>个性十足的人像印花设计，展现别样的穿搭趣味。运动风十</p>
      <p class="gdtc3">3 人说好</p>
     </div>
    </div>

<!-- 换一组 -->
    <div class="hyz">
     <a href="#"><img src="../img/images/change.png">换一组看看</a>
    </div>
   </div>
  </div>
 </div>

<!-- 热卖单品 -->
 <div class="rmdp">
  <!-- 上 -->
  <div class="rmdp-t">
   <h1>
    <span class="hx">———</span>
    <img src="../img/images/fire.png">
    热卖单品
    <span class="hx">———</span>
   </h1>
   <ul class="rmdp-t-b">
    <li>
     <a href="#">客厅灯</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">床垫</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">沙发垫</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">衣柜</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">电脑椅</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">沙发</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">凉席</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">男内裤</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">蚊帐</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">拉杆箱</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">鞋柜</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">防晒衣</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">窗帘</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">运动鞋</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">凉鞋男</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">夹克</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">电风扇</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">牛仔裤</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">电脑桌</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">T恤男</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">男T恤</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">男包</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">真丝群</a>
    </li>
    <li>|</li>
   </ul>
  </div>

<!-- 中 -->
  <div class="rmdp-m">
   <!-- 左 -->
   <div class="rmdp-m-l">
    <div class="rmdp-m-l-l">
     <figure>
      <a href="#">
       <img src="../img/images/hot-b-l-l-t.png">
      </a>
      <figcaption>
       <p class="jiage">￥ 799.00</p>
       <p class="yuexiao">月销2笔</p>
       <p>真皮时尚  高档箱包  头层牛皮包  欧美时尚鳄鱼纹  气质女包</p>
       <p>评价 0&nbsp;&nbsp;&nbsp;&nbsp;收藏 70</p>
      </figcaption>
     </figure>
    </div>
    <!-- 右上 -->
    <div class="rmdp-m-l-r">
     <div class="rmdp-m-r-t">
      <figure>
       <a href="#">
        <img src="../img/images/hot-b-l-r-t.png">
       </a> 
       <figcaption>
        <p class="jiage2">￥ 799.00</p>
        <p class="yuexiao2">
         <span class="baoyou">包邮</span>
        月销9笔
        </p>
       </figcaption>
      </figure>
     </div>
     <!-- 右下 -->
     <div class="rmdp-m-r-b">
      <figure>
       <a href="#">
        <img src="../img/images/hot-b-l-r-b-t.png">
       </a>
       <figcaption>
        <p class="jiage2">￥ 28.00</p>
        <p class="yuexiao2">
         <span class="baoyou">包邮</span>
        月销9笔
        </p>
       </figcaption>
      </figure>
     </div>
    </div>
   </div>

<!-- 中 -->
   <div class="rmdp-m-m">
    <!-- 左 -->
   <div class="rmdp-m-l">
    <div class="rmdp-m-l-l">
     <figure>
      <a href="#">
       <img src="../img/images/01-(214)_03_03.png">
      </a>
      <figcaption>
       <p class="jiage">￥ 546.00</p>
       <p class="yuexiao">月销27笔</p>
       <p>进口尼龙面料  防泼水  香港品牌女包  轻盈</p>
       <p>评价 145&nbsp;&nbsp;&nbsp;&nbsp;收藏 7100</p>
      </figcaption>
     </figure>
    </div>
    <!-- 右上 -->
    <div class="rmdp-m-l-r">
     <div class="rmdp-m-r-t">
      <figure>
       <a href="#">
        <img src="../img/images/01-(212)_03.png">
       </a> 
       <figcaption>
        <p class="jiage2">￥ 149.00</p>
        <p class="yuexiao2">
         <span class="baoyou2">新品</span>
        月销320笔
        </p>
       </figcaption>
      </figure>
     </div>
     <!-- 右下 -->
     <div class="rmdp-m-r-b">
      <figure>
       <a href="#">
        <img class="xiezi" src="../img/images/01-(210)_06.png">
       </a>
       <figcaption>
        <p class="jiage2">￥ 708.00</p>
        <p class="yuexiao2">
         <span class="baoyou">包邮</span>
        月销58笔
        </p>
       </figcaption>
      </figure>
     </div>
    </div>
   </div>
   </div>

<!-- 右 -->
   <div class="rmdp-m-r">
    <!-- 左 -->
   <div class="rmdp-m-l">
    <div class="rmdp-m-l-l">
     <figure>
      <a href="#">
       <img src="../img/images/01-(21)_03.png">
      </a>
      <figcaption>
       <p class="jiage">￥ 198.00</p>
       <p class="yuexiao">月销446笔</p>
       <p>优质橡胶原材料制作打底时尚的；  行走的时候脚底压力得到很好</p>
       <p>评价 64&nbsp;&nbsp;&nbsp;&nbsp;收藏 2798</p>
      </figcaption>
     </figure>
    </div>
    <!-- 右上 -->
    <div class="rmdp-m-l-r">
     <div class="rmdp-m-r-t">
      <figure>
       <a href="#">
        <img src="../img/images/01-(22)_03.png">
       </a> 
       <figcaption>
        <p class="jiage2">￥ 128.00</p>
        <p class="yuexiao2">
         <span class="baoyou">包邮</span>
        月销202笔
        </p>
       </figcaption>
      </figure>
     </div>
     <!-- 右下 -->
     <div class="rmdp-m-r-b">
      <figure>
       <a href="#">
        <img src="../img/images/01-(23)_06.png">
       </a>
       <figcaption>
        <p class="jiage2">￥ 19.00</p>
        <p class="yuexiao2">
        月销9206笔
        </p>
       </figcaption>
      </figure>
     </div>
    </div>
   </div>
   </div>

</div>

<!-- 下 -->
  <div class="rmdp-b">
   <ul>
    <li>
     <img src="../img/images/add-two.png">
    </li>
    <li>
     <img src="../img/images/add-three.png">
    </li>
    <li>
     <img src="../img/images/hot-f-3.png">
    </li>
   </ul>
   
  </div>
 </div>

<!-- 消费者 -->
 <div class="xfz">
  <!-- 消费者保障 -->
  <div class="xfzbz">
   <p class="xfzbz2">
    <img src="../img/images/about-icon1.png">
    <span class="xfbz-bt">消费者保障</span>
   </p>
   <p class="xfbz-nr">保障范围  退货退款流程   服务中心   更多特色服务</p>
  </div>

<!-- 新手上路 -->
  <div class="xssl">
   <p class="xfzbz2">
    <img src="../img/images/footer-t2.png">
    <span class="xfbz-bt">新手上路</span>
   </p>
   <p class="xfbz-nr">新手专区  消费警示  交易安全  24小时在线帮助 免费开店</p>
  </div>

<!-- 付款方式 -->
  <div class="fkfs">
   <p class="xfzbz2">
    <img src="../img/images/footer-t3.png">
    <span class="xfbz-bt">付款方式</span>
   </p>
   <p class="xfbz-nr">快捷支付  信用卡 余额宝  蚂蚁花呗  货到付款</p>
  </div>

<!-- 淘宝特色 -->
  <div class="tbts">
   <p class="xfzbz2">
    <img src="../img/images/footer-t4.png">
    <span class="xfbz-bt">淘宝特色</span>
   </p>
   <p class="xfbz-nr">手机淘宝  旺旺/旺信  大众评审</p>
  </div>
 </div>
 
 <!-- 右边固定导航栏 -->
 <ul class="gddhl">
  <li>
   <a href="#">我常逛的</a>
  </li>
  <li>
   <a href="#">时尚</a>
  </li>
  <li>
   <a href="#">品质</a>
  </li>
  <li>
   <a href="#">特色</a>
  </li>
  <li>
   <a href="#">实惠</a>
  </li>
  <li>
   <a href="#">猜你喜欢</a>
  </li>
  <li>
   <a href="#">反馈</a>
  </li>
  <li>
   <a href="#">暴恐举报</a>
  </li>
  <li>
   <a href="#">返回顶部</a>
  </li>
 </ul>

<!-- 尾部 -->
 <footer>
  <!-- 上 -->
  <div class="footer-top">
   <!-- 阿里巴巴集团那行 -->
   <ul>
    <li>
     <a href="#">阿里巴巴集团</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">淘宝网</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">天猫</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">聚划算</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">全球速卖通</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">阿里巴巴国际交易市场</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">1688</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">阿里妈妈</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">飞猪</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">阿里云计算</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">YunOS</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">阿里通信</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">一淘</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">万网</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">高德</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">UC</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">友盟</a>
    </li>
   </ul>
   <!-- 虾米 -->
   <ul>
    <li>
     <a href="#">虾米</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">阿里星球</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">钉钉</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">支付宝</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">优酷</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">土豆</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">阿里健康</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">阿里影业</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">阿里体育</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">网商银行</a>
    </li>
   </ul>
  </div>
  <!-- 下 -->
  <div class="footer-bottom">
   <!-- 关于淘宝那行 -->
   <ul class="gytb">
    <li>
     <a href="#">关于淘宝</a>
    </li>
    <li>
     <a href="#">合作伙伴</a>
    </li>
    <li>
     <a href="#">营销中心</a>
    </li>
    <li>
     <a href="#">廉正举报</a>
    </li>
    <li>
     <a href="#">联系客服</a>
    </li>
    <li>
     <a href="#">开放平台</a>
    </li>
    <li>
     <a href="#">诚征英才</a>
    </li>
    <li>
     <a href="#">联系我们</a>
    </li>
    <li>
     <a href="#">网站地图</a>
    </li>
    <li>
     <a href="#">法律声明及隐私权政策</a>
    </li>
    <li>
     <a href="#">知识产权</a>
    </li>
    <li>|</li>
    <li>
     &copy;2003-2017  Taobao.com版权所有
    </li>
   </ul>
   <!-- 文化经营 -->
   <ul class="whjy">
    <li>
     <a href="#">网络文化经营许可:浙网[2013]0268-027号</a>
    </li>
    <li>|</li>
    <li>
     <a href="#">增值电信业务经营许可证：浙B2-20080224</a>
    </li>
    <li>|</li>
    <li>
     信息网路传播视听节目许可证：1109364号
    </li>
    <li>|</li>
    <li>互联网违法和不良信息举报电话：0571-81683755 [email protected]
    </li>
   </ul>
   <!-- 浙公网安备 -->
   <p class="zgwab">
    <a href="#">
     <img src="../img/images/index_0111_03.png">
     浙公网安备  33010002000078号
    </a>
   </p>
   <!-- 图片 -->
   <ul class="tupian">
    <li>
     <a href="#">
      <img src="../img/images/index_019_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_051_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_015_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_1_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_121_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_11_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_0112_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_011_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_0411_03.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/index_01235_19.png">
     </a>
    </li>
    <li>
     <a href="#">
      <img src="../img/images/footer-f3.png">
     </a>
    </li>
   </ul>

</div>

</footer>

</body>
</html>

CSS代码

a{
 text-decoration: none;
}
a:link,
a:visited{
 color: black;
}
ul,ol{
 list-style: none;
}

/*背景颜色*/
body{
 background-color:#F5F5F5;
}
/*导航栏*/
header{
 width:1200px;
 height: 36px;
 margin: 0  auto;
 position: fixed;
    top: 0;
    left: 351.5px;
    background-color: #f5f5f5;
}
header>ul:first-child>li{
 float: left;
}
header>ul:first-child>li:last-child>a{
 margin-left: 21px;
}
header>ul:first-child>li:first-child>a{
 color: #F23045;
 margin: 0 10px;
}

header>ul:last-child>li{
 float: right;
}
header>ul>li>a{
 font-size: 14px;
 line-height: 36px;
}
header>ul:last-child>li>a{
 margin:0 10px 0 6px;
}
header>ul>li{
 margin-right:16px;
}
.gwc{
 font-weight: bold;
 color: red;
}
.spfl{
    padding: 6px;
}
.dhl{
 width: 100%;
 height: 36px;
 background-color: #f5f5f5;
}
/*白底背景*/
.beijing{
 width: 100%;
 background-color: #fff;
}
/*白底区域设置一个1200的宽*/
.taobaowang{
 width:1200px;
 margin:0 auto;
 padding-top: 60px;
 box-sizing:border-box;
}
/*淘宝网logo*/
.logo>a>img{
 margin-right: 75px;
 margin-top: 17px;
}
/*搜索框那一块*/
.logo>a{
 float: left;
}
.sousuokuang-top>ul{
 height: 26px;
}
.sousuokuang-top>ul>li{
 float: left;
}
.sousuokuang-top>ul>li>a{
 font-size: 14px;
 padding-right: 13px;
 color: red;
 padding: 5px  12px;
}

.sousuokuang-top>ul>li>a:hover{
 background-color: red;
 color: #fff9f7;
 font-weight: bold;
}

.sousuokuang{
 overflow: hidden;
}
/*搜索栏*/
.sousuo>form>input{
 width: 465px;
 height: 40px;
 border: 3px solid #ff5602;
 outline: none;
 float: left;
 padding-left: 40px;
    padding-right: 40px;
}
.sousuo>form{
 position: relative;
}
.fdj{
 position: absolute;
 top: 20px;
 left: 20px;
}
.zxj{
 position: absolute;
 top: 20px;
 left: 510px;
}
.sousuo>form>button{
 width: 120px;
 height: 48px;
 background-color: #ff6806;
 color: #fff9f7;
 font-size: 20px;
 padding: 0px;
 border: 0px;
 float: left;
}

.sousuo>form>div>a{
 width: 38px;
 height: 48px;
 margin-left: 10px;
 float: left;
 text-align: center;
}
.sousuo>form>div>a:hover{
 background-color: #ff6806;
 color: #fff9f7;
}
.sousuo>form>ul{
 width:666px;
}
.sousuo>form>ul>li>a{
 font-size: 12px;
}
.sousuo>form>ul>li{
 margin-top: 8px;
}
.sousuo>form>ul>li>a:hover{
 color: red;
}
.sousuo>form>ul>li:not(:last-child){
 float: left;
 padding-right: 12px;
}
.sousuo>form>ul>li:last-child{
 float: right;
}
/*主题市场*/
/*左边分类块*/
.ztsc-all{
 margin-top: 16px;
 height: 33px;
}
.ztsc-l{
 width: 190px;
 height: 34px;
 background-color:#FF6A07;
 float: left;
}
.ztsc-l>h1{
 color: #fff;
 line-height: 34px;
 padding:0px 10px;
 float: left;
}
.ztsc-l>a>img{
 float: right;
 padding-top: 10px;
 padding-right: 10px;
}
/*天猫、聚划算、天猫超市*/
.ztsc-r{
 float: left;
}
.ztsc-r>li{
 float: left;
 margin-left: 10px;
 line-height: 33px;
}
.ztsc-r>li>a{
 padding: 0 10px;
}
.ztsc-r>li:hover>a{
 color: #fff;
 font-weight: bold;
 background-color: #FF4502;
 transition-duration: 0.5s;
 border-radius: 10px;
 padding:0 10px;
}
.ztsc-r>li:nth-child(4)>a{
 margin-left: 7px;
}

/*淘宝网下面那块*/
.demo{
 width: 1200px;
 clear: both;
 margin: 0 auto;
}
.demo-l{
 width: 900px;
 height: 613px;
 /*border: 1px solid red;*/
 float: left;
}
.demo-r{
 float: left;
}
/*中间*/
.box{
 height: 610px;
 margin: 0  auto;
 clear: both;
}
/*左边分类*/
.box-l{
 float: left;
}
.box-l>ul{
 width: 190px;
 height: 524px;
 background-color: #FF6706;
 color: #fff;
 font-weight: 400;
}
.box-l>ul>li>a{
 font-size: 12px;
 color: #fff;
 font-weight: bold;
}
.box-l>ul>li:not(:last-child){
 margin-bottom: 8px;
 margin-left: 10px;
}
.box-l>ul>li:first-child{
 padding-top: 10px;
}
.box-l>ul>li:nth-child(16){
 padding-bottom: 9px;
}
.gt{
 float: right;
 padding-right: 10px;
}
.box-l>ul>li>a>img{
 margin-right: 2px;
}
.box-l>ul>li>a:hover{
 text-decoration: underline;
 color: black;
}
/*中间*/
.box-m{
 width: 690px;
 height: 523px;
 float: left;
 margin: 5px;
 float: left;
}
.box-m-t-l{
 width: 519px;
 float: left;
}
.box-m-t-r{
 width: 160px;
 height: 280px;
 float: right;
}
.box-m-t-r>p{
 font-size: 12px;
 color: #c1c1c1;
 padding-top: 10px;
}
.box-m-b-l>img{
 margin-top: 10px;
}
.box-m-b-l{
 width: 522px;
 border-bottom:3px solid #C12E28;
}
.tmbg{
 font-size: 14px;
 font-weight: bold;
 vertical-align: bottom;
}
.tmbg>span{
 font-size: 12px;
 vertical-align: bottom;
}

.tmbg2{
 margin-top: 10px;
 font-size: 12px;
 float: right;
 color: #C12E4D;
 vertical-align: bottom;
}
.tmbg2>span{
 vertical-align: bottom;
 color: black
}
.box-m-b-l>ul>li{
 float: left;
}
.box-m-b-l>ul>li>img{
 margin-top: 10px;
}
.box-m-b-r>img{
 margin-left: 10px;
 margin-top: 10px;
}
.box-m-bt>img{
 float: left;
}
.box-m-bt>div>a>h1{
 font-size: 18px;
 color: #9B7560;
}
.box-m-bt>div>p{
 font-size: 12px;
}
.box-b{
 clear: both;
 width: 894px;
 height: 80px;
 background-color: #fff;
}
.box-b>li{
 float: left;
 width: 167px;
 margin-top: 8px;
    margin-left: 10px;
}

/*我常逛的*/
.wcgd{
 width: 894px;
 height: 425px;
}
.wcgd2{
 height: 50px;
 width: 894px;
 text-align: center;
 margin-top: 10px;
}
.wcgd3{
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
}

.wcgd2>span:last-child>a{
 font-size: 14px;
 border: 1px solid #fff;
 border-radius: 10px;
 margin: 5px;
 padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
    line-height: 50px;
}
.wcgd2>span:last-child{
 float: right;
}
.wcgd2>span:last-child:hover>a{
 background-color: red;
 color: #fff;
}
.hx{
 font-weight: 100;
 color: #c1c1c1;
}

.wcgd-b{
 width: 894px;
 height: 376px;
}
.wcgd-b-l{
 width: 443px;
 height: 376px;
 border: 2px solid #FFC0D9;
 float: left;
}
.wcgd-b-r{
 width: 443px;
 height: 376px;
 border: 1px solid #6349B4;
 float: left;
}
/*亲宝贝*/
.wcgd-b-l-b>img{
 width: 100px;
}

.wcgd-b-l-b{
 width: 100px;
 height: 363px;
 background-color:#FF3386;
 float: left;
}
.wcgd-b-l-b>ul>li:not(:first-child){
 width: 64px;
 height: 19px;
 line-height: 19px;
 background-color: #FF5B9F;
 margin-top:4px;
 margin-left: 8px;
}
.wcgd-b-l-b>ul>li:not(:first-child)>a{
 color: #fff;
 font-size: 14px;
}
.wcgd-b-l-b>ul>li:first-child{
 font-size: 16px;
 color: #fff;
 pdding-top: 10px;
 margin-left: 8px;
}
.wcgd-b-l-b>ul>li:hover>a{
 text-decoration: underline;
 color: black;
}
.qbb-img1{
 width: 100px;
 height: 201px;
 float: left;
}
.qbb-img1>img,
.qbb-img3>img{
 border-bottom: 1px solid #c1c1c1;
 float: left;
}
.qbb-img2>img{
 border-bottom: 1px solid #c1c1c1;
 border-left: 1px solid #c1c1c1;
 border-right: 1px solid #c1c1c1;
 float: left;
}
.qbb-r-b{
 width: 340px;
 height: 160px;
 float: left;
}
.qbb-r-b-img>img{
 float: left;
}

/*全球购*/
.wcgd-b-l-b>.qqg>li:not(:first-child){
 width: 65px;
 height: 19px;
 line-height: 19px;
 background-color: #6349B4;
 margin-top:4px;
 margin-left: 8px;
}
.qqg{
 height: 265px;
 background-color: #826EC2;
}
.qqg>ul>li:not(:first-child)>a{
 color: #fff;
 font-size: 14px;
}
.qqg>ul>li:first-child{
 font-size: 16px;
 color: #fff;
 pdding-top: 10px;
 margin-left: 8px;
}
.wcgd-b-l-b>.qqg>li:hover>a{
 text-decoration: underline;
 color: red;
}
/*天丝新款裤子*/
.tskz>img{
 margin:15px 0;
}
/*时尚爆料王*/
.ssblw{
 width: 892px;
 height: 309px;
}
.ssblw-logo{
 width: 890px;
 height: 47px;
 line-height: 47px;
 margin-top: 10px;
}
.ssblw-logo{
 text-align: center;
}
.ssblw-logo>span:last-child>a{
 font-size: 14px;
    border: 1px solid #fff;
    border-radius: 10px;
    margin: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #fff;
    line-height: 50px;
}
.gd{
 float: right;
}
.ssblw-logo>span:last-child:hover>a{
 color: #fff;
 background: linear-gradient(to right,#FFC223,#FF8A1B);
}
.ifashion,
.aiguangjie,
.meizhuangxiu,
.quanqiugou{
 width: 222px;
 height: 255px;
 float: left;
 background-color: #fff;
 outline:1px solid #c1c1c1;
}
.ssblw-nr{
 width: 890px;
 height: 257px;
 float: left;
}
.ifashion-t{
 width: 223px;
 height: 42px;
}
.ifashion-b>img,
.ifashion-b-r>img{
 float: left;
 border-bottom: 1px solid #c1c1c1;
 margin-bottom: 17px;
 margin-left: 10px;
 margin-top: 5px;
}
/*街头潮流*/
.jtcl>img{
 margin:15px 0;
}

/*右边登录*/
.box-m-r{
 width:290px;
 height: 600px;
}
.box-m-r-t{
 width: 300px;
 height: 280px;
}
.dlzc{
 height:169px;
 background-color: #fff;
}
.dlzc>figure>img{
 margin-top: 15px;
}
.dlzc>figure>p{
 font-size: 14px;
 margin-top: 7px;
}
.dlzc>figure>figcaption>span>a{
 color: red;
 margin-top: 12px;
}
.dlzc>figure>figcaption{
 font-size: 14px;
}
.dlzc>figure{
 text-align: center;
 margin-top: 5px;
}
.kd>li{
 width: 74px;
 height: 26px;
 background-color: #FF5A04;
 border: 1px  solid #FF5A04;
 float: left;
 margin-top: 5px;
 line-height: 26px;
}
.kd>li:nth-child(1){
 width: 91px;
 height: 26px;
 color: #fff;
 background-color: #FF5A04;
 margin-left: 10px;
 margin-right: 10px;
}

.kd>li:nth-child(3){
 margin-left: 10px;
}
.kd>li:hover>a{
 color: #fff;
 font-weight: bold;
 transition-duration: 0.5s;
 color: #fff;
}
.gz{
 margin-top: 5px;
 font-size: 14px;
 background-color: #fff;
 padding: 8px;
}
.gz>span{
 margin-left:16px;
}
.gz>span:hover{
 font-weight: bold;
 border-bottom: 2px solid red;
 transition-duration: 1s;
}
.gz>a>p{
 font-size: 12px;
 margin-top: 17px;
}
.gz>a>p:hover{
 color: red;
}
/*充话费*/
.box-m-r-m{
 width:300px;
 height: 200px;
 margin-top: 5px;
}
.box-m-r-m>ul>li>a{
 font-size: 12px;
}
.box-m-r-m>ul{
 float: left;
}
.box-m-r-m>ul>li{
 width: 73px;
 height: 66px;
 margin: 1px;
 background-color: #fff;
 text-align: center;
 line-height: 30px;
}
.box-m-r-m>ul>li:hover{
 transform:scale(1.2);
 transition-duration:1s;
}
/*阿里APP*/
.box-m-r-b{
 margin-top: 5px;
 width: 300px;
 height: 119px;
 background-color: #fff;
}
.box-m-r-b>span{
 font-size: 14px;
 font-weight: 600;
 margin-right: 150px;
}
.box-m-r-b>a{
 font-size: 14px;
}
.box-m-r-b>a:hover{
 background: linear-gradient(to right,#FFC223,#FF8A1B);
}
.box-m-r-b>span,
.box-m-r-b>a{
 margin-left:15px;
}
.box-m-r-b>ul>li{
 margin-top: 10px;
 margin-left: 20px;
 float: left;
}
.box-m-r-b>ul>li:hover>img{
 transform:scale(1.2);
 transition-duration:1s;
}
/*淘宝头条*/
.tbtt{
 margin-top: 20px;
 width: 300px;
 height: 116px;
 background-color: #fff;
}
.tbtt-t{
 height: 26px;
}
.tbtt-t>img{
 margin-top: 9px;
 margin-left: 10px;
}
.tbtt-t>a{
 font-size: 12px;
 float: right;
 line-height: 26px;
 margin-right: 10px;
}
.tbtt-b{
 height: 75px;
 margin-top: 10px;
 margin-left: 10px;
}
.tbtt-b>img{
 float: left;
 margin-right: 10px;
}
.tbtt-b>div{
 float: left;
    width: 190px;
    margin-left: 5px;
}
.tbtt-b>div>a>h1{
 font-size: 14px;
 margin-bottom: 5px;
}
.tbtt-b>div>a>p{
 font-size: 12px;
}
.tbtt-t>a:hover{
 background: linear-gradient(to right,#FFC223,#FF8A1B);
 color: #fff;
}
.tbtt-b>div>a>h1:hover{
 transform:scale(1.1);
 transition-duration:0.5s;
 color: red;
 text-decoration: underline;
}

/*有好货*/
.yhh{
 width: 300px;
 margin-top: 10px;
 background-color: #fff;
 margin-bottom: 15px;
}
.yhh>img{
 margin-top: 15px;
 margin-left: 10px;
}
.md{
 height: 92px;
 margin-top: 22px;
}
.yhh>div>div{
 width: 155px;
}
.yhh>div>img,
.yhh>div>div{
 float: left;
 margin-left: 10px;
}
.yhh>div>div>a{
 font-size: 14px;
 font-weight: 900;
}
.yhh>div>div>p{
 font-size: 12px;
 margin-top: 10px;
}
.sh{
 font-size: 14px;
 color: #69ADF5;
 font-weight: 900;
}
.md>img:hover{
 transform:scale(1.5);
 transition-duration: 0.5s;
}
.md>div>a:hover{
 color: red;
 text-decoration: underline;
 transition-duration: 0.5s;
}
/*广东特产*/
.gdtc{
 margin-top: 22px;
 width: 290px;
 height: 101px;
}
.gdtc>img{
 float: left;
 margin-left: 10px;
}
.gdtc2{
 width: 155px;
 margin-left: 10px;
}
.gdtc2>a{
 font-size: 14px;
}
.gdtc2>p{
 font-size: 12px;
 margin-top: 10px;
}
.gdtc3{
 font-size: 14px;
 color: #69ADF5;
 font-weight: 900;
}
.gdtc>img:hover{
 transform:scale(1.5);
 transition-duration: 0.5s;
}
.gdtc2>a:hover{
 color: red;
 text-decoration: underline;
 transition-duration: 0.5s;
}

/*换一组*/
.hyz{
 margin-top: 14px;
 text-align: center;
}

/*热卖单品*/
.rmdp{
 clear: both;
 width: 1200px;
 height: 652px;
 margin: 0 auto;
 margin-top: 20px;
 background-color: #fff;
}
/*上*/
.rmdp-t{
 margin-top: 20px;
 height: 80px;
}
.rmdp-t>h1{
 font-size:18px;
 text-align: center;
 padding-top: 13px;
 margin-bottom: 10px;
}
.rmdp-t-b>li{
 float: left;
 margin-left: 5.7px;
}
.rmdp-t-b>li>a{
 font-size: 14px;
}
.rmdp-t-b>li:nth-child(even){
 color: #c1c1c1;
}
.rmdp-t-b>li>a:hover{
 background-color: red;
 color: #fff;
 border-radius: 4px;
}
/*中间一大块*/
.rmdp-m{
 height: 400px;
}
/*左边的图片*/
.rmdp-m-l,
.rmdp-m-m,
.rmdp-m-r{
 width: 400px;
 height: 400px;
 outline: 1px solid #c1c1c1;
 float: left;
}
.rmdp-m-l-l{
 width: 235px;
 height: 400px;
 float: left;
}
.rmdp-m-l-l>figure>figcaption{
 margin-left: 10px;
}
.jiage{
 color: red;
 font-size: 14px;
 font-weight: bold;
 margin-bottom: 5px;
}
.yuexiao{
 color:#c1c1c1;
 font-size: 12px;
 margin-bottom: 20px;
}
.rmdp-m-l-l>figure>figcaption>p:nth-child(3){
 font-size: 14px;
}
.rmdp-m-l-l>figure>figcaption>p:nth-child(4){
 color: #c1c1c1;
 font-size: 12px;
 margin-top: 40px;
}
.rmdp-m-l-l>figure{
 border-right: 1px solid #c1c1c1;
}
.rmdp-m-l-r{
 width: 162px;
 height: 400px;
 float: left;
}
.rmdp-m-l-r>figure{
 border-bottom: 1px solid #c1c1c1;
}
.rmdp-m-r-t>figure>figcaption{
 margin-left: 10px;
}
.jiage2{
 font-size: 12px;
 font-weight: 900;
 color: red;
 margin-bottom: 5px;
}
.yuexiao2{
 color:#c1c1c1;
 font-size: 12px;
 margin-bottom: 4px;
}
.baoyou{
 font-size: 10px;
 background-color: #8EC04E;
 color: #f1f1f1;
 padding: 1px;
}
.rmdp-m-r-b>figure{
 border-top: 1px solid #c1c1c1;
 border-bottom: 1px solid #c1c1c1;
}
.rmdp-m-r-b>figure>figcaption{
 margin-left: 10px;
}
.rmdp-m figure>a>img:hover{
 transform:scale(1.3);
 transition-duration: 1s;
}
.baoyou2{
 font-size: 10px;
 background-color:#FC4720;
 color: #fff;
 padding: 1px;
}
.xiezi{
 width: 159px;
 height: 158px;
}

/*下面部分*/
.rmdp-b>ul>li{
 float: left;
 margin:12px;
}

/*消费者*/
.xfz{
 width: 1200px;
 height: 221px;
 margin: 0 auto;
}

/*消费者保障*/
.xfzbz,
.xssl,
.fkfs,
.tbts{
 width: 300px;
 height: 221px;
 float: left;
 padding: 68px 60px  63px 24px;
 box-sizing: border-box;
}

.xfzbz2{
 margin-bottom: 10px;
}
.xfbz-bt{
 font-size: 16px;
 font-weight: bold;
}
.xfbz-nr{
 font-size: 14px;
 color: #c1c1c1;
 line-height: 2;
}

/*固定导航栏*/
.gddhl{
 width: 50px;
 height: 450px;
 position: fixed;
 top: 35%;
    right: 14%;
}
.gddhl>li{
 width: 50px;
 height: 50px;
 border-bottom: 1px solid #c1c1c1;
 padding:5px 10px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: #fff;
}
.gddhl>li:first-child{
 background-color: #FF4302;
 border-radius: 10px 10px 0px  0px;
}
.gddhl>li:last-child{
 border-radius: 0px 0px 10px  10px;
}
.gddhl>li:nth-child(1)>a{
 color: #fff;
 font-weight: bold;
}
.gddhl>li:nth-child(2)>a{
 color: red;
 line-height: 40px;
}
.gddhl>li:nth-child(3)>a{
 line-height: 40px;
 color: #9183FB;
}
.gddhl>li:nth-child(4)>a{
 color: #ABC049;
 line-height: 40px;
}
.gddhl>li:nth-child(5)>a{
 color: #A3755C;
 line-height: 40px;
}
.gddhl>li:nth-child(6)>a{
 color: #FF5602;
}
.gddhl>li:nth-child(7)>a{
 line-height: 40px;
}
.gddhl>li:not(:first-child):hover{
 background: linear-gradient(45deg,#FF8B18,#FF5403);
 transition:all  1s;
}
.gddhl>li:not(:first-child):hover>a{
 color: #fff;
 font-weight: bold;
}

/*尾部*/
footer{
 clear: both;
 width: 100%;
 height: 250px;
 margin: 0 auto;
 background-color: #fff;
}
.footer-top{
 width: 1200px;
 height: 71px;
 margin: 0 auto;
}
footer>div>ul>li{
 float: left;
 margin-left: 9px;
 font-size: 12px;
 margin-top: 10px;
}
.footer-top>ul>li:nth-child(even){
 color: #c1c1c1;
}
.footer-top>ul>li:hover>a{
 color: red;
}
.footer-top{
 border-bottom: 1px solid #c1c1c1;
}
/*关于淘宝*/
.footer-bottom{
 width: 1200px;
 height: 177px;
 margin:0 auto;
}
.gytb>li:last-child{
 color: #c1c1c1;
 margin-left: 38px;
}
.gytb>li:nth-child(12){
 color: #c1c1c1;
}
.gytb>li:hover>a{
 color: red;
}

/*文化经营*/
.whjy{
 clear: both;
}
.whjy>li:nth-child(2),
.whjy>li:nth-child(4),
.whjy>li:nth-child(5),
.whjy>li:nth-child(6),
.whjy>li:nth-child(7){
 color: #c1c1c1;
}
.whjy>li:hover>a{
 color: red;
}

/*浙公网安备*/
.zgwab{
 font-size: 12px;
 margin-top: 35px;
}
.zgwab:hover>a{
 color: red;
}
/*图片*/
.tupian>li{
 float: left;
 margin-right: 20px;
}

原文地址：https://www.cnblogs.com/yehongrun/p/8976146.html

时间： 2024-11-10 06:12:03

淘宝网页练习的相关文章

ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法

ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法 近来正在分析淘宝中商品的信息,效果发生乱码,如: 原因便是中文字符格式发生冲突,ASP.NET MVC 默认采用utf-8,可是淘宝网页采用gbk.正在网上找了一下,最常常的搞定方法便是修改web.config:< system.web> ...... < globalization requestEncoding="gbk" responseEncoding="gbk" culture=&

【脚本】淘宝网页标题显示价格+网址参数过滤

脚本传送门:https://greasyfork.org/zh-CN/scripts/10571-%E6%B7%98%E5%AE%9D-%E6%A0%87%E9%A2%98%E4%BB%B7%E6%A0%BC-url%E8%BF%87%E6%BB%A4 一个用于在网页标题上显示淘宝商品促销价格的脚本,且具备过滤无用地址参数的功能,方便你在将商品添加至收藏夹时,可以记录当时的价格,方便日后比价.同时,你在使用浏览器的[复制网页标题和网址]功能时,以更简洁的内容分享商品信息给他人. ===== 功能

浏览淘宝网页背后所发生的事情

DNS服务器 - 转换成IP地址 负载均衡的第一步:通过DNS解析域名时,将你的访问分配到不同的入口,同时尽可能保证你所访问的入口是所有入口中可能较快的一个. 成功访问实际的入口IP地址,这时产生了一个PV(Page View,页面访问量) 生成淘宝首页页面的服务器可能有成百上千台.你的一次访问会被分配给其中的一台服务器完成.这个过程要保证公正.公平.平均.其中最关键的便是LVS(Linux Virtual Server,世界上最流行的负载均衡系统之一.) 浏览器并发加载的资源数量是有限的.淘宝

淘宝网页充值代码

淘宝的样式初始化: body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }h

学习淘宝网页中的代码

1.HTML <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML.DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容. HTML5 不基于 SG

淘宝网的质量属性的场景描述

质量属性 可用性 简单介绍 系统应能长期稳定地提供服务,近似7 X 24小时工作强度: 在负载过重或是系统崩溃的情况下,能保证用户请求不丢失: 当系统出现故障或崩溃时,恢复时间不超过两小时: 场景部分 可能的值 刺激源 业务快速发展 刺激 PHP模式易开发.难维护 制品 淘宝的网页 环境 更换技术 相应 改PHP为Java, 改MySql为oracle 相应度量 2004年开始稳定的供其使用 质量属性 可修改性 简单介绍 修改某个子系统或服务时,不影响其他子系统或服务: 场景部分 可能的值 刺激

HTML+CSS-淘宝网页

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> 4 <title>淘宝网页</title> 5 </head> 6 <body bgcolor="ffccff"> 7 <p <font: size=+4 color="

6.4 DIV布局制作淘宝首页

为了加深对DIV层布局的理解,下面就来体验一把什么是DIV层布局. 使用Dreamweaver来绘制如图1所示的层布局页面,具体操作岁骤如下: 图1 DIV层布局页面 (1) 打开Dreamweaver,新建一个空白文档. (2) 在插入栏的“布局”类别中单击“绘制层”按钮. (3) 在“文档”窗口的“设计”视图中,执行下列操作之一: ●  按下鼠标左键拖动以绘制一个层. ●  通过按住Ctrl键并按下鼠标左键进行拖动来连续绘制多个层(只要不松开Ctrl键,就可以继续绘制新的层). (4) 绘制

淘宝滑动验证码研究

引言 悠闲的时候,总会去找些事做做.前些天在登录淘宝的时候,发现了滑动验证码,虽然已经不是什么新事物,但还是产生了很大的兴趣. 传统的字符输入验证码,变为了滑动验证码,这一看就是产品大师的手笔啊,不知道申请专利没有. 这种“情感化”的验证码设计,可破解度高不高呢?如果是可破解度高,那就真是验证码的一次革命变新了.还是让我先了解一下滑动验证码的资料吧! 没有Google就百度,搜一搜,让我很震惊,一般搜技术的东西,大多数来源于csdn,blogs.cn,更牛批一点的是来源于stackoverflo