2021-07-21淘宝网第二次尝试

最新推荐文章于 2022-09-15 09:05:08 发布

li_ding_ding

最新推荐文章于 2022-09-15 09:05:08 发布

阅读量1.6w

点赞数

文章标签： css

本文链接：https://blog.csdn.net/li_ding_ding/article/details/118970597

版权

     <div id="headmessage"  class="leayer clearfix">
  <ul class="fl">
    <a href="https://www.taobao.com"><li>中国大陆</li></a>
    <span class="iconfont">▼</span>
    <a href="https://www.taobao.com"><li class="f4">亲，请登录</li></a>
    <a href="https://www.taobao.com"><li>免费注册</li></a>
    <a href="https://www.taobao.com"><li>手机逛淘宝</li></a>
  </ul>
  <ul class="fr">
  <a href="https://www.taobao.com"><li>我的淘宝</li></a>
  <span class="iconfont">︾</span>
  <a href="https://www.taobao.com"><li>购物车</li></a>
   <span class="iconfont">︾</span>
   <span class="iconfont">★</span>
  <a href="https://www.taobao.com"><li>收藏夹</li></a>
  <span class="iconfont">︾</span>
  <a href="https://www.taobao.com"><li>商品分类</li></a>
  <a href="https://www.taobao.com"><li>免费开店</li></a>
  <span class="iconfont">|</span>
  <a href="https://www.taobao.com"><li>千牛卖家中心</li></a>
  <span class="iconfont">︾</span>
  <a href="https://www.taobao.com"><li>联系客服</li></a>
   <span class="iconfont">︾</span>
   <span class="iconfont">≡</span>
  <a href="https://www.taobao.com"><li>网站导航</li></a>
  <span>︾</span>
  </ul>
  </div>




  <div id="headjdp" class="leayer clearfix">
  <h1 class="ly pr">6.1狂欢</h1>
  <h3 class="go pr"><span class="GIO pa">GO&gt</span></h3>
  <div class="headjdp1 pr">
  <h3 class="hd61 pa">欢度六一</h3>
  <h4 class="klkl pa">61快乐</h4>
  <a href=""><img src=""></a>
  </div>
   <div class="headjdp2 pr">
  <h3 class="hd61 pa">淘宝家居</h3>
  <h4 class="klkl pa">史上最优</h4>
  <a href=""><img src=""></a>
  </div>
   <div class="headjdp3 pr">
  <h3 class="hd61 pa">智能设备</h3>
  <h4 class="klkl pa">超乎想象</h4>
  <a href=""><img src=""></a>
  </div>
   <div class="headjdp4 pr">
  <h3 class="hd61 pa">小米手环</h3>
  <h4 class="klkl pa">自己健康早知道</h4>
  <a href=""><img src=""></a>
  </div>
   <div class="headjdp5 pr">
  <h3 class="hd61 pa">小米电s视</h3>
  <h4 class="klkl pa">最高优惠2000</h4>
  <a href=""><img src=""></a>
  </div>
  </div>





    <div class="headss clearfix leayer">
    <div class="headlogo pr">
    <a href="https://taobao.com">
    <img src="https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png" alt"淘宝"">
    </a>
    </div>


    <div class="ssk pr">
    <form action="http://baodu.com/s" method="get">
     <label for="search" class="pr"> 宝贝 天猫 超市</label><input name="wd" id="search" value="潮流领先"><button>搜索</button>
     </form>
    <ul class="pa">
    <li><a href="https://taobao.com">新款连衣裙</a></li>
    <li><a href="https://taobao.com">四件套</a></li>
    <li><a href="https://taobao.com" class="f4">潮流T恤</a></li>
    <li><a href="https://taobao.com">时尚女鞋</a></li>
    <li><a href="https://taobao.com">短裤</a></li>
    <li><a href="https://taobao.com">半身裙</a></li>
    <li><a href="https://taobao.com">男士外套</a></li>
    <li><a href="https://taobao.com">墙纸</a></li>
    <li><a href="https://taobao.com">行车记录仪</a></li>
    <li><a href="https://taobao.com">新款男鞋</a></li>
    <li><a href="https://taobao.com">耳机</a></li>
    <li><a href="https://taobao.com">时尚女包</a></li>
    <li><a href="https://taobao.com">沙发</a></li>
    </ul>
    </div>

    <div class="headewm pr">
    <p class="smlj">扫码领奖</p>
    <a href="https://www.taobao.com"><img src="https://img-blog.csdnimg.cn/2022010611451270274.png" alt="淘宝二维码"></a>
    </div>
    </div>







  <div id="nav" class="clearfix leayer">
  <h2 class="fl">主题市场</h2>
  <ul class="fl">
  <li class="size"><a href="http://baodu.com">天猫</a></li>
  <li class="size"><a href="http://baodu.com">聚划算</a></li>
  <li class="size"><a href="http://baodu.com">天猫超市</a></li>
  <li class="line">|</li>
  <li><a href="http://baodu.com">司法拍卖</a></li>
  <li><a href="http://baodu.com">飞猪</a></li>
  <li><a href="http://baodu.com">旅行</a></li>
  <li><a href="http://baodu.comsssss">天天特卖</a></li>
  <li><a href="http://baodu.com">淘小铺</a></li>
  <li class="line">|</li>
  <li><a href="http://baodu.com">造点新货</a></li>
  <li><a href="http://baodu.com">苏宁易购</a></li>
  <li><a href="http://baodu.com">淘宝心选</a></li>
  <li><a href="http://baodu.com">智能生活</a></li>
  </ul>
  </div>

  <div id="firstcreen" class="clearfix leayer">
  <!-- 左边的内容 -->
  <div class="firstleft fl">
  <!-- 侧边导航 -->
  <div class="sidenav fl">
  <ul class="nvzhuang">
  <li>
  <a href="https://www.taobao.com">女装</a> /
  <a href="https://www.taobao.com">内衣</a> /
  <a href="https://www.taobao.com">家居</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">女鞋</a> /
  <a href="https://www.taobao.com">男鞋</a> /
  <a href="https://www.taobao.com">箱包</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">母婴</a> /
  <a href="https://www.taobao.com">童装</a> /
  <a href="https://www.taobao.com">玩具</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">男装</a> /
  <a href="https://www.taobao.com">户外运动</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">美妆</a> /
  <a href="https://www.taobao.com">彩妆</a> /
  <a href="https://www.taobao.com">个护</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">手机</a> /
  <a href="https://www.taobao.com">数码</a> /
  <a href="https://www.taobao.com">企业</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">大家电</a> /
  <a href="https://www.taobao.com">生活电器</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">零食</a> /
  <a href="https://www.taobao.com">生鲜</a> /
  <a href="https://www.taobao.com">茶酒</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">厨具</a> /
  <a href="https://www.taobao.com">收纳</a> /
  <a href="https://www.taobao.com">清洁</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">家纺</a> /
  <a href="https://www.taobao.com">家饰</a> /
  <a href="https://www.taobao.com">鲜花</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">图书音像</a> /
  <a href="https://www.taobao.com">文具</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">医药保健</a> /
  <a href="https://www.taobao.com">进口</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">汽车</a> /
  <a href="https://www.taobao.com">二手车</a> /
  <a href="https://www.taobao.com">用品</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">房产</a> /
  <a href="https://www.taobao.com">装修家具</a> /
  <a href="https://www.taobao.com">建材</a><span>&gt</span>
  </li>
  <li>
  <a href="https://www.taobao.com">手表</a> /
  <a href="https://www.taobao.com">眼镜</a> /
  <a href="https://www.taobao.com">珠宝饰品</a><span>&gt</span>
  </li>
  </ul>
  </div>





  <!-- 图片1容器 -->
  <div class="img1box fr">
   <div class="pic fl">
      <div class="ggt1">
          <a href="https://www.taobao.com"><img src="https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg" alt=""></a>


      </div>
      <button class="iconfont leftbtn">&lt</button>
      <button class="iconfont rightbtn">&gt</button>
      <div class="circle">
      <span class="activ f4"></span> <span></span> <span></span> <span></span> <spane></span>
      </div>

   </div>
   <div class="ad fr">
      <a href="https://www.taobao.com"><img src="https://img.alicdn.com/imgextra/i3/6000000006177/O1CN016lXnDO1vV7BsmMORv_!!6000000006177-0-octopus.jpg_290x290q90.jpg_.webp" alt=""></a>

   </div>

  </div>




  <!-- 图片2容器 -->
  <div class="img2box fr">
      <div class="pic fl">
        <div class="pictitle">
          <div class="tixt clearfix">
              <h3 class="fl bg f4">理想生活上天猫</h3>
              <span class="fr"><i class="f4">1</i>/6</span>
          </div>
          <div class="line">
            <span></span>
          </div>   
        </div>

   <div class="ggt2">
          <a href="https://www.taobao.com"><img src="https://img.alicdn.com/tfs/TB1NASFejDpK1RjSZFrXXa78VXa-502-380.jpg_240x240q90.jpg" alt=""></a>
           <a href="https://www.taobao.com"><img src="https://img.alicdn.com/imgextra/i3/700459267/O1CN01ga1mwD2IKL2CVvDC1_!!700459267.png_240x240q90.jpg" alt=""></a>

      </div>
   </div>
   <div class="ad fr">
      <h3 class="title">今日热卖</h3>
      <a href="https://www.taobao.com"><img src="https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg" alt=""></a>

   </div>
  </div>







  <!-- 淘宝头条 -->
  <div class="news fl">
   <div class="hd fl">
      <h3><a href="https://www.taobao.com" class="f4">淘宝头条</a></h3>
      <p>让你的生活更有趣</p>
     </div>
  <div class="newlist fr">
     <div class="imtem">
      <a href="https://www.taobao.com" class="fl"><img src="https://gtms03.alicdn.com/tps/i3/TB197VzIXXXXXbJXpXXDgwcQVXX-375-130.jpg" alt=""></a>
      <h4><a href="https://www.taobao.com">微漫酱访谈第三期：超萌舞见弥音音</a></h4>
      <p><a href="https://www.taobao.com">哈喽，大家好，我是你们可爱的微漫酱，今天我们请到一位舞见的小姐姐做客我们的访谈事，她就是弥音音！</a></p>
      <a href="https://www.taobao.com" class="more">更多&gt</a>


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







  <!-- 右边的内容 -->
  <div class="firstright fr">

   <div class="user">
      <a href="" class="avatar"><img src="https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_50x50.jpg" alt=""></a>
      <p class="username">Hi!你好</p>
      <p class="members">
          <a href="" class="gold">领淘金币底钱</a>
          <a href="" class="club">会员俱乐部</a>
      </p>
      <div class="btn">
      <button class="login">登录</button>
       <button class="register">注册</button>
        <button class="shop">开店</button>
      </div>
   </div>
