100DaysCSS-day5挑战

奶粉罐没粉

已于 2023-01-14 00:38:57 修改

阅读量148

点赞数

分类专栏： 100DaysCSS练习合集文章标签： html css Powered by 金山文档

于 2023-01-14 00:37:32 首次发布

本文链接：https://blog.csdn.net/qq_62089165/article/details/128681448

版权

主题：统计

在数字世界中，能够正确解释它们很重要。漂亮的统计数据有助于捕获这些数据。

用到的技术：svg、less

<body>
    <div class="box">
        <div class="card">
            <div class="header">
                <div class="left">
                    <h4>WEEKLY REPORT</h4>
                    <span>01. Feb - 07. Feb</span>
                </div>
                <div class="right">
                    <span>Revenue</span>
                    <h4>$3621.79</h4>
                </div>
            </div>
            <div class="content">
                <div>
                    <div>
                        <i></i>
                        <span>Views</span>
                    </div>
                    <div>
                        <i></i>
                        <span>Purchases</span>
                    </div>
                </div>
                <div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div>
                        <svg width="100%" height="72px">
                            <polyline points="8,68 68,20 118,30 168,20 218,58 268,70 318,30"
                                style="fill:white;stroke:#ff3040;stroke-width:2" />
                        </svg>
                        <em></em>
                        <em></em>
                        <em></em>
                        <em></em>
                        <em></em>
                        <em></em>
                        <em></em>
                    </div>
                    <div>
                        <svg width="100%" height="62px">
                            <polyline points="8,40 68,20 118,35 1