master

分支 (1)

管理

管理

master

shopping
/
store.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">
    <title>列表页-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="清水河JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。">
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,清水河">
    <link rel="shortcut icon" href="//www.jd.com/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2993785_asdo2spoz8i.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/list.css">
    <link rel="stylesheet" href="css/store.css">
</head>
<body class="index">

    <!-- 快捷导航栏 -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li><span>清水河欢迎您！</span><a href="#" style="margin-right: 3px;">请登录</a></li>
                    <li><a href="register.html" class="style-red">免费注册</a></li></li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li class="spacer"></li>
                    <li><a href="index.html">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的清水河</a>
                        <i class="iconfont icon-CaretDown"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">清水河会员</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">企业采购</a>
                        <i class="iconfont icon-CaretDown"></i>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">客户服务</a>
                        <i class="iconfont icon-CaretDown"></i>
                    </li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">网站导航</a>
                        <i class="iconfont icon-CaretDown"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">手机清水河</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站无障碍</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="list_header">
        <!-- logo盒子 -->
        <div class="list_logo">
            <a class="logo_lk" href="index.html" title="清水河"></a>
            <div class="extra">手机</div>
        </div>
        <!-- search -->
        <div class="list_search">
            <input type="text" class="text" value="小米">
            <button class="btn">搜索</button>
        </div>
        <!-- shopCar -->
        <div class="list_shopCar">
            <i class="iconfont icon-gouwuchekong"></i>
            我的购物车
            <i class="iconfont icon-xiangzuo"></i>
            <i class="count">80</i>
        </div>
    </div>
    <!-- 头部 -->
    <div class="content">
        <div class="left">
            <img src="./upload/list_04.webp" alt="">
            <h5>Apple MacBook Pro 13英寸 M2 芯片(8核中央处理器 10核图形处理器) 16G 512G 深空灰 笔记本Z16S【定制机】</h5>
            <span>
                【限时优惠】Mac指定产品限时享12期白条免息优惠，部分产品限时限时优惠订单满1000元返Apple原厂配件50元优惠券！！！猛戳查看>
            </span>
        </div>
        <div class="right">
            <div ><h2>Apple MacBook Pro 13英寸 M2 芯片(8核中央处理器 10核图形处理器) 16G 512G 深空灰 笔记本Z16S【定制机】</h2></div>
            <div style="color: red;">【限时优惠】Mac指定产品限时享12期白条免息优惠，部分产品限时限时优惠订单满1000元返Apple原厂配件50元优惠券！！！猛戳查看></div>
            <div class="price">
                <div >￥ <span style="color: red; font-size: 20px;">12999.00</span> 降价通知</div>
                <div>促　销 <span style="color: red;">满额返券</span> 订单满1000元返Apple原厂配件50元优惠券</div>
            </div>
            <div class="choose">
                <span>选择颜色</span>
                <button class="button1">黑色</button>
                <button class="button2">银色</button>
            </div>
            <div class="choose">
                <span>选择内存</span>
                <button class="button1">128G</button>
                <button class="button2">256G</button>
                <button class="button2">512G</button>
                <button class="button2">1TB</button>
            </div>
            <div class="choose">
                <span>选择尺寸</span>
                <button class="button1">13.2英寸</button>
                <button class="button2">12.2英寸</button>
                <button class="button2">14.2英寸</button>
                <button class="button2">16.2英寸</button>
            </div>
            <div class="choose">
                <span>选择版本</span>
                <button class="button1">官方标配</button>
                <button class="button2">教育优惠版</button>
                <button class="button2">A+会员版</button>
                <button class="button2">套餐一</button>
            </div>
            <button class="buy">立即购买</button>
        </div>
    </div>


    <!-- 尾部 -->
    <div class="footer">
        <div class="mod_service">
            <ul class="mod_service_list">
                <li class="mod_service_item">
                    <div class="mod_service_unit">
                        <h5 class="mod_service_tit mod_service_duo">多</h5>
                        <p class="mod_service_txt">品类齐全，轻松购物</p>
                    </div>
                </li>
                <li class="mod_service_item">
                    <div class="mod_service_unit">
                        <h5 class="mod_service_tit mod_service_kuai">快</h5>
                        <p class="mod_service_txt">多仓直发，极速配送</p>
                    </div>
                </li>
                <li class="mod_service_item">
                    <div class="mod_service_unit">
                        <h5 class="mod_service_tit mod_service_hao">好</h5>
                        <p class="mod_service_txt">正品行货，精致服务</p>
                    </div>
                </li>
                <li class="mod_service_item">
                    <div class="mod_service_unit">
                        <h5 class="mod_service_tit mod_service_shen">省</h5>
                        <p class="mod_service_txt">天天低价，畅选无忧</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="long_line"></div>
        <div class="mod_help clearfix">
            <div class="mod_help_list">
                <div class="mod_help_nav">
                    <h5 class="mod_help_nav_tit">购物指南</h5>
                    <ul class="mod_help_nav_con">
                        <li>
                            <a href="#">购物流程</a>
                        </li>
                        <li>
                            <a href="#" >会员介绍</a>
                        </li>
                        <li>
                            <a href="#">生活旅行</a>
                        </li>
                        <li>
                            <a href="#">常见问题</a>
                        </li>
                        <li>
                            <a href="#">大家电</a>
                        </li>
                        <li>
                            <a href="#">联系客服</a>
                        </li>
                    </ul>
                </div>
                <div class="mod_help_nav">
                    <h5 class="mod_help_nav_tit">配送方式</h5>
                    <ul class="mod_help_nav_con">
                        <li>
                            <a href="#">上门自提</a>
                        </li>
                        <li>
                            <a href="#" >211限时达</a>
                        </li>
                        <li>
                            <a href="#">配送服务查询</a>
                        </li>
                        <li>
                            <a href="#">配送费收取标准</a>
                        </li>
                        <li>
                            <a href="#">海外配送</a>
                        </li>
                    </ul>
                </div>
                <div class="mod_help_nav">
                    <h5 class="mod_help_nav_tit">支付方式</h5>
                    <ul class="mod_help_nav_con">
                        <li>
                            <a href="#">货到付款</a>
                        </li>
                        <li>
                            <a href="#" >在线支付</a>
                        </li>
                        <li>
                            <a href="#">分期付款</a>
                        </li>
                        <li>
                            <a href="#">公司转账</a>
                        </li>
                    </ul>
                </div>
                <div class="mod_help_nav">
                    <h5 class="mod_help_nav_tit">售后服务</h5>
                    <ul class="mod_help_nav_con">
                        <li>
                            <a href="#">售后政策</a>
                        </li>
                        <li>
                            <a href="#" >价格保护</a>
                        </li>
                        <li>
                            <a href="#">退款说明</a>
                        </li>
                        <li>
                            <a href="#">返修/退换货</a>
                        </li>
                        <li>
                            <a href="#">取消订单</a>
                        </li>
                    </ul>
                </div>
                <div class="mod_help_nav">
                    <h5 class="mod_help_nav_tit">特色服务</h5>
                    <ul class="mod_help_nav_con">
                        <li>
                            <a href="#">夺宝岛</a>
                        </li>
                        <li>
                            <a href="#" >DIY装机</a>
                        </li>
                        <li>
                            <a href="#">延保服务</a>
                        </li>
                        <li>
                            <a href="#">清水河E卡</a>
                        </li>
                        <li>
                            <a href="#">清水河通信</a>
                        </li>
                        <li>
                            <a href="#">京鱼座智能</a>
                        </li>
                    </ul>
                </div>
                <div class="mod_help_cover">
                    <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="#">
                                查看详情<i class="iconfont icon-xiangzuo"></i>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="long_line" style="width: 1200px;"></div>
        <div class="mod_copyright">
            <p class="mod_copyright_links">
                <a href="#">关于我们</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">联系我们</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">联系客服</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">合作招商</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">商家帮助</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">营销中心</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">手机清水河</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">友情链接</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">销售联盟</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">清水河社区</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">风险监测</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">隐私政策</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">清水河公益</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">English Site</a>
                <span class="mod_copyright_split">|</span>
                <a href="#">Media & IR</a>
            </p>
            <p class="mod_copyright_auth">
                <a href="#" class="mod_copyright_auth_ico mod_copyright_auth_ico_1"></a>
                <a href="#" class="mod_copyright_auth_ico mod_copyright_auth_ico_2"></a>
                <a href="#" class="mod_copyright_auth_ico mod_copyright_auth_ico_3"></a>
                <a href="#" class="mod_copyright_auth_ico mod_copyright_auth_ico_4"></a>
                <a href="#" class="mod_copyright_auth_ico mod_copyright_auth_ico_5"></a>
                <a href="#" class="mod_copyright_auth_ico mod_copyright_auth_ico_6"></a>
            </p>
        </div>
    </div>


    <script src="js/list.js"></script>
</body>
</html>