<!--    举报 -->
    <a href="" class="tipoff">
        <span>网上有害信息举报专区</span>
        <i>&gt</i>
    </a>
   <!--  公告区 -->
   <div class="notice clearfix">
     <ul class="title">
       <li  class="active"><a href="#">公告</a></li>
       <li><a href="#">规则</a></li>
       <li><a href="#">论坛</a></li>
       <li><a href="#">安全</a></li>
       <li><a href="#">工艺</a></li>
     </ul>
     <ul class="conter clearfix">
       <li><a href="#" class="f5">关于全面降低淘宝网卖家收款服务费率的公告</a></li>
       <li><a href="#">新增《淘宝网汽配行业管理规范》公示通知《淘宝网区域零售服务</a></li>
       <li><a href="#">魔豆妈妈公益项目让母爱永不打烊！</a></li>
     </ul>

   </div>
   <!-- 图标区域 -->
   <table class="icon">
     <tr>
     <td class="item1"><a href="">
       <span></span>
        <i>充话费</i>
        </a>
     </td>
     <td class="item2"><a href="">
       <span></span>
        <i>旅行</i>
        </a>
     </td>
     <td class="item3"><a href="">
       <span></span>
        <i>车险</i>
        </a>
     </td>
     <td class="item4"><a href="">
       <span></span>
        <i>游戏</i>
        </a>
     </td>
     </tr>
     <tr>
     <td class="item5"><a href="">
       <span></span>
        <i>彩票</i>
        </a>
     </td>
     <td class="item6"><a href="">
       <span></span>
        <i>电影</i>
        </a>
     </td>
     <td class="item7"><a href="">
       <span></span>
        <i>酒店</i>
        </a>
     </td>
     <td class="item8"><a href="">
       <span></span>
        <i>理财</i>
        </a>
     </td>
     </tr>
     <tr>
     <td class="item9"><a href="">
       <span></span>
        <i>找服务</i>
        </a>
     </td>
     <td class="item10"><a href="">
       <span></span>
        <i>演出</i>
        </a>
     </td>
     <td class="item11"><a href="">
       <span></span>
        <i>水电煤</i>
        </a>
     </td>
     <td class="item12"><a href="">
       <span></span>
        <i>火车票</i>
        </a>
     </td>
     </tr>

   </table>
   <!-- app -->
   <div class="app">
     <div class="title clearfix">
       <h3 class="fl">阿里APP</h3>
       <a href="" class="fr">更多&gt</a>
     </div>
      <ul class="appicon">
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451277641.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451250806.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451220966.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451397586.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451277641.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451277641.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451277641.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451277641.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451277641.png" alt=""></a></li>
      <li><a href="#"><img src="https://img-blog.csdnimg.cn/2022010611451277641.png" alt=""></a></li>
      </ul>
   </div>
  </div>
  </div>
    <!-- 有好货 与爱逛街 -->
    <div class="love leayer clearfix">
     <!-- 有好货 -->
     <div class="goods fl">
       <div class="head clearfix">
        <h3 class="fl">
            <span>有好货</span>
            <a href=""><img src="https://img.alicdn.com/imgextra/i1/O1CN01EjcAPM25IsjiwGyYs_!!6000000007504-2-tps-65-20.png" alt="有好货"></a>
        </h3>
        <a href="" class="fr change">换一换</a>
       </div>
        <ul class="list">
        <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i1/1638204977/O1CN01TtTq8p1mdVtWSFf1I_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i2/3484870548/O1CN019WLizP1Fv1j9otSnC_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i2/1821202577/O1CN01WUCNkD1UuJLN9YBL2_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i3/2182804198/O1CN01b6I6dx1gsjLOzzfvD_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded///gma.alicdn.com/bao/uploaded/i4/124004688/O1CN017GfmXE1kV9S4f9Htf_!!0-saturn_solar.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i1/2208803963649/O1CN01Q883mz1cpHuxMIgsg_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>


        </ul>

     </div>
     <!--  爱逛街 -->
      <div class="goods fr shooping">
           <div class="head clearfix">
        <h3 class="fl">
            <span>爱逛街</span>
            <a href=""><img src="https://img.alicdn.com/imgextra/i1/O1CN01EjcAPM25IsjiwGyYs_!!6000000007504-2-tps-65-20.png" alt="有好货"></a>
        </h3>
        <a href="" class="fr change">换一换</a>
       </div>
        <ul class="list">
        <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i1/1638204977/O1CN01TtTq8p1mdVtWSFf1I_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i2/3484870548/O1CN019WLizP1Fv1j9otSnC_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i2/1821202577/O1CN01WUCNkD1UuJLN9YBL2_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i3/2182804198/O1CN01b6I6dx1gsjLOzzfvD_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded///gma.alicdn.com/bao/uploaded/i4/124004688/O1CN017GfmXE1kV9S4f9Htf_!!0-saturn_solar.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
          <li>
           <a href=""><img src="https://img.alicdn.com/bao/uploaded/i1/2208803963649/O1CN01Q883mz1cpHuxMIgsg_!!0-item_pic.jpg_200x200q90.jpg_.webp" alt=""></a>
           <h4><a href="">夏季潮鞋真皮休闲阿甘鞋</a></h4>
           <p><a href="">欧洲站男鞋夏季潮鞋真皮休闲阿甘鞋运动板鞋增高小白鞋百搭乐福鞋</a></p>
        </li>
        </ul>
      </div>
    </div> 
       
       <!-- 右边固定定位导航 -->

       <div id="tool">
       <div class="btn">
         <a href="" class="f4 active">爱逛 好货</a>
         <a href="" class="f5">好店 直播</a>
         <a href="" class="f6">品质 特色</a>
         <a href="" class="f7">实惠 热卖</a>
         <a href="" class="f4">猜你 喜欢</a>
         <a href="">反馈</a>
         <a href="">暴恐 举报</a>




       </div>




       </div>









  </div>

