php - 我如何修改我的 css 代码以像这张图片一样输出

Question

我的 style.php 文件中有这个

.msg{
    text-transform: none;
    text-align: center;
    font-weight: bold;
    color: red;
    border: solid 1px #fc0;
    background-color: #EFEF00;       -webkit-border-radius: 0.3em;
    border-radius: 0.3em;             margin: 6px;
    padding: 6px;
    tex 
}
#header{
    height: 50px;
    background: #decf9c;
    color: black;
    border-bottom: 2px solid       #663333;
    width: 98%;
}
.b_head{
    padding: 6px;
    background: #663333;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}


.cart {
    background-image: url('http://www.pvhc.net/img180/xewlwqfroahrisfwokkc.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #663333;
    width: 35px;
    height: 35px;
    border: 1px solid #fff;
    outline: 3px solid #8174f7;
    position: absolute ;
    right: 6px;
    center: 6px;
}

.badge {
    position: absolute;
    left: -15px;
    bottom: -15px;
    font-weight: 700;
    font-family: sans-serif;
    font-size: 20px;
    color: #fff;
    background-color: #663333;
    border: 2px solid #fff;
    padding: 3px;
    width: 12px;
    height: 12px;
    text-align: center;
}

.badge:empty{
    display: none;
}

.content{
    background-color: #fff;
    color: #000;
    padding:8px;
    text-align:center;
    margin-top:62px;
}

.red{
    color: red;
}

.info_post{
    background-color: #ffffcc;
    color: #000;
    font-weight:;
    border:1px solid #663333;
    padding: 4px;
    margin-top: 3px;
}

我的 php 文件中有这个

<?php
    require("init.php");
    include"style.php";
    if(isset($_SESSION["cart_array"]) && is_array($_SESSION["cart_array"])) {
        $cart = 0;
        $cartTotal = 0;
        foreach ($_SESSION["cart_array"] as $each_item) {
            $id = $each_item["item_id"];
            $qty = $each_item["quantity"];
            $cart += $qty;
            $sql = mysqli_query($conn, "SELECT * FROM promo WHERE code='$id' LIMIT 1");
            while($row=mysqli_fetch_array($sql)){
                $cartTotal += ( $row["price"] * $qty);
                if($cartTotal > 999) {
                    $cartTotal = number_format($cartTotal);
                }
            }
        }
    }
    echo "<br /><div class='info_post'><b> bulk SMS, and E-xchange market<br /></div>";
    echo "<a href='preview.php'><div class='cart'><span class='badge'>$cart</span></div></a>";
    echo "<div class='content'><div class='b_head'><table><span class='red'><div align='left'><b>#$cartTotal</b></span></div><div align='right'><img src='http://stevendie.xtgem.com/icon/menu/stv1_ceo.png'/><a href='login.php'><b>login</b></a></table></div></div></div>";
    echo "<table><form action='#' method='POST'><div align='left'><b>Check code:</b><br/ ><input type='text' name='book' placeholder='Enter  Username' size='17'> <input type='submit' name='submit' maxlength ='2' size='2' value='PRINT'></form></table>";
?>

目前的输出是这样的:

在我的成就中，我希望它看起来像 DEMO:

提前致谢

Answer 1

尝试添加::

.cart {position: relative;}
.badge {bottom: -30px;}