css 实现块状样式

        .release_main {
            width: 100%;
            text-align: center;
            overflow: hidden;
            margin-top: 20px;
        }
        .release_detail {
            border: 2px solid;
            box-sizing: border-box;
            width: 20%;
            height: 140px;
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin: 5px 2%;
        }
        .text {
            font-size: 30px;
        }

        .num {
            font-size: 25px;
        }
        .yesterday_color {
            background-color: #f9847e;
            border-color: #f8655e;
        }

        .thisweek_color {
            background-color: #ffa94d;
            border-color: #ff9420;
        }

        .thismonth_color {
            background-color: #43c95d;
            border-color: #14bc34;
        }

        .total_color {
            background-color: #216693;
            border-color: #216693;
        }

    <div class='release_main'>
        <div class='release_detail yesterday_color'>
            <div class='text'>昨日发布量</div>
            <div class="num">@ViewBag.yesterdayTotalNum</div>
        </div>
        <div class='release_detail thisweek_color'>
            <div class='text'>本周发布量</div>
            <div class="num">@ViewBag.thisWeekTotalNum </div>
        </div>
        <div class='release_detail thismonth_color'>
            <div class='text'>本月发布量</div>
            <div class="num">@ViewBag.thisMonthTotalNum</div>
        </div>
        <div class='release_detail total_color'>
            <div class='text'>累计发布量</div>
            <div class="num">@ViewBag.totalNum</div>
        </div>
    </div>

这是效果图

 

转载于:https://www.cnblogs.com/lightpro/p/10948208.html