#headmessage {
width:1200px;

}
#headmessage li,span{
display:inline-block;
margin:7px;
}
body{
background-color:#fca;
}

#headjdp{
margin:0 auto;
width:1600px;
height:90px;
background-image:linear-gradient(to right,#ffff40,#f50,#ffff30,blue,tan)

}
.ly{
font-size:40px;
left:100px;
margin:0 auto;
color:#fff;
}
.GIO{
width:100px;
height:20px;
left:110px;
top:-10px;
border-radius:20px;
text-align:center;
font-size:15px;
color:#fff;
background-color:green;
}
.headjdp1,.headjdp2,.headjdp3,.headjdp4,.headjdp5{
left:280px;
top:-50px;
width:190px;
height:70px;
background-color:purple;
border-radius:20px;
}
.headjdp2{
top:-120px;
left:500px;
background-color:green;
}
.headjdp3{
top:-190px;
left:700px;
background-color:blue;
}
.headjdp4{
top:-260px;
left:900px;
background-color:gray;
}
.headjdp5{
top:-330;
left:1100px;
background-color:pink;
}
.hd61{
left:10px;
font-size:20px;
color:#fff;
}
.klkl{
left:10px;
top:25px;
font-size:10px;
color:#fff;
}

.headss{
width:1600px;
height:200px;
margin:0 auto;
background-color:#fca;
}
.ssk{
width:1000px;
left:200px;
top:-5px;
}
label{
top:-40px;
left:160px;
font-weight:900;
font-size:20px;
color:#f50;
border-radius:20px;
}
input{
border: 3px solid #f40;
width:600px;
height:50px;
border-radius:20px 0 0 20px;
text-indent:10px;
}
button{
height:50px;
width:80px;
color:#fff;
background-color:#f40;
border:1px solid #f40;
border-radius:0 20px 20px 0;
}
.headlogo{
left:120px;
top:70px;
cursor:pointer;
}
.ssk li{
display:inline-block;
}
.ssk ul{
left:160px;
}
.headewm{
float:right;
right:400px;
top:-90px;

}
.headewm p{
width:110px;
color:#f40;
text-indent:30;
background-color:#fff;
}
.headewm a img{
width:90px;
height:90px;
border:10px solid #fff;
}

