购物车仿写：

经过1个月左右的学习，不断的试错，总结，不停搜索脑海和百度里的各种属性代码，终于写出了稍微像样的购物车页面。

HTML代码：

<body>
    <div class="gwc">
        <div class="gwc1">
            <a href="#"><img src="../img/logo.png"></a>
            <a href="#">购物车</a>
            <div class="sousuo">
                <input type="search" name="search" id="search">
                <label for="search">搜索</label>
            </div>
        </div>
        <div class="gwc2">
            <span class="gwc21">全部商品9</span>
            <div>
                <span class="gwc22">配送至:</span>
                <input type="search" value="四川省成都市高新区">
            </div>
        </div>
        <div class="gwc3">
            <input type="checkbox" name="checkbox" value=''>
            <span>全选</span>
            <span>商品</span>
            <span>单价</span>
            <span>数量</span>
            <span>小计</span>
            <span>操作</span>
        </div>
        <div class="gwc4">
            <input type="checkbox">
            <a><img src="../img/2.jpg" class="img1"></a>
            <a class="a1"><img src="../img/3.jpg" class="img2">洋河蓝色经典 梦之蓝M3 52度 礼盒装 500ml*2瓶白酒 口感绵柔浓香</a>
            <span>52度 M3礼盒装</span>
            <a class="a1">￥1099.00</a>
            <a><img src="../img/5.jpg" class="img2"></a>
            <span class="span1">￥1099.00</span>
            <a class="a1">删除</a>
        </div>
        <div class="gwc4">
            <input type="checkbox">
            <a><img src="../img/2.jpg" class="img1"></a>
            <a class="a1"><img src="../img/3.jpg" class="img2">洋河蓝色经典 梦之蓝M3 52度 礼盒装 500ml*2瓶白酒 口感绵柔浓香</a>
            <span>52度 M3礼盒装</span>
            <a class="a1">￥1099.00</a>
            <a><img src="../img/5.jpg" class="img2"></a>
            <span class="span1">￥1099.00</span>
            <a class="a1">删除</a>
        </div>
        <div class="gwc4">
            <input type="checkbox">
            <a><img src="../img/2.jpg" class="img1"></a>
            <a class="a1"><img src="../img/3.jpg" class="img2">洋河蓝色经典 梦之蓝M3 52度 礼盒装 500ml*2瓶白酒 口感绵柔浓香</a>
            <span>52度 M3礼盒装</span>
            <a class="a1">￥1099.00</a>
            <a><img src="../img/5.jpg" class="img2"></a>
            <span class="span1">￥1099.00</span>
            <a class="a1">删除</a>
        </div>
        <div class="gwc5">
            <input type="checkbox" name="checkbox" value=''>
            <span>全选</span>
            <a href="#">删除选中商品</a>
            <a href="#">移到关注</a>
            <a href="#" class="a1">清理购物车</a>
            <a href="#">已选择<b class="b1">0</b>件商品</a>
            <span>总价<b class="b2">￥0.00</b></span>
            <input type="submit"  value='去结算' class="i1">
        </div>
    </div>
</body>
</html

CSS代码：

@import "../zujian_reset.css";
*{
    /*border: 1px solid blue;*/
}
.gwc{
    width: 1000px;
    margin: auto;
}
.gwc>.gwc1{
    display: flex;
    height: 60px;
    margin-top: 15px;
}
.gwc>.gwc1 a:nth-of-type(2) {
    font-size: 18px;
    color: #666666;
    height: 30px;
    align-self: end;
}
.gwc>.gwc1>.sousuo{
    display: flex;
    margin-left: auto;
    align-self: end;
}
.gwc>.gwc1>.sousuo input{
    width: 300px;
    height: 30px;
    /*border-color: red;*/
    /*border-width: 2px;*/
    border: 2px solid red;
    outline: none;
}
.gwc>.gwc1>.sousuo label{
    /*font-size: 23px;*/
    /*height: 500px;*/
    color: #e9e9e9;
    background: red;
    width: 50px;
    height: 30px;
    font-size: 13px;
    text-align: center;
    line-height: 30px;
}
.gwc>.gwc2{
    height: 30px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    /*margin-bottom: 10px;*/
    /*padding-bottom: 8px;*/
}
.gwc>.gwc2>.gwc21{
    color: red;
    font-weight: bold;
    border-bottom: 1px solid red;
}
.gwc>.gwc2>div>.gwc22{
    color: #333333;
    font-size: 12px;
}
.gwc>.gwc2>div>input{
    width: 160px;
    height: 22px;
    color: #969896;
}
.gwc>.gwc3{
    display: grid;
    background: #cccccc;
    height: 45px;
    grid-template: '1 2 3 4 5 6 7' 1fr
                   /3% 10% 47% 9% 13% 9% 9%;
    place-items: center start;
}
.gwc>.gwc3 span{
    color: #333333;
    font-size: 12px;
    margin-left: 15px;
}
.gwc>.gwc3 input{
    place-self: center;
}
.gwc>.gwc4{
    display: grid;
    background: #ffffff;
    border-top: 1px solid #999999;
    height: 130px;
    grid-template: '1 2 3 4 5 6 7 8' 1fr
                   /3% 12% 33% 12% 9% 13% 9% 9%;
    place-items: start;
    padding-top: 15px;
}
.gwc>.gwc4 .img1{
    width: 100px;
    height: 100px;
    border: 1px solid #999999;
    margin-left: 10px;
}
.gwc>.gwc4 input{
    place-self: start center;
}
.gwc>.gwc4 .img2{
    width: 60px;
    height: 17px;
}
.gwc>.gwc4>.a1{
    color: #333333;
    font-size: 12px;
    margin-left: 10px;
}
.gwc>.gwc4 span{
    color: #333333;
    font-size: 12px;
    margin-left: 10px;
    /*: 1em;*/
}
.gwc>.gwc4>.span1{
    font-weight: bold;
    font-size:15px;
}
.gwc>.gwc5{
    display: grid;
    background: #cccccc;
    margin-top: 15px;
    height: 55px;
    grid-template: '1 2 3 4 5 7 8 9' 1fr
                   /3% 3% 8% 5%  auto 10% 8% 10%;
    place-items: center start;
}
.gwc>.gwc5 input{
    place-self: center;
}
.gwc>.gwc5 a{
    font-size: 11px;
    color: #666;
}
.gwc>.gwc5 span{
    font-size: 11px;
    color: #666;
}
.gwc>.gwc5 .a1{
     font-size: 12px;
     color: #444;
    font-weight: bold;
 }
.gwc>.gwc5 .b1{
    color: red;
    font-size: 13px;
}
.gwc>.gwc5 .b2{
    color: red;
    font-size: 18px;
    font-weight: bolder;
}
.gwc>.gwc5 .i1{
    height: 55px;
    width: 90px;
    place-self: end;
    background: red;
    color: #ffffff;
    font-size: 16px;
    border: none;
}

购物车仿写--PHP培训十期线上班

购物车仿写：

HTML代码：

CSS代码：

运行结果截图：

相关文章