京东页面仿制后续来啦。。。

最新推荐文章于 2022-05-07 23:23:52 发布

莓莓儿～

最新推荐文章于 2022-05-07 23:23:52 发布

阅读量623

点赞数 1

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/fanfan_h/article/details/89977150

版权

CSS 同时被 2 个专栏收录

15 篇文章 1 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

这次又做了中间选项卡部分

     <!--搜索-->
<div class="search">
   <div class="search-h">
       <div class="logo">
           <a href="#">京东</a>
       </div>
       <div class="search-m">
          <input class="search-so" type="text" placeholder="搜索..." >
           <span class="search-gg"><i class="iconfont">&#xf012c;</i></span>
       </div>
           <ul class="search-n">
               <li class="ma-mm-1">家电家装季</li>
               <li>手机领券优惠</li>
               <li>空调钜惠</li>
               <li>150元券</li>
               <li>新机首发</li>
               <li>160减60</li>
               <li>精选种子</li>
               <li>宝贝趴</li>
           </ul>

    <div class="cad">
        <i class="iconfont">&#xf0179;</i>
      我的购物车
        <span class="cad-k">0</span>
    </div>
   <div class="nana">
       <ul class="nana-ul">
       <li class="nana-li">秒杀</li>
       <li class="nana-li">优惠券</li>
       <li class="nana-li">PLUS会员</li>
       <li class="nana-li">闪购</li>
           <li class="nana-line"></li>
       <li class="nana-li">拍卖</li>
       <li class="nana-li">京东时尚</li>
       <li class="nana-li">京东超市</li>
       <li class="nana-li">京东生鲜</li>
           <li class="nana-line"></li>
       <li class="nana-li">海囤全球</li>
       <li class="nana-li">京东金融</li>
       </ul>
   </div>
 </div>
</div>
  <!--中间选项卡-->