#nav{
width:1190px;
height:30px;
}
#nav h2{
width:190px;
height:30px;
line-height:30px;
color:#fff;
font-size:16px;
text-align:center;
background-color:#f50;
text-align:center;
border-radius:20px 0 0 0;
}
#nav h2:hover{
font-size:20px;
}
#nav ul{
height:30px;
width:1000px;
/width:calc(100% - 190px);/
background-image:linear-gradient(to right,#ffee40,#f50)
}

#nav ul li{
float:left;
line-height:30px;
margin:0 3px;
font-size:14px;
color:#fff;
padding-left:5px;
}

#nav ul li a{
color:#fff;
font-size:14px;
font-weight:bold;
}
#nav ul li a:hover{
font-weight:900;
font-size:20px;
}
#nav ul li span{
font-size:12px;
float:right;
color:#999;
}

/首屏内容/
#firstcreen{
width:1190px;
}
.firstleft{
width:890px;
}
/侧边导航/
.sidenav{
width:190px;
height:522px;
background:#fff;
border:1px solid #f50;
box-sizing:border-box; /边框对齐/
/*border-top:none; */ /隐藏边框向上没数值/
}
.sidenav .nvzhuang li a:hover{
font-size:20px;
color:#f40;
}
/图片1容器/
.img1box{
width:695px;
height:282px;
margin-top:10px;

}
/图片2容器/
.img2box{
width:695px;
height:230px;
}
/淘宝头条/
.news{
width:890px;
height:100px;
box-sizing:border-box;
padding:13px 13px 13px 20px;
background-color:#fff;
}
#firstcreen .news .hd h3{
margin-top:-20px;
}
#firstcreen .news .hd {
margin-top:30px;
}

