diwu
/
gwc.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="src/css/base.css">
    <style>
        body{

        }
        .jiessuan{
            width: 1210px;
            margin: 0 auto;
            overflow: hidden;
            margin: 30px 0;
        }
        .jiessuan ul{
            margin-left: 750px;
        }
        .jiessuan ul li{
            float: left;
            height: 30px;
            width: 100px;
            margin-left: 8px;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            background-color: #999999;

        }
        .tt{
            width: 1210px;
            height: 30px;
            background-color: #d9d9d9;
            margin: 0 auto;
            line-height: 30px;
            font-size: 14px;

        }

        .tt ul li{
            float: left;
            margin-left: 60px;
            width: 80px;
        }
        .tt ul li:nth-of-type(1){
            margin-left: 30px;
        }
        .shop ul li b{
            display: inline-block;
            width: 20px;
            height: 20px;
            border:#999999 solid 1px;
            margin-left: 3px;
            font-max-size: 12px;
            text-align: center;
            line-height: 20px;
            cursor: pointer;
            background-color: #c69c6d;
            color: #fff;
        }
        .shop ul li #num{
            display: inline-block;
            width: 20px;
            height: 15px;
            border:#999999 solid 1px;
            margin-left: 3px;
            font-max-size: 12px;
            text-align: center;
            line-height: 15px;
        }
        .shop{
            width: 1210px;
            height: 100px;
            margin: 0 auto;
            }
        .shop ul li{
            width: 100px;
            margin-left: 8px;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            float: left;
        }
    </style>
</head>
<body>
<div class="top">
    <p><a href="#"><img src="src/images/top.jpg" alt=""></a></p>
</div>
<div class="top-nav">
    <div class="top-inner">
        <div class="left">
            <span class="icon-home"></span><a href="#">第五大道首页</a>|
        </div>
        <div class="left2">
            <span class="icon-phone"></span><i>贵宾专线：4008-6767-38</i>
            <h4 id="h4">尊敬的:<u id="userinfor"></u>用户,你好!</h4>
            <a href="login.html" id="loginb">登录 <b>|</b></a>

        </div>
        <div class="register">
            <img src="src/images/youli.gif"/><a href="register.html">注册 <i>|</i></a>
        </div>
        <div class="nav">
            <div class="nav-content">
                <a href="#">我的第五大道</a>
                <ul>
                    <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 class="nav-logo"></div>
            </div>
        </div>
        <div class="help">
            <a href="#">帮助中心</a>
        </div>
        <div class="xz">
            <a href="#">手机版下载 <span class="icon-arrow-outline-down"></span></a>
            <!--<img src="images/qr.jpg" alt="">-->
        </div>

    </div>


</div>
<div class="header">
    <div class="logo">
        <a href="#"><img src="src/images/logo.jpg"></a>
    </div>
    <div class="yijian">
        <a href="#"><img src="src/images/yijian.jpg"></a>
    </div>
    <div class="search">
        <input placeholder="太阳镜" type="text">
        <button>搜索</button>
        <a href="#">连衣裙</a>
        <a href="#">美妆</a>
        <a href="#">运动户外</a>
        <a href="#">箱包</a>
        <a href="#">配饰</a>
        <a href="#">腕表</a>
    </div>
    <div class="haiwai">
        <i> <span class="icon-globe"></span>
            <h2>第五大道海外生活</h2></i>
        <img src="src/images/cart.png" alt="">
    </div>

</div>
<div class="nav-menu">
    <div class="menu">
        <ul>
            <li class="current"><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>
            <li><a href="#">海外馆</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">特惠</a></li>
            <li><a href="#">礼品区</a></li>
            <li><a href="#"><span class="icon-location"></span>到店</a></li>
            <li><a href="#"><img src="src/images/overseaslogo.gif" alt=""></a></li>
            <li><a href="#"><img src="src/images/ri.jpg" alt=""></a></li>
        </ul>
    </div>
</div>
<div class="jiessuan">
    <ul>
        <li>购物车</li>
        <li>填写核对订单</li>
        <li>付款</li>
        <li>订单支付成功</li>
    </ul>
</div>
<div class="tt">
    <ul>
        <li><input type="checkbox">全选</li>
        <li>商品名称</li>
        <li>商品属性</li>
        <li>购物价</li>
        <li>购买数量</li>
        <li>活动信息</li>
        <li>小计</li>
        <li>操作</li>
    </ul>

</div>
<div class="shop">
    <ul>
        <li><input type="checkbox"></li>
        <li><img src="src/images/ams.jpg"style="width: 100px;height: 100px;" alt=""></li>
        <li>经典红色H羊毛毯</li>
        <li>红色系</li>
        <li>8500.00</li>
        <li><h4> <b class="numjbtn">-</b><input type="text" id="num" value="1"><b class="numjabtn">+</b></h4></li>
        <li>-</li>
        <li>8500</li>
        <li>添加 <span>删除</span></li>
    </ul>
</div>
</body>
</html>
<script>
    var rBtn=document.querySelector(".numjabtn");
    var lBtn=document.querySelector(".numjbtn");
    var num=document.getElementById("num");
    rBtn.onclick=function () {
        num.value++
    }
    lBtn.onclick=function () {
        num.value--;
        if(num.value<=1){
            num.value=1;
        }
    }
</script>