购物车、结算页

一、购物车

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城系统购物车</title>
    <link rel="stylesheet" href="shop_shopping_cart.css">
</head>
<body>
<!--引用public-header代码-->
<nav class="public-header">
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">讨论区</a>
    <span>
        <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
        <a href="">免费注册</a>
    </span>
</nav>
<!--购物车-->
<div class="shop-shopping-cart">
   <h3>我的购物车</h3>
   <header>
       <span>
           <input type="checkbox" id="all-selected" checked>
           <label for="all-selected">全选</label>
       </span>
       <span>商品</span>
       <span>单价</span>
       <span>数量</span>
       <span>小计</span>
       <span>操作</span>
   </header>
   <main>
       <div>
           <span>
               <label><input type="checkbox" name="count" value="1" min="1"></label>
           </span>
           <span class="pic-intro">
               <a href=""><img src="static/images/111.jpg" alt=""></a>
               <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
           </span>
           <span><i>&yen;</i>179.00</span>
           <span>
               <label><input type="number" name="choose" checked></label>
           </span>
           <span><i>&yen;</i>179.00</span>
           <span>
               <a href="">删除</a>
               <a href="">移到我的关注</a>
           </span>
       </div>
       <div>
           <span>
               <label><input type="checkbox" name="count" value="1" min="1"></label>
           </span>
           <span class="pic-intro">
               <a href=""><img src="static/images/1111.jpg" alt=""></a>
               <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
           </span>
           <span><i>&yen;</i>179.00</span>
           <span>
               <label><input type="number" name="choose" checked></label>
           </span>
           <span><i>&yen;</i>179.00</span>
           <span>
               <a href="">删除</a>
               <a href="">移到我的关注</a>
           </span>
       </div>
       <div>
           <span>
               <label><input type="checkbox" name="count" value="1" min="1"></label>
           </span>
           <span class="pic-intro">
               <a href=""><img src="static/images/22.jpg" alt=""></a>
               <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
           </span>
           <span><i>&yen;</i>179.00</span>
           <span>
               <label><input type="number" name="choose" checked></label>
           </span>
           <span><i>&yen;</i>179.00</span>
           <span>
               <a href="">删除</a>
               <a href="">移到我的关注</a>
           </span>
       </div>
   </main>
   <footer>
       <span>数量:<i>3</i></span>
       <span>金额:<i>927.00</i></span>
       <button>去结算</button>
   </footer>
</div>
<!--引用public-footer代码-->
<footer class="public-footer">
    <div>
        <a href="">简介</a>
        <a href="">联系我们</a>
        <a href="">招聘信息</a>
        <a href="">友情链接</a>
        <a href="">用户服务协议</a>
        <a href="">隐私权声明</a>
        <a href="">法律投诉声明</a>
    </div>
    <div><span>LOGO</span></div>
    <div>
        <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
        <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
        <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
    </div>
    <div>
        <p>关注公众号</p>
        <img src="static/images/erwei-code.png" alt="">
    </div>
</footer>
</body>
</html>

CSS代码

