美文网首页
4、底部购物车

4、底部购物车

作者: wqjcarnation | 来源:发表于2020-09-08 17:03 被阅读0次

    1、html

        <div class="container">
            <!-- 页脚部分 -->
            <div class="footer">
                 <div class="cart-left">
                     <!-- 车-->
                     <div class="cart-car">
                        <div class="cart-icon">
                            <i class="fa fa-shopping-cart"></i>
                            <div class="txt">
                                4
                            </div>
                        </div>
                     </div>
                     <!-- 文字-->
                     <div class="cart-info">
                         <p class="money1">¥12.88</p>
                        <p class="money2">另需配送费3元</p>
                     </div>
                 </div>
                 <div class="cart-right">
                    <a href="#">去结算</a>
                 </div>
            </div>
        </div>
    

    css

    <style type="text/css">
        .container{
            width:100vw;
            height: 100vh;
        }
            
        .footer{
            width:100vw;
            height: 14vw;
            background-color: #008CFF;
            position: fixed;
            bottom:0;
            right:0;
            display: flex;
            flex-direction: row;
        }
        .footer .cart-left{
            flex:2;
            background-color: #505051;
            /* step1 */
            display:flex;
        }
        .footer .cart-right{
            flex:1;
            background-color: #38CA73;
        }
        .footer .cart-car{
            box-sizing: border-box;
            width:16vw;
            height:16vw;
            border:1.5vw solid #444;
            background-color: #3190E8;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            border-radius: 50%;
            margin-top:-4vw;
            margin-left:3vw;
        }
        .cart-icon{
            font-size: 7vw;
            color:white;
        }
        .cart-icon .txt{
            width:5vw;
            height:5vw;
            background-color: red;
            position: absolute;
            right:-1.5vw;
            top:-1.5vw;
            font-size:4vw;
            text-align:center;
            border-radius: 50%;
        }
        /* step2 */ 
        .cart-info .money1{
            font-size: 4.5vw;
            font-weight: 800;
            color:white;
        }
        .cart-info .money2{
            font-size: 3vw;
            color:gray;
        }
        /* step3 */
            
        .cart-right{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cart-right a{
            color:white;
            font-size: 4.5vw;
            font-weight: 800;
        }
    </style>

    相关文章

      网友评论

          本文标题:4、底部购物车

          本文链接:https://www.haomeiwen.com/subject/jsljektx.html