移动端一个卡片效果的实现

最新推荐文章于 2024-06-26 14:24:17 发布

哲理小仙

最新推荐文章于 2024-06-26 14:24:17 发布

阅读量340

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_39196262/article/details/130523253

版权

文章展示了如何使用HTML和CSS创建类似QQ个人设置页面中的白色卡片区域。代码示例包括卡片的布局、边距、背景色和圆角设计，并提到了一些常用的背景颜色代码，如#f6f6f6（灰色背景）和#ffffff（卡片白色）。这是一个关于前端开发中卡片组件样式的记录。

摘要由CSDN通过智能技术生成

一般移动端开发都会使用一个卡片来显示一个区域的内容，QQ个人设置页面类似于这样：

中间有一个白色的小卡片，之前开发一直不注意样式，现在记录一下这个demo，先上代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>测试移动端背景和卡片</title>
        <link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet" />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                width: 100vw;
                height: 100vh;
                background-color: #f6f6f6;
                overflow: auto;
            }
            /* 和屏幕边缘产生间距 */
            .card-container {
                padding: 1rem;
                width: 100%;
                height: 500px;
            }
            /* 填充卡片所有背景为白色 */
            .card {
                width: 100%;
                height: 100%;
                background-color: #ffffff;
                border-radius: 1rem;
                padding: 0.5rem 1rem;
            }
            .card-item {
                height: 3rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="card-container">
                <div class="card">
                    <div class="card-item">
                        <section><i class="ri-headphone-line"></i> <span>超级QQ秀</span></section>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                    <div class="card-item">
                        <section><i class="ri-kakao-talk-line"></i> <span>直播</span></section>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                    <div class="card-item">
                        <section><i class="ri-vip-line"></i> <span>点我6折开会员</span></section>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                    <div class="card-item">
                        <section><i class="ri-wallet-line"></i> <span>我的QQ钱包</span></section>
                        <i class="ri-arrow-right-s-line"></i>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

最后的效果如下：

中间白色区域就是一个卡片区域了

主要是记住常用的颜色：

背景灰色：#f6f6f6 
卡片白色：#ffffff

下次移动端可以直接复制这个记录了

哲理小仙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