#firstcreen .news .newlist .imtem a img{
width:140px;
height:80px;
}

#firstcreen .news .newlist{
width:680px;
position:relative;
}
#firstcreen .news .newlist .imtem h4{
line-height:20px;
font-size:16px;
font-weight:normal;
}
#firstcreen .news .newlist .imtem h4 a:hover{
color:#f40;
font-weight:900;
}

#firstcreen .news .newlist .imtem p{
line-height:20px;
font-size:14px;
}
#firstcreen .news .newlist .imtem p a{
color:#666;
}
#firstcreen .news .newlist .imtem p a:hover{
color:#f55;
font-weight:700;
}
#firstcreen .news .newlist .more{
position:absolute;
top:0;
right:0;
color:#999;
}
#firstcreen .news .newlist .more:hover{
color:#ff5000;
font-size:15px;
}

#firstcreen .nvzhuang li:hover{
background:#ffe4dc;
color:#f50;
}
#firstcreen .nvzhuang li a:hover{
text-decoration:underline;
color:#f50;
}

.nvzhuang li{
text-indent:7px;
margin:3px;
font-size:12px;
line-height:16px;
transition: background-color:0.3s;
}
.nvzhuang a{
color:#999;
}

.img1box .pic:hover button{
display:block
}

.img1box .pic button{
width:10px;
height:30px;
line-height:30px;
color:#fff;
cursor:pointer;
border:none;
background-color:rgba(0,0,0,0.3);
position:absolute;
top:50%;
margin-top:-15px;
display:none;

}
.img1box .pic .leftbtn{
left:0px;
border-radius:0 20px 20px 0;
}
.img1box .pic .rightbtn{
right:0px;
border-radius:20px 0 0 20px;
}
.img1box .pic{
width:520px;
position:relative;
}

