上篇文章完成了京东网页 是给出大致的方向 让我们 将整个页面的大致布局搞定 今天 我们将图片代入到布局页面中
HTML模块代码这里我又不去细分了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- --> <link rel="shortcut icon" href="../京东网页/image/favicon.ico" type="imge/x-icon"/> <title>Document</title> <!--! D:\com.web\京东网页\image 图片文件路径--> <!--!D:\com.web\京东网页\css css文件路径 --> <!--! D:\com.web\京东网页\js js文件路径--> </head> <!-- * 导入ccc文件 导入js文件 --> <link rel="stylesheet" href="./css/index.css"> <script src="./js/index.js"></script> <body> <!-- 第一部分图片导行栏 --> <div class="head_div"> <!-- <div class="head_div_img"></div> --> </div> <!-- 第二部分导行栏 --> <div id="shortcut"> <!-- 在这个div上写导行信息内容 --> <div class="w"> <span class="f1">定位锁定在江西省</span> <span class="f1"></span> <span class="fr"> <span class="father_fr"> <span class="father_fr_text">你好,请登录</span> <span class="father_fr_text color" id="father_fr_text_one">免费注册 </span> <span class="father_fr_text">我的订单 |</span> <span class="father_fr_text">我的京东 |</span> <span class="father_fr_text">京东会员 |</span> <span class="father_fr_text" id="#father_fr_text_two">企业采购 |</span> <span class="father_fr_text">商家服务 |</span> <span class="father_fr_text">网站导行 |</span> <span class="father_fr_text">手机京东 |</span> <span class="father_fr_text">网站无障碍 </span> </span> </span> </div> </div> </body> </html>
<!-- 第三部分头部导行栏 --> <div id="header"> <div class="w"> <!--导行栏第一步分搜索框 --> <!-- 京东图标 --> <div id="logo" class="logo"></div> <div class="seacher"> <input type="text" placeholder="地球仪"> <div class="seacher_img_text">我是购物车</div> <div class="seacher_img"><img src="./image/search.jpg" alt="" id="seacher_img1"></div> <!-- 弹性布局的方式 --> <div class="seacher_bottom_father"> <span class="sercher_bottom_text">抢iPhone14 </span> <span class="sercher_bottom_text"> 三星手机 </span> <span class="sercher_bottom_text">京东京造 </span> <span class="sercher_bottom_text">小米新品 </span> <span class="sercher_bottom_text">腕表焕新 </span> <span class="sercher_bottom_text"> 智能数码 </span> <span class="sercher_bottom_text">茅台特惠 </span> </div> <!-- 底部 --> <div class="header_boottomes_father"> <a class="header_boottomes_father_a" href="京东超市">京东超市</a> <a class="header_boottomes_father_a" href="京东生鲜">京东生鲜</a> <a class="header_boottomes_father_a" href="秒杀">秒杀</a> <a class="header_boottomes_father_a" href="优惠券">优惠券</a> <a class="header_boottomes_father_a" href="京东家电">京东家电</a> <a class="header_boottomes_father_a" href="PLUS会员">PLUS会员</a> <a class="header_boottomes_father_a" href="品牌闪购">品牌闪购</a> <a class="header_boottomes_father_a" href="进口好物">进口好物</a> <a class="header_boottomes_father_a" href="拍卖">拍卖</a> <a class="header_boottomes_father_a" href="京东五金城">京东五金城</a> </div> </div> <!-- 最右部分 --> <div class="header_right"><img src="./image/logo_1726.png" alt=""></div> </div> </div> <!-- 第三部分的内容本部分分为了四个模块 --> <div class="three_div1"> <div class="three_div1_mode1"> <!-- 模块化思想本模块分为四部分利用百分比去布局 定义id选择器 --> <div class="three_div1"> <!-- 文字介绍 --> <p><a href="#">家用电器</a></p> <p> <a href="#">手机</a>/<a href="#"> 运营商 </a>/ <a href="">数码</a> </p> <p> <a href="">电脑</a>/<a href=""> 办公 </a> </p> <p> <a href="">家居</a>/<a href="">家具 /</a>/<a href="">家装</a>/<a href="">厨具</a> </p> <p> <a href="">男装</a>/<a href="">女装</a>/a href="">童装 </a>/<a href="">内衣</a> </p> <p> <a href="">美妆 </a>/<a href="">个护清洁</a>/<a href="">宠物</a> </p> <p> <a href="">女鞋</a>/<a href="">箱包</a>/<a href="">钟表</a>/<a href="">珠宝</a> </p> <p> <a href="">男鞋 </a>/<a href="">运动</a>/<a href="">户外</a> </p> <p> <a href="">房产 </a>/<a href="">汽车</a>/<a href="">汽车用品</a> </p> <p> <a href="">母婴</a>/<a href=""> 玩具乐器</a> </p> <p><a href="">食品 </a>/<a href="">酒类 </a>/<a href="">生鲜 </a>/<a href="">特产</a></p> <p><a href="">艺术</a>/<a href="">礼品鲜花 </a>/<a href="">农资绿植</a></p> <p><a href="">医药保健 </a>/<a href="">计生情趣</a></p> <p><a href="">图书 </a>/<a href="">文娱 </a>/<a href=""> 教育 </a>/<a href="">电子书</a></p> <p><a href="">机票 </a>/<a href=""> 酒店</a>/<a href="">旅游 </a>/<a href="">生活</a></p> <p><a href="">众筹 </a>/<a href="">维修 </a>/<a href="">清洗</a>/ <a href="">二手</a></p> <p><a href="">工业品 </a></p> </div> <div class="three_div2"> <!-- 采用了ifranm框架 --> <div><iframe src="../京东网页/html/two.html"></iframe></div> </div> <div class="three_divmode"> <!-- 在这个部分中要定义弹性布局 --> <div class="threediv1_divmode_w" id="three1"> <div class="three1"> <img src="../京东网页/image/three1.png" alt="" width="91%"> </div> </div> <div class="threediv1_divmode_w"> <div class="three1"> <img src="../京东网页/image/three1.png" alt="" width="91%"> </div> </div> <div class="threediv1_divmode_w"> <div class="three1"> <img src="../京东网页/image/three1.png" alt="" width="91%"> </div> </div> </div> <div class="three_div1mode2"> <!-- 在这个部分中要定义弹性布局 --> <div class="mode2_text1"> <div class="mode_text1_one"> <img src="../京东网页/image/table/25.png" alt=""> </div> <div class="mode_text1_one" id="p"> <span>HI 欢迎来到京东页面</span> <br> <span class="aa">注册</span> |<span class="aa">登录</span> </div> <div class="mode_text1_two"> <input type="submit" value="新人福利" class="po" id="ui"> <input type="submit" value="PLUS会员" class="po" id="uio"> </div> </div> <div class="mode2_text2"> <span class="mode_text3_left">京东快报</span> <span class="mode_text3_right" id="opui">更多></span> <br> <span class="huk_poil">热门</span> <span>打工人要的轻松，雷柏V500PRO多模无线机械盘能帮你</span> <br> <span class="huk_poil">HOT</span> <span>两块屏幕干活很高效，华硕灵耀X双屏Pro 2022上手</span> <br> <span class="huk_poil">HOT</span> <span>想要沉浸式睡眠，就选CIOMOY草木喫</span> <br> <span class="huk_poil">最新</span> <span>电小二户外电源1000Pro：1度电标品！1.8h充满</span> </div> <div class="mode2_text3"> <table> <tr> <td> <img src="../京东网页//image/table/2.png" alt=""> <p>礼品卡</p> </td> <td> <img src="../京东网页//image/table/2.png" alt=""> <p>企业购</p> </td> <td> <img src="../京东网页//image/table/3.png" alt=""> <p>话费</p> </td> </tr> <tr> <td> <img src="../京东网页//image/table/10.png" alt=""> <p>礼品卡</p> </td> <td> <img src="../京东网页//image/table/11.png" alt=""> <p>企业购</p> </td> <td> <img src="../京东网页//image/table/12.png" alt=""> <p>话费</p> </td> </tr> <tr> <td> <img src="../京东网页//image/table/4.png" alt=""> <p>礼品卡</p> </td> <td> <img src="../京东网页//image/table/5.png" alt=""> <p>企业购</p> </td> <td> <img src="../京东网页//image/table/6.png" alt=""> <p>话费</p> </td> </tr> <tr> <td> <img src="../京东网页//image/table/7.png" alt=""> <p>礼品卡</p> </td> <td> <img src="../京东网页//image/table/8.png" alt=""> <p>企业购</p> </td> <td> <img src="../京东网页//image/table/9.png" alt=""> <p>话费</p> </td> </tr> </table> </div> </div> </div> </div> <!-- !第四部分的内容介绍 --> <div class="four_div2"> <div class="four_div2_mode1"> <div class="four_div2mode1_div"><img src="../京东网页//image/1.png" alt=""></div> <iframe src="../京东网页/html/three.html" frameborder="0"></iframe> <div class="four_div2mode1_div"> <img src="../京东网页//image/table/26.jpg.avif"> <p>进口的物品秒杀哦</p> <p>爆款低至5折</p> <div class="oyu">新人福利</div> </div> <!-- <div class="four_div2_right">右边</div> --> </div> </div>
<!-- !第五模块的内容 --> <div class="five_div3"> <div class="five_div3_mode"> <div class="five_div3_mode2"> <div> <h3>每日特价</h3> </div> <div class="five_div3_test"> > </div> <div class="fiver_div3_right"> 精选 </div> <div class="max_father"> <div class="max_father_son"> <p class="fiver_div1_p">一年最低价</p> <img src="../京东网页//image/4/1.jpg.avif" alt=""> <span class="special_item_name">青萝卜水果萝卜5斤装</span> <span class="special_item_miaoShaPrice"><span class="dollar_txt">￥</span>9.9</span> <span class="special_item_soldMsg">已抢<span class="special_item_soldNum">152</span>件</span> </div> <div class="max_father_son1"> <article class="max_father_son2"> <div class="max_father_son3"><img src="../京东网页/image/4/2.jpg.avif" alt=""></div> <div class="max_father_son3"> <span>蔓越莓曲奇饼干约35包</span> <div class="special_item_price"> <span class=""><span class="">￥</span>8.9</span> <span class="special_item_soldMsg">已抢<span class="special_item_soldNum">198</span>件</span> </div> </div> </article> <article class="max_father_son2"> <div class="max_father_son3"><img src="../京东网页/image/4/3.jpg.avif" alt=""></div> <div class="max_father_son3"> <span class="">紫皮糖1斤</span> <div class=""><span class=""><span class="">￥</span>9.9</span> <span class="special_item_soldMsg">已抢<span class="special_item_soldNum">127</span>件</span> </div> </div> </article> <article class="max_father_son2"> <div class="max_father_son3"><img src="../京东网页/image/4/4.jpg.avif" alt=""></div> <div class="max_father_son3"> <span class="">九普珍英红九号老树红茶20克</span> <div class=""><span class=""><span class="">￥</span>9.9</span></div> <span class="">已抢<span class="">127</span>件</span> </div> </article> <article class="max_father_son2"> <!-- <span class="special_item_lowest">1年最低价</span> --> <div class="max_father_son3"><img src="../京东网页/image/4/5.jpg.avif" alt=""></div> <div class="max_father_son3"> <span class="">福宁网红毛巾卷蛋糕</span> <span class=""><span class="">￥</span>9.9</span> </div> </article> </div> </div> </div> <div class="five_div3_mode2"> <div> <h3>品牌闪购</h3> </div> <div class="five_div3_test"> > </div> <!-- 一个大的div包起来 --> <div class="big_div"> <div class="big_div_son1"> <h6 class="core-name">罗蒙闪购专场</h6> <div class="core-desc"> <span class="core-desc__promo">全场9折</span> <span class="core-desc__extra"> <span class="extra-text">仅剩</span> <div class="extra-day"><span>2</span>天</div> </span> </div> <div><img src="../京东网页/image/4/8869395e19d3f6f8.jpg!cc_220x220.webp" alt=""></div> </div> <!-- divRight --> <div class="big_div_son2"> <div class="big_div_son2div"><img src="../京东网页/image/4/11.avif" alt=""> <h6 class="other-item__name">彩虹闪购专场</h6> </div> <div class="big_div_son2div"><img src="../京东网页/image/4/12.avif" alt=""> <h6 class="other-item__name">后秀品牌闪购专场</h6> </div> <div class="big_div_son2div"><img src="../京东网页/image/4/13.avif" alt=""> <h6 class="other-item__name">彩虹闪购专场</h6> </div> <div class="big_div_son2div"><img src="../京东网页/image/4/14.avif" alt=""> <h6 class="other-item__name">恒源祥冬装焕新衣</h6> </div> <div class="big_div_son2div"><img src="../京东网页/image/4/15.avif" alt=""> <h6 class="other-item__name">皮尔卡丹女装专场</h6> </div> <div class="big_div_son2div"><img src="../京东网页/image/4/16.avif" alt=""> <h6 class="other-item__name">鸭鸭秋冬闪购专场</h6> </div> </div> </div> </div> </div> </div> <!-- !第六模块的内容 --> <div class="five_div4"> <div class="five_div4_mode"> <div class="five_div4_mode0"> <img src="../京东网页//image/4.png" alt=""> </div> <div class="five_div4_mode1"> <style> .div1 { width: 100%; height: 99%; overflow: hidden; border: 1px solid #ff0000; margin: 3px; float: left; } .ul1 { position: relative; left: 0px; width: 1200px; } .ul1>li { float: left; /* background: #3388FF; */ } .ul1>li>div { position: absolute; left: 0; top: 0; background: #A9A9A9; opacity: 0; } ul.li.img { height: 88%; } </style> <script src="./js/jquery-3.6.js"></script> <!-- <h1 style="text-align: center">PS的学习生涯三</h1> --> <div class="div1"> <ul class="ul1"> <li><img src="../京东网页/image/4/21.avif" alt=""> <div></div> </li> <li><img src="../京东网页/image/4/22.avif" alt=""> <div></div> </li> <li><img src="../京东网页/image/4/23.jpg.avif" alt=""> <div></div> </li> <li><img src="../京东网页/image/4/24.png.avif" alt=""> <div></div> </li> <li><img src="../京东网页/image/4/25.jpg.avif" alt=""> <div></div> </li> <li><img src="../京东网页/image/4/26.jpg.avif" alt=""> <div></div> </li> <li><img src="../京东网页/image/4/27.jpg.avif" alt=""> <div></div> </li> <li><img src="../京东网页/image/4/28.jpg.avif" alt=""> <div></div> </li> </ul> </div> <script> $(function () { var $time = ''; var mi = 0; gundong(); function gundong() { $time = setInterval(function () { mi += -10; if (mi < -800) { mi = 0 } $('.ul1').css({ marginLeft: mi + 'px' }); },50); } $('li').mouseover(function () { window.clearTimeout($time); $('li').not($(this)).contents('div').css({ opacity: 1 }); }); $('li').mouseout(function () { gundong(); $('li').not($(this)).contents('div').css({ opacity: 0 }); }); }); </script> </div> </div> </div>
<!-- !第七模块 --> <div class="six_div5"> <div class="six_div5_mode"> <h3>"频道广场"</h3> </div> </div> </div> <!-- 第八模块 --> <div class="eight_div"> <div class="eight_div_mode"> <div class="eight_a" id="eight_one"> <h1>京东图书</h1> <h3>精选好书,畅享阅读</h3> <img src="../京东网页/image/4/lib2.jpg" alt=""> </div> <div class="eight_a" id="eight_two"> <h1>京东超市</h1> <h3>一站式享受生活好物</h3> <img src="../京东网页/image/4/lib3.jpg.avif" alt=""> </div> <div class="eight_a"> <div class="eight_b"> <h6>数码相机<span>尽享好物</span></h6> <div class="eight_c"><img src="../京东网页//image/4/31.jpg!cc_100x100.avif" alt=""></div> <div class="eight_c"><img src="../京东网页//image/4/32.jpg!cc_100x100.avif" alt=""></div> </div> <div class="eight_b"> <h6>家装城<span>一心购买加中产品</span></h6> <div class="eight_c"><img src="../京东网页//image/4/33.jpg!cc_100x100.avif" alt=""></div> <div class="eight_c"><img src="../京东网页//image/4/34.jpg!cc_100x100.avif" alt=""></div> </div> </div> <div class="eight_a"> <div class="eight_b"> <h6>拍拍二手<span>大牌一元购物</span></h6> <div class="eight_c"><img src="../京东网页//image/4/35.jpg!cc_100x100.avif" alt=""></div> <div class="eight_c"><img src="../京东网页//image/4/36.jpg!cc_100x100.avif" alt=""></div> </div> <div class="eight_b"> <h6>家用电器<span>买电器上京东</span></h6> <div class="eight_c"><img src="../京东网页//image/4/37.jpg!cc_100x100.avif" alt=""></div> <div class="eight_c"><img src="../京东网页//image/4/38.jpg!cc_100x100.avif" alt=""></div> </div> </div> </div> </div> <!-- 第九模块整体布局 --> <div class="nine_div"> <div class="nine_divmode"> <div class="nine_w"> <h3>企业购<span>一站式企业采购平台</span></h3> <div class="nine_w_a"><img src="../京东网页/tu/1.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页/tu/2.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>企业购<span>一站式企业采购平台</span></h3> <div class="nine_w_a"><img src="../京东网页//tu/3.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页//tu/4.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>企业购<span>一站式企业采购平台</span></h3> <div class="nine_w_a"><img src="../京东网页//tu/5.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页//tu/6.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>企业购<span>一站式企业采购平台</span></h3> <div class="nine_w_a"><img src="../京东网页/tu/7.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页/tu/8.jpg!cc_100x100.avif" alt=""></div> </div> </div> </div> <!-- !参考代码复制三份 --> <!-- 第ctr+c ctr+v模块整体布局 --> <div class="nine_div"> <div class="nine_divmode"> <div class="nine_w"> <h3>企业购<span>一站式企业采购平台</span></h3> <div class="nine_w_a"><img src="../京东网页/tu/21.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页/tu/22.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>企业购<span>一站式企业采购平台</span></h3> <div class="nine_w_a"><img src="../京东网页//tu/23.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页//tu/24.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>企业购<span>一站式企业采购平台</span></h3> <div class="nine_w_a"><img src="../京东网页//tu/25png!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页//tu/26.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>企业购<span>一站式企业采购平台</span></h3> <div class="nine_w_a"><img src="../京东网页/tu/27.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页/tu/28.jpg!cc_100x100.avif" alt=""></div> </div> </div> </div> <!-- ctrlc -->
<!-- 第十模块整体布局 --> <div class="nine_div"> <div class="nine_divmode"> <div class="nine_w"> <h3>JOY寻宝<span>懂得你的JOY</span></h3> <div class="nine_w_a"><img src="../京东网页/tu/11.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页/tu/12.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>京东手机<span>一键极客的诞生</span></h3> <div class="nine_w_a"><img src="../京东网页//tu/13.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页//tu/14.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>京东魅力<span>京东魅力,懂得你的JOY</span></h3> <div class="nine_w_a"><img src="../京东网页//tu/15.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页//tu/16.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>厨卫电器<span>百变厨卫大更新</span></h3> <div class="nine_w_a"><img src="../京东网页/tu/17.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页/tu/18jpg!cc_100x100.avif" alt=""></div> </div> </div> </div> <!-- 第十一模块整体布局 --> <div class="nine_div"> <div class="nine_divmode"> <div class="nine_w"> <h3>新机发布<span>有新机更有范</span></h3> <div class="nine_w_a"><img src="../京东网页/tu/21.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页/tu/22.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>生鲜馆<span>常变天下鲜</span></h3> <div class="nine_w_a"><img src="../京东网页//tu/23.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页//tu/24.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>京东符装<span>服装一站购</span></h3> <div class="nine_w_a"><img src="../京东网页//tu/25png!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页//tu/26.jpg!cc_100x100.avif" alt=""></div> </div> <div class="nine_w"> <h3>冰箱洗衣机<span>生活必选品/span></h3> <div class="nine_w_a"><img src="../京东网页/tu/27.jpg!cc_100x100.avif" alt=""></div> <div class="nine_w_a"><img src="../京东网页/tu/28.jpg!cc_100x100.avif" alt=""></div> </div> </div> </div> <!-- !第十二模块 ctr+a ctr+v 第七 --> <div class="six_div5"> <div class="six_div5_mode"> <h1>为你推荐</h1> </div> </div> </div> <!-- !第十三模块 --> <div class="aone_div"> <div class="aone_div_mode"> <span class="apn"> <input type="submit" value="精选" style="border-radius: 12px;width: 70px;height: 30px;line-height: 30px;"><br> <span>猜你喜欢的</span> </span> <span class="apn"> <span>智能先锋</span><br> <span>大电器域</span> </span> <span class="apn"> <span>居家优品</span><br> <span>品质生活</span></span> <span class="apn"> <span>时尚达人</span><br> <span>美妆穿搭</span></span> <span class="apn"> <span>进口好物</span><br> <span>京东国际</span> </span> </div> </div> <!-- !第十四模块 copy0个 --> <div class="bone_div"> <!-- 弹性布局定义父类元素 --> <div class="bone_div_one"> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/31.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/32.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/33.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/34.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/35.jpg!cc_150x150.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> </div> </div> <!-- !第十五模块 copy1个 --> <div class="bone_div"> <!-- 弹性布局定义父类元素 --> <div class="bone_div_one"> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/36.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/37.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/38.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/39.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/40.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> </div> </div> <!-- !第十五模块 copy1个 --> <div class="bone_div"> <!-- 弹性布局定义父类元素 --> <div class="bone_div_one"> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/36.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/42.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/43.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/44.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/45.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> </div> </div> <!-- !第十五模块 copy1个 --> <div class="bone_div"> <!-- 弹性布局定义父类元素 --> <div class="bone_div_one"> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/46.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/47.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/48.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/49.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/50.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> </div> </div> <!-- !第十五模块 copy1个 --> <div class="bone_div"> <!-- 弹性布局定义父类元素 --> <div class="bone_div_one"> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/51.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/52.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/53.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/53.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/55.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> </div> </div> <!-- !第十五模块 copy1个 --> <div class="bone_div"> <!-- 弹性布局定义父类元素 --> <div class="bone_div_one"> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/71.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/57.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/58.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/59.png.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/60.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> </div> </div> <!-- !第十五模块 copy1个 --> <div class="bone_div"> <!-- 弹性布局定义父类元素 --> <div class="bone_div_one"> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/61jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/62.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/63.jpg!cc_150x150.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/64.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/65.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> </div> </div>
<!-- !第十五模块 copy1个 --> <div class="bone_div"> <!-- 弹性布局定义父类元素 --> <div class="bone_div_one"> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/66.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/69.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/68.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/69.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> <span class="bone_dive_one_b"> <div class="bone_div_one_baa"><img src="../京东网页/tu/70.jpg.avif" alt=""></div> <div class="bone_div_one_bab">文本一</div> </span> </div> </div> <!-- !C:\Users\MZFAITHDREAM\OneDrive\图片\屏幕快照 --> <!-- footer --> <div class="footer_div"> <div class="footer_div_mode"> <div class="footer_img"> <div class="img_jinglingtu"> </div> <p class="mod_service_txt">品类齐全，轻松购物</p> </div> <div class="footer_img"> <div class="img_two"> </div> <p class="mod_service_txt">多仓直发，极速配送</p> </div> <div class="footer_img"> <div class="img_two1"> </div> <p class="mod_service_txt">正品行货，精致服务</p> </div> <div class="footer_img"> <div class="img_two2"> </div> <p class="mod_service_txt">天天低价，畅选无忧</p> </div> </div> </div> <hr> <!-- footer2 --> <div class="footer_divb"> <div class="footer_div_modeb"> <div class="footer_imgb"> <h5 class="mod_help_nav_tit">购物指南</h5> <ul class="mod_help_nav_con"> <li> <a href="//help.jd.com/user/issue/list-29.html" target="_blank" rel="noopener noreferrer"> 购物流程 </a> </li> <li> <a href="//help.jd.com/user/issue/list-151.html" target="_blank" rel="noopener noreferrer"> 会员介绍 </a> </li> <li> <a href="//help.jd.com/user/issue/list-297.html" target="_blank" rel="noopener noreferrer"> 生活旅行 </a> </li> <li> <a href="//help.jd.com/user/issue.html" target="_blank" rel="noopener noreferrer"> 常见问题 </a> </li> <li> <a href="//help.jd.com/user/issue/list-136.html" target="_blank" rel="noopener noreferrer"> 大家电 </a> </li> <li> <a href="//help.jd.com/user/custom.html" target="_blank" rel="noopener noreferrer"> 联系客服 </a> </li> </ul> </div> <div class="footer_imgb"> <h5 class="mod_help_nav_tit">配送方式</h5> <ul class="mod_help_nav_con"> <li> <a href="//help.jd.com/user/issue/list-81-100.html" target="_blank" rel="noopener noreferrer"> 上门自提 </a> </li> <li> <a href="//help.jd.com/user/issue/list-81.html" target="_blank" rel="noopener noreferrer"> 211限时达 </a> </li> <li> <a href="//help.jd.com/user/issue/103-983.html" target="_blank" rel="noopener noreferrer"> 配送服务查询 </a> </li> <li> <a href="//help.jd.com/user/issue/109-188.html" target="_blank" rel="noopener noreferrer"> 配送费收取标准 </a> </li> <li> <a href="//help.joybuy.com/help/question-list-201.html" target="_blank" rel="noopener noreferrer"> 海外配送 </a> </li> </ul> </div> <div class="footer_imgb"> <h5 class="mod_help_nav_tit">支付方式</h5> <ul class="mod_help_nav_con"> <li> <a href="//help.jd.com/user/issue/list-172.html" target="_blank" rel="noopener noreferrer"> 货到付款 </a> </li> <li> <a href="//help.jd.com/user/issue/list-173.html" target="_blank" rel="noopener noreferrer"> 在线支付 </a> </li> <li> <a href="//help.jd.com/user/issue/list-176.html" target="_blank" rel="noopener noreferrer"> 分期付款 </a> </li> <li> <a href="//help.jd.com/user/issue/list-175.html" target="_blank" rel="noopener noreferrer"> 公司转账 </a> </li> </ul> </div> <div class="footer_imgb"> <h5 class="mod_help_nav_tit">售后服务</h5> <ul class="mod_help_nav_con"> <li> <a href="//help.jd.com/user/issue/list-112.html" target="_blank" rel="noopener noreferrer"> 售后政策 </a> </li> <li> <a href="//help.jd.com/user/issue/list-132.html" target="_blank" rel="noopener noreferrer"> 价格保护 </a> </li> <li> <a href="//help.jd.com/user/issue/130-978.html" target="_blank" rel="noopener noreferrer"> 退款说明 </a> </li> <li> <a href="//myjd.jd.com/repair/repairs.action" target="_blank" rel="noopener noreferrer"> 返修/退换货 </a> </li> <li> <a href="//help.jd.com/user/issue/list-50.html" target="_blank" rel="noopener noreferrer"> 取消订单 </a> </li> </ul> </div> <div class="footer_imgb"> <h5 class="mod_help_nav_tit">特色服务</h5> <ul class="mod_help_nav_con"> <li> <a href="//1paipai.jd.com/" target="_blank" rel="noopener noreferrer"> 夺宝岛 </a> </li> <li> <a href="//help.jd.com/user/issue/list-134.html" target="_blank" rel="noopener noreferrer"> DIY装机 </a> </li> <li> <a href="//fuwu.jd.com/" target="_blank" rel="noopener noreferrer"> 延保服务 </a> </li> <li> <a href="//o.jd.com/market/index.action" target="_blank" rel="noopener noreferrer"> 京东E卡 </a> </li> <li> <a href="//mobile.jd.com/" target="_blank" rel="noopener noreferrer"> 京东通信 </a> </li> <li> <a href="//smart.jd.com/" target="_blank" rel="noopener noreferrer"> 京鱼座智能 </a> </li> </ul> </div> <div class="footer_imgb"> <h5 class="mod_help_cover_tit">京东自营覆盖区县</h5> <div class="mod_help_cover_con"> <p class="mod_help_cover_info"> 京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。 </p> <p class="mod_help_cover_more"> <a href="//help.jd.com/user/issue/103-983.html" target="_blank" rel="noopener noreferrer"> 查看详情 <i class="iconfont"></i> </a> </p> </div> </div> <hr> </div> </div> <!-- footer3 --> <div class="footer_divbc"> <div class="footer_div_modebc"> <span class="ss_footer"><a href="//about.jd.com" target="_blank" rel="noopener noreferrer">关于我们</a></span> <span class="ss_footer"><a href="//about.jd.com/contact" target="_blank" rel="noopener noreferrer">联系我们</a></span> <span class="ss_footer"><a href="//help.jd.com/user/custom.html" target="_blank" rel="noopener noreferrer">联系客服</a></span> <span class="ss_footer"><a href="//lai.jd.com" target="_blank" rel="noopener noreferrer">合作招商</a></span> <span class="ss_footer"><a href="//helpcenter.jd.com/venderportal/index.html" target="_blank" rel="noopener noreferrer">商家帮助</a></span> <span class="ss_footer"><a href="//jzt.jd.com" target="_blank" rel="noopener noreferrer">营销中心</a></span> <span class="ss_footer"><a href="//app.jd.com/" target="_blank" rel="noopener noreferrer">手机京东</a></span> <span class="ss_footer"><a href="//club.jd.com/links.aspx" target="_blank" rel="noopener noreferrer">友情链接</a></span> <span class="ss_footer"><a href="//union.jd.com/index" target="_blank" rel="noopener noreferrer">销售联盟</a></span> <span class="ss_footer"><a href="//pro.jd.com/mall/active/3WA2zN8wkwc9fL9TxAJXHh5Nj79u/index.html" target="_blank" rel="noopener noreferrer">京东社区</a></span> <span class="ss_footer"><a href="//pro.jd.com/mall/active/3TF25tMdrnURET8Ez1cW9hzfg3Jt/index.html" target="_blank" rel="noopener noreferrer">风险监测</a></span> <span class="ss_footer"><a href="//about.jd.com/privacy/" target="_blank" rel="noopener noreferrer">隐私政策</a></span> <span class="ss_footer"><a href="//gongyi.jd.com" target="_blank" rel="noopener noreferrer">京东公益</a></span> <span class="ss_footer"><a href="//www.joybuy.com/" target="_blank" rel="noopener noreferrer">English Site</a></span> <span class="ss_footer"><a href="//corporate.jd.com" target="_blank" rel="noopener noreferrer">Media & IR</a></span> </div> </div> <!-- footer4 --> <div class="footer_opi"> <div class="footer_opimode"></div> </div> <!-- last页面布局 --> <div class="last_opu"> <div class="last-mode"> <span class="last_span">1234</span> <span class="last_span">1234</span> <span class="last_span">1234</span> <span class="last_span">1234</span> <span class="last_span">1234</span> <span class="last_span">1234</span> <span class="last_span">1234</span> <span class="last_span">1234</span> </div> </div>
