12.07作业
来源：互联网 发布：网站如何优化排名 编辑：程序博客网 时间：2024/05/17 22:52
临摹米家有品首页
产品页
番茄鸡蛋冻干面 12杯/箱-有品
（1）html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>番茄鸡蛋冻干面 12杯/箱-有品</title> <link href="../css/top-footer-standard.css" type="text/css" rel="stylesheet" /> <link href="../css/product-sec3-4.css" type="text/css" rel="stylesheet" /> <!--<link href="../css/bootstrap.css" type="text/css" rel="stylesheet" />--> </head> <body> <div id="root"> <div class="home-wrap"> <div class="m-site-top"> <div class="container"> <div class="fr"> <div class="fl-m-user-con site-item"> <div class="m-no-login"> <a href="https://youpin.mi.com/app/shop/login?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">登录</a> <a href="https://account.xiaomi.com/pass/register?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">注册</a> </div> <span class="fl-m-line"></span> <div class="clearfix"></div> </div> <div class="fr-m-download site-item"> <a href="#" class="m-safe-anchor"> <span class="icon fr-m-download-small-icon"></span> 下载APP </a> <div class="site-item-nav"> <div class="site-nav-inner"> <img class="qr-code" src="../img/c1.png" /> <p> 下载有品APP<br /> 得新人1000元礼包 </p> </div> </div> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> <div class="m-header"> <div class="container"> <div class="m-header-top"> <div class="m-logo"> <img src="../img/c2.png" /> </div> <div class="m-card-wrap"> <div class="icon m-card-wrap-small-icon"></div> </div> <div class="m-search"> <div class="search-form "> <div class="search-card-wrap"> <div class="icon search-card-wrap-small-icon"></div> </div> <div class="search-input-con"> <input type="text" placeholder="冬日里不能错过的美食" /> </div> <div class="clearfix"></div> </div> </div> </div> <div class="m-nav"> <ul class="nav-list"> <li data-index="0"><span class="item">有品推荐</span></li> <li data-index="1"><span class="item">家电</span></li> <li data-index="2"><span class="item">影音</span></li> <li data-index="3"><span class="item">餐厨</span></li> <li data-index="4"><span class="item">服饰</span></li> <li data-index="5"><span class="item">智能</span></li> <li data-index="6"><span class="item">健康</span></li> <li data-index="7"><span class="item">洗护</span></li> <li data-index="8"><span class="item">日杂</span></li> <li data-index="9"><span class="item">饮食</span></li> <li data-index="10"><span class="item">居家</span></li> <li data-index="11"><span class="item">手机</span></li> <li data-index="12"><span class="item">箱包</span></li> <li data-index="13"><span class="item">配件</span></li> <li data-index="14"><span class="item">婴童</span></li> <li data-index="15"><span class="item">出行</span></li> <li data-index="16"><span class="item">品牌</span></li> <div class="clearfix"></div> </ul> <div class="nav-menu" style="display: none;"> <ul class="nav-menu-list" data-index="0" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-0-1.jpg" alt="" /> </div> <p class="nav-menu-info">1212特惠</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-0-2.jpg" alt="" /> </div> <p class="nav-menu-info">新品</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-0-3.jpg" alt="" /> </div> <p class="nav-menu-info">应季</p> </li> <li> <div class="nav-menu-img"> <img src=" ../img/header-0-4.jpg" alt="" /> </div> <p class="nav-menu-info">男士</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-0-5.jpg" alt="" /> </div> <p class="nav-menu-info">女士</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="1" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-1-1.jpg" alt="" /> </div> <p class="nav-menu-info">空气净化器</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-1-2.jpg" alt="" /> </div> <p class="nav-menu-info">净水器</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-1-3.jpg" alt="" /> </div> <p class="nav-menu-info">洗衣机</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-1-4.jpg" alt="" /> </div> <p class="nav-menu-info">冰箱</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-1-5.jpg" alt="" /> </div> <p class="nav-menu-info">生活电器</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-1-6.jpg" alt="" /> </div> <p class="nav-menu-info">空调/电扇</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-1-7.jpg" alt="" /> </div> <p class="nav-menu-info">厨房家电</p> </li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="2" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-2-1.jpg" alt="" /> </div> <p class="nav-menu-info">电视</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-2-2.jpg" alt="" /> </div> <p class="nav-menu-info">盒子</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-2-3.jpg" alt="" /> </div> <p class="nav-menu-info">投影</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-2-4.jpg" alt="" /> </div> <p class="nav-menu-info">音箱</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="3" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-3-1.jpg" alt="" /> </div> <p class="nav-menu-info">厨房电器</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-3-2.jpg" alt="" /> </div> <p class="nav-menu-info">锅具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-3-3.jpg" alt="" /> </div> <p class="nav-menu-info">餐具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-3-4.jpg" alt="" /> </div> <p class="nav-menu-info">杯壶</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-3-5.jpg" alt="" /> </div> <p class="nav-menu-info">功能厨具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-3-6.jpg" alt="" /> </div> <p class="nav-menu-info">刀剪砧板</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-3-7.jpg" alt="" /> </div> <p class="nav-menu-info">保鲜收纳</p> </li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="4" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-4-1.jpg" alt="" /> </div> <p class="nav-menu-info">服装</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-4-2.jpg" alt="" /> </div> <p class="nav-menu-info">鞋袜</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-4-3.jpg" alt="" /> </div> <p class="nav-menu-info">眼镜</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-4-4.jpg" alt="" /> </div> <p class="nav-menu-info">配饰</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-4-5.jpg" alt="" /> </div> <p class="nav-menu-info">内衣</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="5" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-5-1.jpg" alt="" /> </div> <p class="nav-menu-info">小米笔记本Pro</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-5-2.jpg" alt="" /> </div> <p class="nav-menu-info">小米笔记本Air</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-5-3.jpg" alt="" /> </div> <p class="nav-menu-info">智能家庭套装</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-5-4.jpg" alt="" /> </div> <p class="nav-menu-info">安防</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-5-5.jpg" alt="" /> </div> <p class="nav-menu-info">网关/传感器</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-5-6.jpg" alt="" /> </div> <p class="nav-menu-info">路由器</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-5-7.jpg" alt="" /> </div> <p class="nav-menu-info">开关/插座</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-5-8.jpg" alt="" /> </div> <p class="nav-menu-info">相机</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-5-9.jpg" alt="" /> </div> <p class="nav-menu-info">穿戴</p> </li> <li> <p class="nav-menu-info nav-menu-info-more">更多></p> </li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="6" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-6-1.jpg" alt="" /> </div> <p class="nav-menu-info">康体监护</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-6-2.jpg" alt="" /> </div> <p class="nav-menu-info">运动健身</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-6-3.jpg" alt="" /> </div> <p class="nav-menu-info">护理护具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-6-4.jpg" alt="" /> </div> <p class="nav-menu-info">保健器械</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="7" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-7-1.jpg" alt="" /> </div> <p class="nav-menu-info">空腔清洁</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-7-2.jpg" alt="" /> </div> <p class="nav-menu-info">面部护理</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-7-3.jpg" alt="" /> </div> <p class="nav-menu-info">毛巾浴巾</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-7-4.jpg" alt="" /> </div> <p class="nav-menu-info">美发护发</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-7-5.jpg" alt="" /> </div> <p class="nav-menu-info">身体呵护</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-7-6.jpg" alt="" /> </div> <p class="nav-menu-info">洗涤清理</p> </li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="8" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-8-1.jpg" alt="" /> </div> <p class="nav-menu-info">日用</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-8-2.jpg" alt="" /> </div> <p class="nav-menu-info">工具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-8-3.jpg" alt="" /> </div> <p class="nav-menu-info">清洁</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-8-4.jpg" alt="" /> </div> <p class="nav-menu-info">文具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-8-5.jpg" alt="" /> </div> <p class="nav-menu-info">收纳</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="9" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-9-1.jpg" alt="" /> </div> <p class="nav-menu-info">酒水</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-9-2.jpg" alt="" /> </div> <p class="nav-menu-info">休闲小食</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-9-3.jpg" alt="" /> </div> <p class="nav-menu-info">冲饮/茗茶</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-9-4.jpg" alt="" /> </div> <p class="nav-menu-info">杂粮/食材</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-9-5.jpg" alt="" /> </div> <p class="nav-menu-info">生鲜</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="10" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-10-1.jpg" alt="" /> </div> <p class="nav-menu-info">床垫</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-10-2.jpg" alt="" /> </div> <p class="nav-menu-info">被枕</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-10-3.jpg" alt="" /> </div> <p class="nav-menu-info">床品件套</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-10-4.jpg" alt="" /> </div> <p class="nav-menu-info">灯具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-10-5.jpg" alt="" /> </div> <p class="nav-menu-info">家具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-10-6.jpg" alt="" /> </div> <p class="nav-menu-info">花卉盆栽</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-10-7.jpg" alt="" /> </div> <p class="nav-menu-info">家饰</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-10-8.jpg" alt="" /> </div> <p class="nav-menu-info">布艺软装</p> </li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="11" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-11-1.jpg" alt="" /> </div> <p class="nav-menu-info">小米系列</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-11-2.jpg" alt="" /> </div> <p class="nav-menu-info">红米系列</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="12" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-12-1.jpg" alt="" /> </div> <p class="nav-menu-info">背包</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-12-2.jpg" alt="" /> </div> <p class="nav-menu-info">旅行箱</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-12-3.jpg" alt="" /> </div> <p class="nav-menu-info">钱包/卡包</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-12-4.jpg" alt="" /> </div> <p class="nav-menu-info">功能箱包</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="13" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-13-1.jpg" alt="" /> </div> <p class="nav-menu-info">电竞</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-13-2.png" alt="" /> </div> <p class="nav-menu-info">电源/电池</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-13-3.jpg" alt="" /> </div> <p class="nav-menu-info">手机周边</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-13-4.jpg" alt="" /> </div> <p class="nav-menu-info">办公周边</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-13-5.jpg" alt="" /> </div> <p class="nav-menu-info">耳机</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-13-6.png" alt="" /> </div> <p class="nav-menu-info">插线板</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-13-7.png" alt="" /> </div> <p class="nav-menu-info">适配器/线材</p> </li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="14" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-14-1.jpg" alt="" /> </div> <p class="nav-menu-info">玩具</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-14-2.jpg" alt="" /> </div> <p class="nav-menu-info">儿童穿戴</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-14-3.jpg" alt="" /> </div> <p class="nav-menu-info">洗护</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-14-4.jpg" alt="" /> </div> <p class="nav-menu-info">寝居</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-14-5.jpg" alt="" /> </div> <p class="nav-menu-info">服饰箱包</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-14-6.jpg" alt="" /> </div> <p class="nav-menu-info">出行</p> </li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="15" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-15-1.jpg" alt="" /> </div> <p class="nav-menu-info">骑行</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-15-2.jpg" alt="" /> </div> <p class="nav-menu-info">汽车用品</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-15-3.jpg" alt="" /> </div> <p class="nav-menu-info">户外</p> </li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <div class="clearfix"></div> </ul> <ul class="nav-menu-list" data-index="16" style="display: none;"> <li> <div class="nav-menu-img"> <img src="../img/header-16-1.jpg" alt="" /> </div> <p class="nav-menu-info">8H</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-16-2.jpg" alt="" /> </div> <p class="nav-menu-info">90分</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-16-3.jpg" alt="" /> </div> <p class="nav-menu-info">Yeelight</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-16-4.jpg" alt="" /> </div> <p class="nav-menu-info">一悟一什</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-16-5.jpg" alt="" /> </div> <p class="nav-menu-info">云米</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-16-6.jpg" alt="" /> </div> <p class="nav-menu-info">小吉</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-16-7.jpg" alt="" /> </div> <p class="nav-menu-info">素士</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-16-8.jpg" alt="" /> </div> <p class="nav-menu-info">最生活</p> </li> <li> <div class="nav-menu-img"> <img src="../img/header-16-9.jpg" alt="" /> </div> <p class="nav-menu-info">cottonsmith</p> </li> <li> <p class="nav-menu-info nav-menu-info-more">更多></p> </li> <div class="clearfix"></div> </ul> </div> <div class="clearfix"></div> </div> </div> </div> <hr class="header-detail-line" /> <div class="detail"> <div class="container"> <div class="swipper-container"> <div class="product-detail-top"> <div class="product-detail-left"> <div class="product-detail-left-fl"> <img src="../img/product-sec3-4-1.webp" /> </div> <div class="product-detail-left-fr"> <div class="product-detail-left-fr-img product-detail-left-fr-img-border"> <img src="../img/product-sec3-4-1.webp" /> </div> <div class="product-detail-left-fr-img"> <img src="../img/product-sec3-4-2.webp" /> </div> <div class="product-detail-left-fr-img"> <img src="../img/product-sec3-4-3.webp" /> </div> <div class="product-detail-left-fr-img"> <img src="../img/product-sec3-4-4.webp" /> </div> <div class="product-detail-left-fr-img" style="display: none;"> <img src="../img/product-sec3-4-5.webp" /> </div> <div class="product-detail-left-fr-img" style="display: none;"> <img src="../img/product-sec3-4-6.webp" /> </div> <div class="icon left-fr-prev-small-icon" style="display: none;"></div> <div class="icon left-fr-next-small-icon" style="display: none;"></div> </div> <div class="clearfix"></div> </div> <div class="product-detail-right"> <div class="product-detail-right-name">番茄鸡蛋冻干面 12杯</div> <div class="product-detail-right-desc">非油炸冻干技术，新鲜口感，汤汁浓郁</div> <div class="product-detail-right-info"> <div class="product-info-price"> <p class="product-info-price-inner"> <p class="info-price-text">售价</p> <div class="price"> <span class="info-price-unit">￥</span> <span class="info-price-num">59.9</span> </div> <div class="clearfix"></div> </p> </div> <div class="product-info-service"> <p class="info-price-text">服务</p> <div class="service"> <p> <span class="icon service-small-icon"></span> <span style="margin-right: 10px;">有品甄选精品</span> <span class="icon service-small-icon"></span> <span>限时免邮（活动期间）</span> </p> <p> <span class="icon service-small-icon"></span> <span>新三和（烟台）食品有限责任公司发货并提供售后</span> </p> </div> <div class="clearfix"></div> </div> </div> <div class="product-detail-right-order"> <div class="product-detail-right-order-fl"> <p class="info-price-text info-price-text-num">数量</p> <div class="clearfix"></div> </div> <div class="choose-orter-num"> <div class="choose-orter-num-button"> <a class="icon order-num-small-icon-remove"></a> </div> <div class="choose-orter-num-input"> <input class="order-num" type="text" value="1" /> </div> <div class="choose-orter-num-button"> <a class="icon order-num-small-icon-add"></a> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> <div class="product-detail-right-button"> <div class="buy-btn-container"> <div> <a class="m-btns m-btn-brown-stroke">立即购买</a> <a class="m-btns m-btn-brown">加入购物车</a> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> <div class="favor-btn "> <div> <a class="icon favor-btn-small-icon"></a> <p>收藏</p> </div> </div> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> </div> <div class="product-detail-main"> <div class="product-detail-nav"> <ul class="info-nav"> <li class="info-nav-item" data-index="0">产品介绍</li> <li class="info-nav-item" data-index="1">评论</li> <li class="info-nav-item" data-index="2">常见问题</li> </ul> <div class="nav-arr-container"> <div class="nav-arr-container-item" style="background: #845F3F"></div> <div class="nav-arr-container-item" style="background: #eee;"></div> <div class="nav-arr-container-item" style="background: #eee;"></div> <div class="nav-arr-container-item nav-arr-container-item-other"></div> <div class="clearfix"></div> </div> </div> <div class="product-detail-img"> <div class="product-desc"> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-7.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-8.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-9.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-10.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-11.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-12.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-13.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-14.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-15.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-16.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-17.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-18.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-19.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-20.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-21.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-22.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-23.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-24.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-25.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-26.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-27.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-28.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-29.jpg" alt="" /> </div> <div class="product-detail-item-img"> <img src="../img/product-sec3-4-30.jpg" alt="" /> </div> </div> <div class="product-argument" style="display: none;"> <div class="person-argument"> <div class="t-div"> <div class="my-img"> <img src="../img/product-sec3-4-32.jpg" /> </div> <div class="my-name">王*峰</div> <div class="my-time">2017-12-07 20:28</div> <div class="clearfix"></div> </div> <div class="m-div">东西不错，就是快递太慢</div> <hr class="argument-line" /> <div class="clearfix"></div> </div> <div class="person-argument"> <div class="t-div"> <div class="my-img"> <img src="../img/product-sec3-4-32.jpg" /> </div> <div class="my-name">淡*色</div> <div class="my-time">2017-12-07 20:05</div> <div class="clearfix"></div> </div> <div class="m-div">味道还不错，虽说小贵，也值了！</div> <hr class="argument-line" /> <div class="clearfix"></div> </div> </div> <div class="common-problem" style="display: none;"> <img src="../img/product-sec3-4-31.jpg" /> </div> </div> </div> </div> </div> </div> <div class="h-section h-sec-over"></div> <hr class="main-footer-line" /> <div class="footer"> <div class="container"> <div class="swiper-footer-container"> <div class="footer-logo-fl"> <img class="footer-logo-fl-img" src="../img/c2.png" /> </div> <div class="footer-fl-text"> <span>版权归米家商城所有</span> </div> <div class="footer-fr-text"> <p>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</p> <p class="millder-empty"></p> <p>公司名称：小米通讯技术有限公司 联系电话：010-60606666</p> </div> <div class="footer-logo-fr"> <a href="https://home.mi.com/app/shop/content?id=na056d0394b93a391"> <img class="footer-logo-fr-img" src="../img/footer-logo.png" /> </a> </div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="silder-bar"> <div class="silder-download"> <div class="aaa"> <div class="icon download-small-icon"></div> <p class="icon-text">下载</p> <p>APP</p> </div> <div class="hide-pop hide-pop-1" style="display: none;"> <div class="pop-inner"> <img class="download-pop-img" src="../img/c1.png" /> <p>下载有品APP</p> <p>得新人礼包</p> </div> </div> </div> <hr /> <div class="new-person-gift"> <div class="bbb"> <div class="icon new-person-small-icon"></div> <p class="icon-text">新人有礼</p> </div> <div class="hide-pop hide-pop-2" style="display: none;"> <div class="pop-inner"> <img class="new-person-pop-img-top" src="../img/gift-gd.png" /> <div class="new-person-pop-img-bottom-area"> <img class="download-pop-img" src="../img/c1.png" /> </div> <p class="hide-pop-text">立即扫码下载·有品 APP</p> </div> </div> </div> <hr /> <div class="back-top"> <div class="ccc"> <div class="icon go-back-small-icon"></div> <p class="icon-text">回到顶部</p> </div> <div class="hide-new-person"></div> </div> </div> </div> <script src="../js/jquery-2.1.0.js" type="text/javascript"></script> <script src="../js/icon-animate.js" type="text/javascript"></script> <script src="../js/product-sec3-4.js" type="text/javascript"></script> <!--<script src="../js/bootstrap.js" type="text/javascript"></script>--> <script type="text/javascript"> $('.m-logo').click(function() { //window.location.href="index.html"; window.open("../index.html"); }); </script> </body></html>（2）css
/**//*分割线样式*/.header-detail-line { border: none; width: 100%; border-bottom: 1px solid #eee;}/*detail样式*/.detail { padding-top: 60px;}.product-detail-top { margin-bottom: 50px;}.product-detail-left { width: 465px; height: 433px; float: left;}.product-detail-right { float: right; width: 565px;}.product-detail-left-fl { float: left;}.product-detail-left-fr { float: right; position: relative;}.product-detail-left-fl img { width: 366px; height: 431px;}.product-detail-left-fr-img { margin-bottom: 10px; width: 83px; height: 100px;}.product-detail-left-fr-img img { display: block; width: 83px; height: 100px;}/*小图片边框样式*/.product-detail-left-fr-img-border{ border: 1px solid #845f3f;}/*小图标*/.left-fr-prev-small-icon,.left-fr-next-small-icon { width: 85px; height: 19px; position: absolute;}.left-fr-prev-small-icon{ background-position: 0 -154px; top: 0;}.left-fr-next-small-icon{ background-position: 0 -213px; bottom: 10px;}/**//*右侧介绍样式*/.product-detail-right-name { font-size: 19px; color: #333; margin-bottom: 5px;}.product-detail-right-desc { font-size: 14px; color: #aaa;}.product-detail-right-info { margin-bottom: 26px; margin-top: 18px; padding: 10px; background: #f9f9f9;}.product-info-price { margin-bottom: 12px; margin-top: 12px;}.product-info-service { margin-bottom: 12px;}.info-price-text { font-size: 14px; color: #333; margin-right: 30px; line-height: 32px; float: left;}.price,.service { float: right; width: 483px;}.info-price-unit { color: #c00000; font-size: 14px;}.info-price-num { font-size: 30px; color: #c00000;}.info-price-service-text { display: inline-block;}.service { color: #333;}.service-small-icon { display: inline-block; width: 18px; height: 18px; background-position: 0 -193px;}.info-price-text-num { margin-left: 10px;}.product-detail-right-order-fl { float: left;}.choose-orter-num { float: right; width: 490px;}.choose-orter-num>div { float: left;}.choose-orter-num-button { width: 30px; height: 30px; border: 1px solid #ccc;}.order-num { display: inline-block; width: 50px; height: 28px; font-size: 18px; text-align: center;}.order-num-small-icon-add,.order-num-small-icon-remove { display: inline-block; width: 30px; height: 30px; text-align: center;}.order-num-small-icon-add { background-position: 0 -980px;}.order-num-small-icon-remove { background-position: 0 -1285px;}/*产品购买样式*/.product-detail-right-button { margin-top: 50px;}.product-detail-right-button>div { float: left;}.m-btns { font-size: 21px; padding: 13px 39px; border-radius: 3px; cursor: pointer; margin-right: 15px;}.m-btn-brown-stroke { border: 1px solid #845f3f; color: #845f3f;}.m-btn-brown-stroke:hover { background: #845f3f; color: #fff;}.m-btn-brown { background: #845F3F; color: #fff; padding: 14px 30px;}.m-btn-brown:hover { background: #eee; color: #845F3F;}.favor-btn { height: 53px; width: 53px; border: 1px solid #ddd; position: relative; top: -14px; border-radius: 3px; font-size: 14px; color: #aaa; text-align: center; cursor: pointer;}.favor-btn:hover { background: #845F3F; color: #fff;}.favor-btn-small-icon { display: inline-block; width: 30px; height: 30px; background-position: 0 -675px;}.favor-btn p { position: relative; top: -5px;}/*导航栏补充样式*/.product-detail-nav-fixed{ position: fixed; top: 0; left:50%; margin-left: -540px;}/*产品主要内容*/.product-detail-main {}.info-nav { background: #eee; width: 774px; padding: 16px 0 13px;}/*内容列表*/.info-nav-item { display: inline-block; list-style-type: none; width: 128px; font-size: 16px; text-align: center; border-right: 1px solid #aaa; cursor: pointer;}.info-nav-item:hover { color: #845F3F;}/*列表下方滑块*/.nav-arr-container-item { float: left; height: 3px; width: 132px;}.nav-arr-container-item-other { background: #eee; width: 378px;}.product-detail-item-img img { width: 774px; display: block;}/*评论样式*/.person-argument { width: 774px;}.t-div { width: 774px; margin-top: 35px;}.my-img img { border-radius: 50px; margin-right: 30px; display: block;}.my-img,.my-name { float: left;}.my-name { width: 50px; height: 50px; font-size: 18px; color: #333; line-height: 50px;}.my-time { height: 50px; float: right; margin: auto 0; line-height: 50px; font-size: 14px; color: #aaa;}.common-problem img { width: 774px; display: block;}.m-div { margin-top: 20px; margin-left: 80px; font-size: 14px; color: #111;}.argument-line { margin-top: 20px; float: right; border: none; border-bottom: 1px solid #ccc; width: 694px;}（3）js
$(function(){ var $left_img=$('.product-detail-left-fl img'); var $right_img=$('.product-detail-left-fr-img img'); var $product_detail_left_fr_img=$('.product-detail-left-fr-img'); var $product_detail_left_fr=$('.product-detail-left-fr'); var $left_fr_prev_small_icon=$('.left-fr-prev-small-icon'); var $left_fr_next_small_icon=$('.left-fr-next-small-icon'); /*小图片触发事件*/ $product_detail_left_fr.on({ mouseover:function(){ $left_fr_next_small_icon.show(); $left_fr_prev_small_icon.show(); }, mouseleave:function(){ $left_fr_next_small_icon.hide(); $left_fr_prev_small_icon.hide(); } }); /*小图片按钮触发事件*/ $left_fr_prev_small_icon.on('click',function(){ var tmp=judge_prev_border(); var next_img_src=$($right_img[tmp-1]).attr('src'); $left_img.attr('src',next_img_src); if(tmp<=0) return; $($product_detail_left_fr_img[tmp]).removeClass('product-detail-left-fr-img-border'); $($product_detail_left_fr_img[tmp-1]).addClass('product-detail-left-fr-img-border'); }); $left_fr_next_small_icon.on('click',function(){ var tmp=judge_border(); var next_img_src=$($right_img[tmp+1]).attr('src'); $left_img.attr('src',next_img_src); if(tmp>=5) return; $($product_detail_left_fr_img[tmp]).removeClass('product-detail-left-fr-img-border'); $($product_detail_left_fr_img[tmp+1]).addClass('product-detail-left-fr-img-border'); }); /*判断当前边框的索引值*/ function judge_border(){ var uniq; for (var i=0;i<$product_detail_left_fr_img.length;i++) { uniq=$($product_detail_left_fr_img[i]).hasClass('product-detail-left-fr-img-border'); if(uniq){ if(i>=2){ right_img_show_hide(i); } return i; } } } function judge_prev_border(){ var uniq; for (var i=0;i<$product_detail_left_fr_img.length;i++) { uniq=$($product_detail_left_fr_img[i]).hasClass('product-detail-left-fr-img-border'); if(uniq){ if(i<=3){ right_img_prev_show_hide(i); } return i; } } } /*右侧小图展示或隐藏*/ function right_img_show_hide(num){ if(num>=4) return; $($product_detail_left_fr_img[num-2]).hide(); $($product_detail_left_fr_img[num+2]).show(); } function right_img_prev_show_hide(num){ if(num<=1) return; $($product_detail_left_fr_img[num-2]).show(); $($product_detail_left_fr_img[num+2]).hide(); } /*购买数量加减*/ var $order_num_small_icon_remove=$('.order-num-small-icon-remove'); var $order_num_small_icon_add=$('.order-num-small-icon-add'); var $order_num=$('.order-num'); var check_order_num=setInterval(function(){ var str=$order_num.val(); var num=parseInt(str); if(!num){ num=1; } if(num>10) num=10; $order_num.val(num); },300); $order_num_small_icon_add.on('click',function(e){ var str=$order_num.val(); var num=parseInt(str); num+=1; if(num>10) { return; } $order_num.val(num); }); $order_num_small_icon_remove.on('click',function(){ var str=$order_num.val(); var num=parseInt(str); num-=1; if(num>0) { $order_num.val(num); } }); /*收藏触发事件*/ var $favor_btn=$('.favor-btn'); var $favor_btn_small_icon=$('.favor-btn-small-icon'); $favor_btn.on({ mouseover:function(){ $favor_btn_small_icon.css('background-position-y','-1185px'); }, mouseleave:function(){ $favor_btn_small_icon.css('background-position-y','-675px'); } }); /*产品内容、评论、常见问题切换*/ var $info_nav_item= $('.info-nav-item'); var $product_desc=$('.product-desc'); var $product_argument=$('.product-argument'); var $common_problem=$('.common-problem'); var $nav_arr_container_item=$('.nav-arr-container-item'); $info_nav_item.on('click',function(){ $this=$(this); var index=$this.data(index).index; set_main_attr(); if(index==0) { $nav_arr_container_item[index].style.background='#845F3F'; $product_desc.css('display','block'); } if(index==1) { $nav_arr_container_item[index].style.background='#845F3F'; $product_argument.css('display','block'); } if(index==2) { $nav_arr_container_item[index].style.background='#845F3F'; $common_problem.css('display','block'); } }); function set_main_attr(){ $product_desc.css('display','none'); $product_argument.css('display','none'); $common_problem.css('display','none'); for(var i=0;i<$nav_arr_container_item.length;i++){ $nav_arr_container_item[i].style.background='#eee'; } } /*产品内容、评论、常见问题的导航栏停留*/ var mTop=$('.product-detail-nav').offset().top; $(window).scroll(function(){ var sTop = $(document).scrollTop(); var result=mTop-sTop; if (result<=0) { $('.product-detail-nav').addClass('product-detail-nav-fixed'); } else{ $('.product-detail-nav').removeClass('product-detail-nav-fixed'); } });});（4）效果图
阅读全文
0 0
- 12.07作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业~~~~~~~~~~~~~
- 作业
- 作业
- 作业
- 作业
- 作业
- 作业
- Junit 指定多组测试数据
- jackson实体转json时 为NULL不参加序列化的汇总，jacksonjson
- C++中vector的使用总结
- 安全接口设计
- avr_001_用Atmel6.2建工程的问题
- 12.07作业
- Spring第一天
- LSD（Line Segment Detector） 直线段检测算法
- 机房登录
- Java IO(03) File类
- 机房重构--七层登录
- 网络编程
- objective-c 编程基础（3.7 Foundation框架之字典）
- MVC框架
