software_engineering
/
shoppingcart.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Shoppingcart</title>
    <link rel="stylesheet" href="./fonts/font_vqnrr49p89/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/shoppingcart.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
<style>
    body {
        background-image: url(./img/home-img/112.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .box1{
        width: 90%;
        background-color: #fff;
        margin: 5%;
        margin-bottom: 0;
        margin-top: 3%;
        border-radius: 10px;
        display: flex;
        flex-wrap: wrap;

    }
    .box1-1{
        width: 90%;
        border-bottom: 1px solid #888;
    }


    .box1-2{
        width: 100%;
        overflow: hidden;
    }
    .box1-2 img{
        float:left;
        width: 20%;
        padding: 3%;
        padding-left: 0;
    }
    .text{
        margin: 5%;
        width: 90%;
    }
    .text h4{
        font-size: 14px;
        line-height: 12px;
        margin-left: 10px;
    }
    .text h3{
        font-size: 14px;
        line-height: 25px;
    }
    .text p{
        line-height: 25px;
        font-size: 12px;
        color: #aaa;
    }
    .img-1{
        width: 100%;
    }
    .img-1 img{
        padding: 2px 2px 2px 2px;
        z-index: 100;
        margin: 0;
        float: right;
    }
    .img-2{
        float: left;
        padding-top: 10%;
    }
    .img-2 img{
        width: 40%;
        margin-left: 25%;
    }

    .box1-3{
        width: 100%;
        border-top: 1px solid #888;
    }
    .box3 {
        width: 90%;
        background-color: #fff;
        margin: 5%;
        margin-bottom: 0;
        margin-top: 3%;
        border-radius: 15px;
        display: flex;
        flex-wrap: wrap;
    }
    .box3-0{
        width: 100%;
        padding-bottom: 3%;
        padding-top: 3%;
    }
    .box3-0 p{
        font-size: 15px;
        float: left;
        padding-left: 5px;
        font-weight: bold;
    }
    .box3-0 a {
        color: rgb(42, 33, 170);
        font-size: 12px;
        float: right;
        padding-right: 12px;
    }
    .box3-1{
        width: 32%;
        margin-left: 1%;
        box-sizing: border-box;
        position: relative;
    }
    .box3-2{
        width: 32%;
        margin-left: 1%;
        box-sizing: border-box;
        position: relative;
    }
    .box3-3{
        width: 32%;
        margin-left: 1%;
        box-sizing: border-box;
        position: relative;
    }
</style>

<body>
    <div class="box1">
        <div class="box1-1">
            <ul class="mlist1-1"><li>澡堂服务</li>
        </div>
        <div class="box1-2">
            <div class="img-2"><img src="./img/shoppingcart-img/b1.png"></div>
            <div class="text">
                <h4>3号技师</h4>
                <p>擅长搓背.拔火罐</p>
                <h3>￥15</h3>
                <div class="img-1"><img src="./img/shoppingcart-img/a4.png"></div>
            </div>

        </div>
        <div class="box1-3">
            <ul class="mlist1-3"><li>应付合计￥15</li><a href="#"><img src="./img/shoppingcart-img/a3.png"></a></ul>
        </div>
    </div>
    <div class="box3">
        <div class="box3-0"><p>技师</p><a href="#">换一批</a></div>
        <div class="box3-1">
            <ul class="mlist-1">
            <li>
                <div class="login-1"><img src="./img/home-img/plus.png"></div>
                <a href="#"><img src="./img/personal-img/b2.png"></a>
                <h1>2号技师</h1>
                <h2>擅长搓背.拔火罐.洗脚</h2>
                <h3>￥14.85</h3>
            </li>
        </div>
        <div class="box3-2">
            <ul class="mlist-1">
                <li>
                    <div class="login-1"><img src="./img/home-img/plus.png"></div>
                     <a href="#"><img src="./img/personal-img/b2.png"></a>
                    <h1>5号技师</h1>
                    <h2>擅长搓背.拔火罐</h2>
                    <h3>￥14.85</h3>
                </li>
            </ul>
        </div>
        <div class="box3-3">
            <ul class="mlist-1">
                <li>
                    <div class="login-1"><img src="./img/home-img/plus.png"></div>
                <a href="#"><img src="./img/personal-img/b2.png"></a>
                    <h1>7号技师</h1>
                    <h2>擅长搓背.拔火罐</h2>
                    <h3>￥9.9</h3>
                </li>
            </ul>
        </div>
    </div>

    <nav id="fixed">
       <div class="item">
           <span class="iconfont icon-home0"></span>
           <a href="#">首页</a>
       </div>
       <div class="item">
           <span class="iconfont icon-coffee"></span>
           <a href="#">预约</a>
       </div>
       <div class="item">
           <span class="iconfont icon-shoppingbagalt"></span>
           <a href="#">特惠活动</a>
       </div>
       <div class="item">
           <span class="iconfont icon-weibiao45124"></span>
           <a href="#">澡堂服务</a>
       </div>
       <div class="item">
           <span class="iconfont icon-icon25"></span>
           <a href="#">我的</a>
       </div>
   </nav>


    <script src="./js/swiper.min.js"></script>
</body>

</html>