.img1box .pic .circle{
position:absolute;
bottom:15px;
left:50px;
background-color: rgba(255,255,255,0.3);
border:10px;
padding:0;
margin-left:195px;
}

.img1box .pic .circle span{
display:inline-black;
width:8px;
height:8px;
border-radius:50px;
margin:0 4px;
cursor:pointer;
}

.firstleft .img2box .tixt .bg{
font-size: 10px;
}

.firstleft .img2box .pictitle .line{
height:3px;
background-color:#ff1648;
position:relative;
}

.firstleft .img2box .pictitle .line span{
position:absolute
left:0;
margin:0;
width:87px;
height:3px;
background-color:#000;

}

.firstleft .img2box .ggt2{
height:200px;
width:520px;
/display:table-cell;图片垂直居中
vertical-align: middle;/
position:relative;
display:flex;/弹性盒模型/
justify-content: space-around;/水平居中/
align-items: center；/上下间距均分/
}

.firstleft .img2box .ad .title{
height:25px;
line-height:25px;
font-size:12px;
color:#f40;
}

/右边的内容/
.firstright{
width:295px;
margin-top:10px;
}
/用户/
.firstright .user{
height:140px;
padding-top:5px;
}

/头像/
.firstright .user .avatar{
display:block;
width:50px;
height:50px;
margin:0 auto;
text-align:center;
border-radius:50%;
overflow:hidden;/超出部分隐藏/
}
.firstright .user .avatar img{
width:50px;
height:50px;
}
.firstright .user .username{
text-align:center;
line-height:16px;

}
.firstright .user .members{
text-align:center; /居中对齐/
font-size:0;

}
.firstright .user .members a{
display:inline-block;
font-size:12px;
border-radius:9px;
margin:0 2px;
padding:0 10px 0 20px;
background:#ffe4dc;
}
.firstright .user .btn{
text-align:center;
}
.firstright .user .btn button{
width:75px;
height:25px;
line-height:25px;
margin:12px 2px 0 2px;
color:#fff;
font-weight:bold;
border-radius:4px;
border:none;
background-image:linear-gradient(to right,#ff9000,#ff5000)
}
.firstright .user .btn button .login{
width:92px;
}

/举报/
.firstright .tipoff{
display:block;
height:26px;
line-height:26px;
color:#f40;
background:#ffe4dc;
text-align:center;
}
.firstright .tipoff span{
position:relative;
top:-7px;
}
.firstright .tipoff i{
position:relative;
top:-5px;
left:30px;
font-size:16px;

}

/ /
.firstright .notice{
height:108px;
background-color:#fff;
}
.firstright .notice .title{
text-align:center;
padding-top:10px;
font-size:0;
}
.firstright .notice .title li{
display:inline-block;
font-size:12px;
line-height:20px;
padding:0 4px;
margin: 0 10px;
}

.firstright .notice .title li.active{
font-weight:bold;
border-bottom:2px solid #f40;
}

.firstright .notice .title li a:hover{
color:#f40;
font-size:16px;
}
.firstright .notice .conter{
margin:0 12px;
padding-top:3px;
}

.firstright .notice .conter li a:hover{
color:#ff5000;
}

/ /
.firstright .icon{
width:295px;
height:230px;
background-color:#fff;
table-layout: fixed; /* 定义列表的算法，fixed的计算方式为根据表格宽度自动计算列宽，每列宽度为均分整个表格的宽度*/
}

.firstright .icon td{
border:1px solid #f4f4f4;
text-align:center;
}

.firstright .icon span{
display:block;
width:24px;
height:24px;
margin:0 auto;

}
.firstright .icon i{
line-height:24px;
color:#f33;
}
.firstright .app{
height:105px;
background:#fff;
}

.firstright .app h3{
font-size:14px;
padding-left:14px;
}
.firstright .app a{
margin:10px;
}
.firstright .app a:hover{
color:#f40;
}
.firstright .app .appicon{
text-align:center;
font-size:0;
}
.firstright .app .appicon li{
display:inline-block;
width:32px;
height:28px;
margin:0 10px 8px 10px;
}
.firstright .app .appicon li img{
width:32px;
height:28px;
}
.firstright .app .appicon li img:hover{
width:40px;
height:40px;
}

.love{
width:1190px;
}

/有好货/
.goods{
width:590px;
height:658px;
background-color:#fff;
margin-top:10px;
}

.goods .head{
height:10px;
margin:10px;
padding: 10px;
line-height:10px;
}
.goods .head .h3 .span{
height:24px;
}
.goods .head .change{
color:#999;
}
.goods .head .change:hover{
color:#ff5000;
}

.goods .list{
font-size:none;
text-align:center;
}
.goods .list li{
width:180px;
display:inline-block;
margin:0px 0px 35px 0px;
}
.goods .list li h4 a{
height:24px;
line-height:24px;
font-size:15px;
}
.goods .list li h4 a:hover{
color:#f40;
}

.goods .list li p{
height:24px;
line-height:24px;
font-size:14px;
color:#f99;
}

/右边固定定位导航/

#tool{
width:50px;
height:350px;
position:fixed;
top:150px;
right:5px;
}
#tool .div{
height:350px;
border-radius:20px;
overflow:hidden;
}
#tool a{
display:block;
width:50px;
height:50px;
text-align:center;
background:#fff;
word-break: keep-all;/以空格做节点换行/
}
#tool a.active{
background-image:linear-gradient(135deg,#ff9000,#ff9900)
}
#tool a:hover{
color:#900;
font-size:16px;
font-weight:900;
background-image:linear-gradient(135deg,#ff9000,#ff5000)
}