<div class="xxk">
    <div class="xxk-left">
        <ul class="menu-li">
            <li><a href="#">家用电器</a>
                <div class="kuang">家电馆</div>
            </li>
            <li><a href="#">手机</a><span>/</span><a href="#">运营商</a>
                <div class="kuang">玩3c</div>
            </li>
            <li><a href="#">电脑</a><span>/</span><a href="#">办</a>
                <div class="kuang">玩3c</div>
            </li>
            <li><a href="#">家居</a><span>/</span><a href="#">家具</a><span>/</span><a href="#">家装</a>
                <div class="kuang">家装城</div>
            </li>
            <li><a href="#">男女</a><span>/</span><a href="#">童</a><span>/</span><a href="#">内衣</a>
                <div class="kuang">男装</div>
            </li>
            <li><a href="#">美妆</a><span>/</span><a href="#">个人洗护</a><span>/</span><a href="#"> 宠物</a>
                <div class="kuang">清洁用品</div>
            </li>
            <li><a href="#">女箱包</a><span>/</span><a href="#"> 钟表</a><span>/</span><a href="#">珠宝</a>
                <div class="kuang">自营鞋靴</div>
            </li>
            <li><a href="#">男鞋</a><span>/</span><a href="#"> 运动</a><span>/</span><a href="#"> 户外</a>
                <div class="kuang">体育服务</div>
            </li>
            <li><a href="#">房产</a><span>/</span><a href="#"> 汽车</a><span>/</span><a href="#">汽车用品</a>
                <div class="kuang">全新汽车</div>
            </li>
            <li><a href="#">母婴</a><span>/</span><a href="#">玩具</a><span>/</span><a href="#">乐器</a>
                <div class="kuang">母婴</div>
            </li>
            <li><a href="#">食品</a><span>/</span><a href="#">酒类</a><span>/</span><a href="#">生鲜</a><a href="#">特产</a>
                <div class="kuang">生鲜</div>
            </li>
            <li><a href="#">艺术</a><span>/</span><a href="#">礼品鲜花</a><span>/</span><a href="#">农资绿植</a>
                <div class="kuang">京东礼品</div>
            </li>
            <li><a href="#">医药</a><span>/</span><a href="#">保健</a><span>/</span><a href="#">计生情趣</a>
                <div class="kuang">专科用药</div>
            </li>
            <li><a href="#">图书</a><span>/</span><a href="#">文娱</a><span>/</span><a href="#">电子书</a>
                <div class="kuang">图书</div>
            </li>
            <li><a href="#">机票</a><span>/</span><a href="#">酒店</a><span>/</span><a href="#">旅游生活</a>
                <div class="kuang">本周热推</div>
            </li>
            <li><a href="#">理财</a><span>/</span><a href="#">众筹</a><span>/</span><a href="#">白条</a><span>/</span><a href="#">保险</a>
                <div class="kuang">金融首页</div>
            </li>
            <li><a href="#">安装</a><span>/</span><a href="#">维修</a><span>/</span><a href="#">清洗保养</a>
                <div class="kuang">京东服务</div>
            </li>
            <li><a href="#">工业品</a></li>
            <div class="kuang">企业购</div>
        </ul>
    </div>
     <div class="xxk-mid1">
        <!--banner图-->
        <div class="xxk_mid11">
            <img src="image/banner.jpg ">
        </div>
    </div>
    <div class="xxk-mid2">
        <div class="mid2_l">
            <img src="image/260ce8186483d8da.jpg">
        </div>
        <div  class="mid2_m">
            <img src="image/9ebef5641572e459.jpg">
        </div>
        <div  class="mid2_r">
            <img src="image/3bc71711aaa6fda.jpg">
        </div>
    </div>
    <div class="xxk-right">
      <div class="right_tu">
          <div class="right_tu_sho">
              <a href="#">
                  <img src="image/no_login.jpg">
              </a>
          </div>
          <div class="rig_dl">
              <p class="rig_dl_q" >Hi~欢迎来到京东</p>
              <p><a class="rig_dl_w" href="">登录</a><a class="rig_dl_c" href="">注册</a></p>
          </div>
          <div class="right_mi">
              <a  href="#" class="rig_mi1">新人福利</a>
              <a href="#" class="rig_mi2">PLUS会员</a>
          </div>
      </div>
      <div class="right_ru">
          <div class="right_news">
              <div>
                  <span class="news_title">京东快报</span>
                  <a class="news_more" href="#">更多<i class="iconfont ">&#xf02af;</i></a>
              </div>
              <ul class="right_ul">
                  <li class="news_ml"><span>推荐</span><a href="#">新iPhone发布,iPhone 8再见了!</a></li>
                  <li class="news_ml"><span>热议</span><a href="#">华为宣布5G收费标准,多国运营商表示接受不了</a></li>
                  <li class="news_ml"><span>HTO</span><a href="#">官宣好消息：华为大部分手机都有5G功能</a></li>
                  <li class="news_ml"><span>热评</span><a href="#">中国移动发布5G套餐，流量每月5TB起</a></li>
              </ul>
          </div>
      </div>
      <div class="right-pu">
          <div class="right-p">
              <ul >
                  <li><i class="iconfont biu">&#xf00a2;</i>
                      <span>话费</span>
                  </li>
                  <li><i class="iconfont biu">&#xf012b;</i>
                      <span>酒店</span>
                  </li>
                  <li><i class="iconfont biu">&#xf0202;</i>
                      <span>机票</span>
                  </li>
                  <li><i class="iconfont biu">&#xf00aa;</i>
                      <span>游戏</span>
                  </li>
                  <li><i class="iconfont biu">&#xf00a2;</i>
                      <span>话费</span>
                  </li>
                  <li><i class="iconfont biu">&#xf012b;</i>
                      <span>酒店</span>
                  </li>
                  <li><i class="iconfont biu">&#xf0202;</i>
                      <span>机票</span>
                  </li>
                  <li><i class="iconfont biu">&#xf00aa;</i>
                      <span>游戏</span>
                  </li>
                  <li><i class="iconfont biu">&#xf00a2;</i>
                      <span>话费</span>
                  </li>
                  <li><i class="iconfont biu">&#xf012b;</i>
                      <span>酒店</span>
                  </li>
                  <li><i class="iconfont biu">&#xf0202;</i>
                      <span>机票</span>
                  </li>
                  <li><i class="iconfont biu">&#xf00aa;</i>
                      <span>游戏</span>
                  </li>
              </ul>
          </div>
      </div>
      </div>
    </div>