/*初始化样式*/
@import "static/css/reset.css";
/*引入头部css*/
@import "public_header.css";
/*引入尾部css*/
@import "public_footer.css";
/*购物车整体样式*/
.shop-shopping-cart {
    width: 1200px;
    background-color: #fff;
    margin: 30px auto;
    padding: 15px 0;
    border-radius: 8px;
    box-sizing: border-box;
}
/*鼠标*/
.shop-shopping-cart:hover {
    box-shadow: 0 0 8px #888888;
}
/*标题*/
.shop-shopping-cart > h3 {
    font-size: 20px;
    text-align: center;
    /*取消加粗*/
    font-weight: normal;
    margin-bottom: 20px;
}
/*头部*/
.shop-shopping-cart > header {
    height: 40px;
    border-bottom: 1px solid #cccccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
/*主体*/
.shop-shopping-cart > main {
    margin: 20px 0;
}
.shop-shopping-cart > main > div {
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.shop-shopping-cart > main > div:hover {
    background-color: lightcyan;
}
.shop-shopping-cart > main > div .pic-intro img {
    width: 60px;
    height: 45px;
    margin-right: 10px;
}
.shop-shopping-cart > main > div .pic-intro {
    /*转为flex，默认水平排列*/
    display: flex;
}
.shop-shopping-cart > main > div .pic-intro > a:last-of-type {
    /*设置宽度，文字描换行*/
    width: 155px;
    margin-left: 40px;
}
.shop-shopping-cart > main > div a:hover {
    background-color: lightcyan;
}
/*调整main之间距离*/
.shop-shopping-cart > main > div > span:first-of-type {
    position: relative;
    left: 33px;
}
.shop-shopping-cart > main > div > .pic-intro {
    position: relative;
    left: 25px;
}
.shop-shopping-cart > main > div > span:nth-of-type(3) {
     position: relative;
     left: -55px;
 }
.shop-shopping-cart > main > div > span:nth-of-type(3) i {
    margin-right: 10px;
}
.shop-shopping-cart > main > div > span:nth-of-type(4) {
    position: relative;
    left: -25px;
}
.shop-shopping-cart > main > div > span:nth-of-type(4) input {
    width: 60px;
}
.shop-shopping-cart > main > div > span:nth-last-of-type(2) {
    position: relative;
    left: 0px;
}
.shop-shopping-cart > main > div > span:nth-last-of-type(2) i {
    margin-right: 10px;
    color: green;
}
.shop-shopping-cart > main > div > span:last-of-type {
    position: relative;
    left: 30px;
}
.shop-shopping-cart > main > div > span:last-of-type i {
    color: green;
    font-size: 1.01rem;
    margin-right: 10px;
}
/*尾部*/
.shop-shopping-cart > footer {
    height: 70px;
    padding: 20px;
    border-top: 1px solid #cccccc;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.shop-shopping-cart > footer >*:not(:last-child) {
    width: 180px;
}
.shop-shopping-cart > footer > button {
    height: 40px;
    width: 120px;
    background-color: lightcoral;
    border: none;
    color: white;
    font-size: 1.1rem;
}
.shop-shopping-cart > footer > button:hover{
    background-color: seagreen;
    cursor:pointer;
}
.shop-shopping-cart > footer > span:first-of-type i {
    margin-left: 3px;
}

效果图

二、结算页

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城结算</title>
    <link rel="stylesheet" href="shop_shooping_pay.css">
</head>
<body>
<div class="shop-shopping-pay">
    <h2>填写并核对定单信息</h2>
<!--    收货信息-->
    <div class="information">
        <div>
            <h3>收货人信息</h3>
            <span>新增收货地址</span>
        </div>
        <span>赵大叔 云南 昆明 ******** 183*******3</span>
        <span>更多地址</span>
    </div>
<!--    支付方式-->
    <div class="payment-mothod">
        <h3>支付方式</h3>
        <div>
            <span>货到付款</span>
            <span>在线支付</span>
            <span>更多</span>
        </div>
    </div>
<!--    送货清单-->
    <div class="delivery-list">
        <h3>送货清单</h3>
        <header>
       <span>
           <input type="checkbox" id="all-selected" checked>
           <label for="all-selected">全选</label>
       </span>
            <span>商品</span>
            <span>单价</span>
            <span>数量</span>
            <span>小计</span>
            <span>操作</span>
        </header>
        <div>
           <span>
               <label><input type="checkbox" name="count" value="1" min="1"></label>
           </span>
            <span class="pic-intro">
               <a href=""><img src=homework/static/images/1111.jpg" alt=""></a>
               <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
           </span>
            <span><i>&yen;</i>179.00</span>
            <span>
               <label><input type="number" name="choose" checked></label>
           </span>
            <span><i>&yen;</i>179.00</span>
            <span>
               <a href="">删除</a>
               <a href="">移到我的关注</a>
           </span>
        </div>
        <div>
           <span>
               <label><input type="checkbox" name="count" value="1" min="1"></label>
           </span>
            <span class="pic-intro">
               <a href=""><img src="homework/static/images/1111.jpg" alt=""></a>
               <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
           </span>
            <span><i>&yen;</i>179.00</span>
            <span>
               <label><input type="number" name="choose" checked></label>
           </span>
            <span><i>&yen;</i>179.00</span>
            <span>
               <a href="">删除</a>
               <a href="">移到我的关注</a>
           </span>
        </div>
        <div>
           <span>
               <label><input type="checkbox" name="count" value="1" min="1"></label>
           </span>
            <span class="pic-intro">
               <a href=""><img src="homework/static/images/22.jpg" alt=""></a>
               <a href="">创维盒子T2 电视机顶盒 智能网络盒子4核16G闪存 高清电视无线wifi</a>
           </span>
            <span><i>&yen;</i>179.00</span>
            <span>
               <label><input type="number" name="choose" checked></label>
           </span>
            <span><i>&yen;</i>179.00</span>
            <span>
               <a href="">删除</a>
               <a href="">移到我的关注</a>
           </span>
        </div>
    </div>
<!--    确认支付-->
    <div class="place-order">
        <span><i>应付总额</i>&yen;927.00</span>
        <div>
            <span>寄送至：云南 昆明 ******** </span>
            <span>收货人：赵大叔 183*******3</span>
        </div>
        <button type="button">提交定单</button>
    </div>
</div>
</body>
</html>

CSS代码

@import "homework/static/css/reset.css";
.shop-shopping-pay {
    width: 1000px;
    margin: 10px auto auto;
    /*outline: 1px dashed red;*/
}
.shop-shopping-pay > .information {
    width: 900px;
    margin: 10px auto auto;
    display: flex;
    flex-direction: column;
    border: 1px;
}
.shop-shopping-pay > .information > div {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.shop-shopping-pay > .information > span {
    margin-left: 30px;
}
.shop-shopping-pay > .payment-mothod {
    width: 900px;
    margin: 10px auto auto;
    display: flex;
    flex-direction: column;
}
.shop-shopping-pay > .payment-mothod > div {
    margin-left: 30px;
    display: flex;
}
/*头部*/
.shop-shopping-pay > .delivery-list > h3 {
    margin-top: 10px;
}
.shop-shopping-pay > .delivery-list > header {
    margin-top: 10px;
}
.shop-shopping-pay > .delivery-list > header {
    height: 40px;
    border-bottom: 1px solid #cccccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.shop-shopping-pay > .delivery-list {
    width: 900px;
    margin: auto;
}
.shop-shopping-pay > .delivery-list > div {
    margin-left: 30px;
}
.shop-shopping-pay > .delivery-list > div {
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.shop-shopping-pay > .delivery-list > div:hover {
    background-color: lightcyan;
}
.shop-shopping-pay > .delivery-list > div .pic-intro img {
    width: 70px;
    height: 70px;
}
.shop-shopping-pay > .delivery-list > div .pic-intro {
    /*转为flex，默认水平排列*/
    display: flex;
}
.shop-shopping-pay > .delivery-list > div .pic-intro > a:last-of-type {
    /*设置宽度，文字描换行*/
    width: 100px;
    margin-left: 5px;
}
.shop-shopping-pay > .delivery-list > div a:hover {
    background-color: lightcyan;
}
/*调整main之间距离*/
.shop-shopping-pay > .delivery-list > div > span:first-of-type {
    position: relative;
}
.shop-shopping-pay > .delivery-list > div > .pic-intro {
    position: relative;
    left: 10px;
}
.shop-shopping-pay > .delivery-list > div > span:nth-of-type(3) {
    position: relative;
    left: -25px;
}
.shop-shopping-pay > .delivery-list > div > span:nth-of-type(3) i {
    margin-right: 5px;
}
.shop-shopping-pay > .delivery-list > div > span:nth-of-type(4) {
    position: relative;
    left: -1px;
}
.shop-shopping-pay > .delivery-list > div > span:nth-of-type(4) input {
    width: 60px;
}
.shop-shopping-pay > .delivery-list > div > span:nth-last-of-type(2) {
    position: relative;
    left: 20px;
}
.shop-shopping-pay > .delivery-list > div > span:nth-last-of-type(2) i {
    margin-right: 10px;
    color: green;
}
.shop-shopping-pay > .delivery-list > div > span:last-of-type {
    position: relative;
    left: 30px;
}
.shop-shopping-pay > .delivery-list > div > span:last-of-type i {
    color: green;
    font-size: 1.01rem;
    margin-right: 10px;
}
.shop-shopping-pay > .place-order {
    width: 900px;
    margin: 10px auto auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.shop-shopping-pay > .place-order div {
    display: flex;
}
.shop-shopping-pay > .place-order > span:first-of-type i {
    margin-right: 30px;
}
.shop-shopping-pay > .place-order > button {
    width: 150px;
    height: 35px;
    background-color: red;
    color: white;
    font-size: 1.2rem;
}

效果图

个人总结：
堪称最丑结算页面了，页面美化方面十分欠缺。

批改老师：

天蓬老师

批改状态：合格

老师批语：还好啦, 毕竟实现了

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

grid布局学习笔记

2020-04-15 03:09:38