body,h1,h2,h3,h4{
margin:0;
border:none;
}
ul,li,p{
margin:0;
padding:0;
list-style:none;
}
img{
border:none;
vertical-align:middle;
}
a{
text-decoration:none;
color:#3c3c3c;
}
i{
font-style:normal;
}
input{
margin:0;
padding:0;
outline:none;
}
button{
outline:none;
}
body{
font:12px/1.5 tahoma arial,“hiragino sans gb”,"\5b8b\4f53",sans-serif;
color:#3c3c3c;
}
.clearfix:after{
content:’’;
display:block;
clear:both;
}
.fl{
float:left;
}
.fr{
float:right;
}
.leayer{
margin:0 auto;
}
.f4{
color:#f40;
}
.f5{
color:#f50;
}
.f6{
color:#8d7afd;
}
.f7{
color:a8c001;
}
.pa{
position:absolute;
}
.pr{
position:relative;
}
table{
border-collapse:collapse; /边框模式，解决1像素边框合并的模式/
}

th,td{
padding:0;
}

li_ding_ding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-21淘宝网第二次尝试

淘宝！淘-我喜欢 <div id="headmessage" class="leayer clearfix"> <ul class="fl"> <a href="https://www.taobao.com"><li>中国大陆</li></a> <span class="iconfont">▼</span> ...
复制链接

扫一扫