在这里插入图片描述
这真的是一个考验耐心的工作！！！
下一部分：

<div class="ZT">
    <div class="f1">
        <div class="f1-a">
            <div class="f1_ms">京东秒杀</div>
            <div class="f1_word">FLASH DEALS</div>
            <div class="f1_ico"></div>
            <div class="f1_dfg">本场距离结束还剩</div>
            <div class="djs">
                <div class="djs_1">
                    <div class="time">21</div>
                    <div class="red_line"></div>
                </div>
                <div class="djs_1">
                    <div class="time">13</div>
                    <div class="red_line"></div>
                </div>
                <div class="djs_1">
                    <div class="time">14</div>
                    <div class="red_line"></div>
                </div>
            </div>
        </div>
        <div class="f1-b">
            <div class="f1b1">
              <div class="f1b_btn">
                  <i class="iconfont sk_left">&#xf0292;</i>
                  <i class="iconfont sk_right">&#xf02af;</i>
              </div>
                <!--每一张图片-->
             <div class="fb1_yty">
                  <div class="sk_io">
                      <div class="sk_img">
                        <img src="image/tya.jpg" alt="">
                      </div >
                      <a href="#" class="sk_ai">OPPO Reno手机 全景屏拍照游戏新品手机 4800W像素隐藏式摄像 极夜黑（6G+128G） 超值套装"</a>
                      <div class="sk_price">
                          <span class="sk_nowprice">￥2999.00</span>
                          <span class="sk_proprice"><del>￥3100.00</del></span>
                      </div>
                  </div>
                  <div class="sk_io">
                      <div class="sk_img">
                        <img src="image/58ff1c41N66a19b7c.jpg" alt="">
                      </div >
                      <a href="#" class="sk_ai">新西兰进口 红印 RedSeal 黑糖1瓶 500g </a>
                      <div class="sk_price">
                          <span class="sk_nowprice">￥29.00</span>
                          <span class="sk_proprice"><del>￥48.00</del></span>
                      </div>
                  </div>
                  <div class="sk_io">
                      <div class="sk_img">
                        <img src="image/acd857aed61c6e2e.jpg" alt="">
                      </div >
                      <a href="#" class="sk_ai">TSL谢瑞麟 18K金彩金玫瑰金手链 17+3CM幸运花转运珠 K金手链AE118 定价类 17+3cm </a>
                      <div class="sk_price">
                          <span class="sk_nowprice">￥999.00</span>
                          <span class="sk_proprice"><del>￥1790.00</del></span>
                      </div>
                  </div>
                  <div class="sk_io">
                      <div class="sk_img">
                        <img src="image/d3847e257efcf159.png" alt="">
                      </div >
                      <a href="#" class="sk_ai">超薄进口机芯/瑞士爱沃驰IW手表男表男士机械表全自动时尚休闲百搭防水腕表
                      </a>
                      <div class="sk_price">
                          <span class="sk_nowprice">￥899.00</span>
                          <span class="sk_proprice"><del>￥2280.00</del></span>
                      </div>
                  </div>
             </div>
            </div>
            <div class="f1b2">
                <div class="f1b2-1">
                    <img src="image/e6c5.jpg" alt=""/>
                </div>
            </div>
        </div>

    </div>
    <div class="f2">
      <div class="f2-son">
        <div class="f2-a">
            <div class="f2a1">
                <span class="f2a_phb">排行榜</span>
                <i class="iconfont f2a_hd_arrow">&#xf02af;</i>
                <span class="f2a_zn">专属你的购物指南</span>
            </div> <!--排行榜标题-->
            <ul class="f2a_xzd">
                <li>水果</li>
                <li>饮料冲调</li>
                <li>大 家 电</li>
                <li>面部护肤</li>
                <li>流行男鞋</li>
            </ul>
            <div class="f2a2">
                  <div class="comm_ku">
                      <div class="comm_img">
                         <img src="image/5s3e.jpg" alt=""/>
                      </div>
                      <span class="cor_num">1</span>
                      <span class="top_item_name">越南进口红心火龙果 4个装 单果约330-420g 新鲜水果</span>
                  </div>
                  <div class="comm_ku">
                      <div class="comm_img">
                         <img src="image/760df1.jpg" alt=""/>
                      </div>
                      <span class="cor_num cor-m2">2</span>
                      <span class="top_item_name">红旗坡 新疆阿克苏苹果 果径80mm-85mm 约5kg 新鲜水果 </span>
                  </div>
                  <div class="comm_ku">
                      <div class="comm_img">
                         <img src="image/e0be0a3fb87cbee0.jpg" alt=""/>
                      </div>
                      <span class="cor_num cor-m3">3</span>
                      <span class="top_item_name">烟台红富士苹果 12个 净重2.6kg以上 单果190-240g 一二级混装</span>
                  </div>
            </div>
            <div class="f2-bttn">
                <div class="bttn_left"></div>
                <div class="bttn_right"></div>
            </div>
        </div>
        <div class="f2-b">
              <div class="f2a1 ">
                  <span class="f2a_phb">会买专辑</span>
                  <i class="iconfont f2a_hd_arrow">&#xf02af;</i>
                  <span class="f2a_zn">甄选优质好物</span>
              </div>
            <div class="f2b2">
                <div class="f1b_btn  ">
                    <i class="iconfont sk_left">&#xf0292;</i>
                    <i class="iconfont sk_right">&#xf02af;</i>
                </div>
               <div class="huimai">
                   <div class="huhu-pl">
                       <img src="image/c47bc9a7861f5e9b.jpg" alt=""/>
                   </div>
                   <div class="mmo-ddsf">
                       <div class="momo-p1">
                           <img src="image/3a0d5d0e722f68c1.jpg" alt=""/>
                       </div>
                       <div class="momo-p1">
                           <img src="image/5acef621N99cc20c9.jpg" alt=""/>
                       </div>
                       <div class="momo-p1">
                           <img src="image/ccb9802eb599aa92.jpg" alt=""/>
                       </div>
                   </div>
                   <h3><span class="huas_higb" >花式口红告白，斩男色掳获心中他</span></h3>
                   <div class="dailyold_subtit">甜美的爱情总会在不经意间来临，并不是只有男生表白，女生也可以为了爱情大胆的表白，面对心爱的它，
                   精致的妆容必不可少，甜美的斩男色口红，能够瞬间虏获你倾心的他，成就你的花式告白。</div>
               </div>
                <div class="f2-bttn">
                    <div class="bttn_left"></div>
                    <div class="bttn_right"></div>
                    <div class="bttn_right"></div>
                </div>
            </div>
        </div>
        <div class="f2-c">
            <div class="f2a1">
                <span class="f2a_phb">领劵中心</span>
                <i class="iconfont f2a_hd_arrow">&#xf02af;</i>
                <span class="f2a_zn">前往领劵中心</span>
            </div>
            <div class="f2c2">
              <div class="fac fac_huge1">
                  <div class="f2c_by"></div>
                  <div class="f2c_by2"></div>
                  <div class="hgs_jdz">
                      <img src="image/5bf7c4b6N715193f2.jpg" alt=""/>
                  </div>
                  <div class="infon_lifan">
                    <p class="lifan-ii"><span>￥</span>20</p>
                    <p class="cou-info_m">满0元可用</p>
                    <p class="cou-info_s">部分自营空调商品</p>
              </div>
                  <div class="cor_mimi"> 更多家电用器券</div>
            </div>
                <div class="fac fac_huge2">
                    <div class="f2c_by"></div>
                    <div class="f2c_by2"></div>
                    <div class="hgs_jdz">
                        <img src="image/59b8cfe8Nccdbe0eb.jpg" alt=""/>
                    </div>
                    <div class="infon_lifan">
                        <p class="lifan-ii"><span>￥</span>50</p>
                        <p class="cou-info_m">满880元可用</p>
                        <p class="cou-info_s">部分自营手机商品</p>
                    </div>
                    <div class="cor_mimi"> 更多手机数码券</div>
                </div>
                <div class="fac fac_huge1">
                    <div class="f2c_by"></div>
                    <div class="f2c_by2"></div>
                    <div class="hgs_jdz">
                        <img src="image/3a56e0de41566595.jpg" alt=""/>
                    </div>
                    <div class="infon_lifan">
                        <p class="lifan-ii"><span>￥</span>30</p>
                        <p class="cou-info_m">满59元可用</p>
                        <p class="cou-info_s">供销产品</p>
                    </div>
                    <div class="cor_mimi"> 更多食品饮品券</div>
                </div>
            <div class="f2-bttn">
                <div class="bttn_left"></div>
                <div class="bttn_right"></div>
            </div>
        </div>
      </div>
    </div>
    </div>
    <div class="f3">
      <div class="f2-son">
        <div class="f2-a">
            <div class="f2a1">
                <span class="f2a_phb">觅me</span>
                <i class="iconfont f2a_hd_arrow">&#xf02af;</i>
                <span class="f2a_zn">探索生活</span>
            </div>
            <div class="f3-b">
                <div class="f1b_btn  ">
                    <i class="iconfont sk_left">&#xf0292;</i>
                    <i class="iconfont sk_right">&#xf02af;</i>
                </div>
                <div class="f3b_son">
                    <div class="bbc_m">
                        <img src="./image/664157448d6d9.jpg" alt=""/>
                    </div>
                    <h3><span class="huas_higb" >花式口红告白，斩男色掳获心中他</span></h3>
                    <div class="dailyold_subtit">甜美的爱情总会在不经意间来临，并不是只有男生表白，女生也可以为了爱情大胆的表白，面对心爱的它，
                        精致的妆容必不可少，甜美的斩男色口红，能够瞬间虏获你倾心的他，成就你的花式告白。</div>
                </div>

            </div>
            <div class="f2-bttn">
                <div class="bttn_left"></div>
                <div class="bttn_right"></div>
                <div class="bttn_right"></div>
            </div>
        </div>
        <div class="f2-b">
              <div class="f2a1 ">
                  <span class="f2a_phb">发现好货</span>
                  <i class="iconfont f2a_hd_arrow">&#xf02af;</i>
                  <span class="f2a_zn">发现品质生活</span>
              </div>
             <ul class="f3b2">
                 <li>
                     <div class="f3_list">
                         <img src="./image/2072da94d8f007d6.jpg " alt="">
                     </div>
                     <span class="chosen_item_tit">美维仕 品味绅士 礼遇装</span>
                     <span class="chosen_item_subtit">辅酶Q10和叶黄素的完美结合，能够在保护心脏的同时达到保护眼睛的作用，叶黄素具有吸收蓝光的功效，帮助缓解由于戴隐形眼镜等造成的眼疲劳，保护视力不下降。</span>

                 </li>
                 <li>
                     <div class="f3_list">
                         <img src="./image/2072da94d8f007d6.jpg " alt="">
                     </div>
                     <span class="chosen_item_tit">美维仕 品味绅士 礼遇装</span>
                     <span class="chosen_item_subtit">辅酶Q10和叶黄素的完美结合，能够在保护心脏的同时达到保护眼睛的作用，叶黄素具有吸收蓝光的功效，帮助缓解由于戴隐形眼镜等造成的眼疲劳，保护视力不下降。</span>

                 </li>
                 <li>
                     <div class="f3_list">
                         <img src="./image/2072da94d8f007d6.jpg " alt="">
                     </div>
                     <span class="chosen_item_tit">美维仕 品味绅士 礼遇装</span>
                     <span class="chosen_item_subtit">辅酶Q10和叶黄素的完美结合，能够在保护心脏的同时达到保护眼睛的作用，叶黄素具有吸收蓝光的功效，帮助缓解由于戴隐形眼镜等造成的眼疲劳，保护视力不下降。</span>

                 </li>
                 <li>
                     <div class="f3_list">
                         <img src="./image/2072da94d8f007d6.jpg " alt="">
                     </div>
                     <span class="chosen_item_tit">美维仕 品味绅士 礼遇装</span>
                     <span class="chosen_item_subtit">辅酶Q10和叶黄素的完美结合，能够在保护心脏的同时达到保护眼睛的作用，叶黄素具有吸收蓝光的功效，帮助缓解由于戴隐形眼镜等造成的眼疲劳，保护视力不下降。</span>

                 </li>



             </ul>
        </div>
        <div class="f2-c">
            <div class="f2a1">
                <span class="f2a_phb">会逛</span>
                <i class="iconfont f2a_hd_arrow">&#xf02af;</i>
                <span class="f2a_zn">你想逛的都在这里</span>
            </div>
            <div class="f3c1">
                <div class="f3_c1">
                    <img src="./image/17eee9dbb08a8041.jpg" alt=""/>
                </div>
                <div class="f3_c2">
                    <div class="masshop_item">
                        <div class="mass_img">
                            <img src="image/75a5a7a8ce67f651.jpg" alt=""/>
                        </div>
                    </div>
                    <div class="masshop_item">
                        <div class="mass_img">
                            <img src="image/4188df064851448f.jpg" alt=""/>
                        </div>
                    </div>
                    <div class="masshop_item">
                        <div class="mass_img">
                            <img src="image/ff781975d79fdc28.jpg" alt=""/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
    <div class="f4">
        <div class="f4_a">
            <div class="f4ason">
                <h3 class="shenghuo">智能先锋</h3>
            </div>
        </div>
        <div class="f4_b">
            <div class="f4bson">
                <div class="f4b_box lip1">
                    <div class="f2a1">
                        <span class="f2a_phb">京东超市</span>
                        <i class="iconfont f2a_hd_arrow">&#xf02af;</i>
                        <span class="f2a_zn">精选超值好物</span>
                    </div>
                    <div class="f4a2">
                        <div class="sort_wrapper">
                            <div class="sort_2">
                                <img src="./image/98a8db78b1a385be.jpg" alt=""/>
                            </div>
                            <div class="sort_2">
                                <img src="./image/98a8db78b1a385be.jpg" alt=""/>
                            </div>

                            <div class="sort_1">
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                                <a href="#"><img src="./image/5ab22743N3d68441c (1).jpg" alt=""/></a>
                        </div>
                    </div>
                </div>
                </div>
                <div class="f4b_box lip2">
                    <div class="f2a1">
                        <span class="f2a_phb">博览群书</span>
                        <span class="f2a_zn">甄选京东优质店铺</span>
                    </div>
                    <div class="f4b2">
                        <div class="dabao">
                            <img src="./image/282ff00ee2e2b36f.jpg" alt=""/>
                        </div>
                    </div>
                </div>
                <div class="f4b_box lip3">
                    <div class="qianqian">
                            <div class="qianq_img">
                                <img src="./image/da2696869dc4b419.png" alt=""/>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在这里插入图片描述
一次次写到揪头发啊，又告诉自己这才刚开始，不能丧，早上4点半爬起来接着写，想想以后工作那个强度，现在能坚持的。
就是很多布局有些复杂，不够简练，还是要多加练习，才能做的更加熟练美观。

莓莓儿～

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
京东页面仿制后续来啦。。。

这次又做了中间选项卡部分 <div class="search"> <div class="search-h"> <div class="logo"> <a href="#">京东</a> </div> <di...
复制链接

扫一扫

专栏目录