用CSS画CSDN会员中心

写在前面的话：

  1. 本章内容：仿照CSDN的会员中心，在网页上绘制出来
  2. 所学知识：利用好background属性

目录

1.代码 

2.效果截图

 今天要模仿的是CSDN的会员中心，如下图：

1.代码 

<!DOCTYPE html>
<html lang="zh-CN">
<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>仿CSDN会员中心</title>

    <style>

        .vip {
            width: 470px;
            height: 260px;
        }

        .vip .img4 {
            width: 470px;
            height: 190px;
            background: url(会员特权背景.png);
        }

        /* 会员特权 */
        .vip .img4 .vip-text {

            color: #B8714E;
            position: absolute;
            top: 20px;
            left: 25px;
        }

        /* 抽万元礼 */
        .vip .img4 .bg1 {
            display: inline-block;
            width: 80px;
            height: 80px;
            background: url(抽万元礼.png) no-repeat;
            /* 设置背景图片全部显示 */
            background-size: contain;
            
            position: absolute;
            top: 50px;
            left: 20px;
        }

        .vip .img4 .text1 {
            display: inline-block;
            color: #C68C30;
            position: absolute;
            top: 130px;
            left: 27px;
        }

        /* 领券中心 */
        .vip .img4 .bg2 {
            display: inline-block;
            width: 80px;
            height: 80px;
            background: url(领券中心.png) no-repeat;
            background-size: contain;

            /* 设置图片位置 */
            position: absolute;
            top: 50px;
            left: 150px;
        }

        .vip .img4 .text2 {
            display: inline-block;
            color: #C68C30;
            position: absolute;
            top: 130px;
            left: 158px;
        }

        /* 加赠1年 */
        .vip .img4 .bg3 {
            display: inline-block;
            width: 80px;
            height: 80px;
            background: url(加赠1年.png) no-repeat;
            background-size: contain;

            /* 设置图片位置 */
            position: absolute;
            top: 50px;
            left: 270px;
        }

        .vip .img4 .text3 {
            display: inline-block;
            color: #C68C30;
            position: absolute;
            top: 130px;
            left: 280px;
        }

        /* 会员购 */
        .vip .img4 .bg4 {
            display: inline-block;
            width: 80px;
            height: 80px;
            background: url(会员购.png) no-repeat;
            background-size: contain;

            /* 设置图片位置 */
            position: absolute;
            top: 50px;
            left: 380px;
        }

        .vip .img4 .text4 {
            display: inline-block;
            color: #C68C30;
            position: absolute;
            top: 130px;
            left: 395px;
        }

        /* 底部 */
        .vip .vip-footer .vip-footer-text {
            display: inline-block;
            width: 330px;
            height: 70px;
            font-size: 16px;
            color: #999AAA;
            line-height: 70px;
            text-indent: 2em;
        }

        /* 圆角矩形“领券开通” */
        .vip .vip-footer .vip-footer-rectangle {

            display: inline-block;
            color: #b87100;
            width: 96px;
            height: 32px;
            /* 设置背景颜色：方块 */
            background: linear-gradient(270deg,#f8c883 0,#fae8d0 100%);
            line-height: 32px;

            /* 设置圆角 */
            border-radius: 16px;

            text-align: center;

        }


    </style>

</head>
<body>
    <div class="vip">
        <!-- 上面盒子，放图片 -->
        <div class="img4">
            <div class="vip-text">会员特权</div>

            <!-- 放四个图片 -->
            <div>
                <div class="bg1"></div>
                <div class="bg2"></div>
                <div class="bg3"></div>
                <div class="bg4"></div>
                <div class="text1">抽万元礼</div>
                <div class="text2">领券中心</div>
                <div class="text3">加赠1年</div>
                <div class="text4">会员购</div>
            </div>
            
        </div>
        <!-- 下面盒子，放“领券开通” -->
        <div class="vip-footer">
            <div class="vip-footer-text">领取限时优惠券，最高可减80元></div>
            <!-- 圆角矩形“领券开通” -->
            <div class="vip-footer-rectangle">领券开通</div>
        </div>
    </div>
</body>
</html>

2.效果截图

posted @ 2022-05-02 20:18  辰梦starDream  阅读(10)  评论(0)  编辑  收藏  举报  来源