Web实现：消息卡片开发实例

最新推荐文章于 2023-04-11 10:26:39 发布

jasmyn518

最新推荐文章于 2023-04-11 10:26:39 发布

阅读量460

点赞数

分类专栏： CSS 笔记 HTML 文章标签：前端 css scss

本文链接：https://blog.csdn.net/jasmyn518/article/details/124212165

版权

笔记同时被 3 个专栏收录

127 篇文章 3 订阅

订阅专栏

HTML

78 篇文章 2 订阅

订阅专栏

CSS

68 篇文章 0 订阅

订阅专栏

图片都在本地没有上传，使用代码时可以适当修改。
第一种：
HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>代码演示</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <!-- 关闭按钮--定位 -->
        <span class="close-icon"></span>
        <!-- 头部 -->
        <header class="header">
            <section>
                <!-- 头像 -->
                <div class="head-icon"></div>
                <!-- 昵称和称谓 -->
                <div class="nick-sign">
                    <!-- 上半部分--昵称和图标 -->
                    <div class="nick">
                        <span>触心话</span>
                        <!-- 考虑到某位博主可能会有多个图标所以用了列表 -->
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                    <p class="sign">知名情感博主</p>
                </div>
            </section>
            <section>
                <span class="add-focus"></span>
                <span class="focus">关注</span>
            </section>
        </header>
        <main>
            <!-- 标题 -->
            <p class="weibo-title">初秋的巴黎，与<span>@lexeander</span>诉说一场时装的故事</p>
            <!-- 图片列表 -->
            <ul class="img-list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 动态追踪、态度 -->
            <div class="tracking">
                <p class="p-left"><span></span>触心话最新动态追踪</p>
                <p class="p-right">183人发表了态度</p>
            </div>
        </main>
        <footer class="footer">
            <div><span class="share"></span>23842</div>
            <div><span class="comment"></span>6344</div>
            <div><span class="support"></span>105819</div>
        </footer>
    </div>
</body>

</html>

CSS部分：

html {
  font-size: 20px; }

body {
  margin: 0;
  padding: 0;
  background: #c4c4c4; }

html {
  font-size: 20px; }

body {
  background: #c4c4c4; }

body,
ul,
li,
p {
  margin: 0;
  padding: 0; }

ul {
  list-style: none; }

.container {
  position: relative;
  box-sizing: border-box;
  width: 18.75rem;
  background: #ffffff;
  padding: 0.75rem;
  padding-bottom: 0; }
  .container .close-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.4rem;
    width: 0.6rem;
    height: 0.6rem;
    background: url(./images/close-icon.png) no-repeat center;
    background-size: contain; }
  .container .header {
    height: 2rem;
    display: flex;
    align-items: center; }
    .container .header section:nth-child(1) {
      flex: 2;
      display: flex; }
      .container .header section:nth-child(1) .head-icon {
        position: relative;
        width: 2rem;
        height: 2rem;
        margin-right: 0.5rem;
        background: url(./images/head-icon.png) no-repeat center;
        background-size: contain; }
        .container .header section:nth-child(1) .head-icon::after {
          content: '';
          position: absolute;
          top: 1.3rem;
          right: -0.1rem;
          width: 0.7rem;
          height: 0.7rem;
          background: url(./images/vip-logo.png) no-repeat center;
          background-size: contain; }
      .container .header section:nth-child(1) .nick-sign {
        flex: 1; }
        .container .header section:nth-child(1) .nick-sign .nick {
          display: flex;
          margin-bottom: 0.2rem; }
          .container .header section:nth-child(1) .nick-sign .nick span {
            font-style: normal;
            font-weight: normal;
            font-size: 0.7rem;
            line-height: 1rem;
            color: #FC7E26;
            margin-right: 0.25rem; }
          .container .header section:nth-child(1) .nick-sign .nick ul {
            display: flex;
            align-items: center; }
            .container .header section:nth-child(1) .nick-sign .nick ul li {
              width: 0.7rem;
              height: 0.7rem;
              margin-right: 0.25rem;
              background: url(./images/vip-level.png) no-repeat center;
              background-size: contain; }
        .container .header section:nth-child(1) .nick-sign .sign {
          font-style: normal;
          font-weight: normal;
          font-size: 0.55rem;
          line-height: 0.75rem;
          color: #B5B5B5; }
    .container .header section:nth-child(2) {
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 3rem;
      height: 1.3rem;
      margin-right: 0.75rem;
      border-radius: 1.3rem;
      border: 0.05rem solid #FD9232; }
      .container .header section:nth-child(2) .add-focus {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        margin-right: 0.35rem;
        background: url(./images/add-focus.png) no-repeat center;
        background-size: contain; }
      .container .header section:nth-child(2) .focus {
        font-style: normal;
        font-weight: normal;
        font-size: 0.55rem;
        line-height: 0.75rem;
        color: #FD9232; }
  .container .weibo-title {
    padding: 0.5rem 0px 0.4rem;
    font-style: normal;
    font-weight: normal;
    font-size: 0.7rem;
    line-height: 1.15rem;
    color: #333333; }
    .container .weibo-title span {
      color: #EB7350; }
  .container .img-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }
    .container .img-list li {
      width: 5.5rem;
      height: 5.5rem;
      margin: 0.1rem;
      background: url(./images/image1.png) no-repeat center;
      background-size: contain; }
      .container .img-list li:nth-child(2) {
        background: url(./images/image2.png) no-repeat center;
        background-size: contain; }
      .container .img-list li:nth-child(3) {
        background: url(./images/image3.png) no-repeat center;
        background-size: contain; }
      .container .img-list li:nth-child(4) {
        background: url(./images/image4.png) no-repeat center;
        background-size: contain; }
      .container .img-list li:nth-child(5) {
        background: url(./images/image5.png) no-repeat center;
        background-size: contain; }
      .container .img-list li:last-child {
        background: url(./images/image6.png) no-repeat center;
        background-size: contain; }
  .container .tracking {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0 0.5rem;
    border-bottom: 0.05rem solid rgba(224, 224, 224, 0.35); }
    .container .tracking p {
      font-style: normal;
      font-weight: normal;
      font-size: 0.6rem;
      line-height: 0.8rem; }
      .container .tracking p.p-left {
        position: relative;
        color: #EB7350;
        padding-left: 1rem; }
        .container .tracking p.p-left span {
          position: absolute;
          top: -0.1rem;
          left: 0;
          width: 0.8rem;
          height: 0.9rem;
          background: url(./images/open-heart.png) no-repeat center;
          background-size: contain; }
      .container .tracking p.p-right {
        color: #9F9F9F; }
  .container .footer {
    display: flex;
    height: 1.75rem; }
    .container .footer div {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-style: normal;
      font-weight: normal;
      font-size: 11px;
      line-height: 15px;
      color: #808080; }
      .container .footer div span {
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        background: url(./images/share.png) no-repeat center;
        background-size: contain;
        margin-right: 0.25rem; }
        .container .footer div span.comment {
          background: url(./images/comments.png) no-repeat center;
          background-size: contain; }
        .container .footer div span.support {
          background: url(./images/support.png) no-repeat center;
          background-size: contain; }

/*scss代码如下：*/
/*html {
    font-size: 20px;
}

body {
    margin: 0;
    padding: 0;
    // 为了凸显出container，给body添加一个背景色，后面会去除
    background: #c4c4c4;
}

@function px2rem($px) {
    $rem: $px / 20;
    @return #{$rem}rem;
}


html {
    font-size: 20px;
}

body {
    // 为了凸显出container，给body添加一个背景色，后面会去除
    background: #c4c4c4;
}

body,
ul,
li,
p {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

@function px2rem($px) {
    $rem: $px / 20;
    @return #{$rem}rem;
}

.container {
    position: relative;
    box-sizing: border-box;
    width: px2rem(375);
    background: #ffffff;
    padding: px2rem(15);
    padding-bottom: 0;

    // 关闭按钮
    .close-icon {
        // 这里用了定位以后，不要忘了给父元素添加相对定位
        position: absolute;
        top: px2rem(10);
        right: px2rem(8);
        width: px2rem(12);
        height: px2rem(12);
        background: url(./images/close-icon.png) no-repeat center;
        background-size: contain;
    }


    .header {
        height: px2rem(40);
        display: flex;
        align-items: center;

        section {
            &:nth-child(1) {
                flex: 2;
                display: flex;
                // background-color: #FC7E26;

                // 头像
                .head-icon {
                    position: relative;
                    width: px2rem(40);
                    height: px2rem(40);
                    margin-right: px2rem(10);
                    background: url(./images/head-icon.png) no-repeat center;
                    background-size: contain;

                    &::after {
                        content: '';
                        position: absolute;
                        top: px2rem(26);
                        right: px2rem(-2);
                        width: px2rem(14);
                        height: px2rem(14);
                        background: url(./images/vip-logo.png) no-repeat center;
                        background-size: contain;
                    }
                }

                .nick-sign {
                    // 占满右侧剩余部分
                    flex: 1;

                    .nick {
                        display: flex;
                        margin-bottom: px2rem(4);

                        span {
                            font-style: normal;
                            font-weight: normal;
                            font-size: px2rem(14);
                            line-height: px2rem(20);
                            color: #FC7E26;
                            margin-right: px2rem(5);
                        }

                        ul {
                            display: flex;
                            align-items: center;

                            li {
                                width: px2rem(14);
                                height: px2rem(14);
                                margin-right: px2rem(5);
                                background: url(./images/vip-level.png) no-repeat center;
                                background-size: contain;
                            }
                        }
                    }

                    .sign {
                        font-style: normal;
                        font-weight: normal;
                        font-size: px2rem(11);
                        line-height: px2rem(15);
                        color: #B5B5B5;
                    }
                }

            }

            &:nth-child(2) {
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                width: px2rem(60);
                height: px2rem(26);
                margin-right: px2rem(15);
                border-radius: px2rem(26);
                border: px2rem(1) solid #FD9232;

                .add-focus {
                    display: block;
                    width: px2rem(12);
                    height: px2rem(12);
                    margin-right: px2rem(7);
                    background: url(./images/add-focus.png) no-repeat center;
                    background-size: contain;
                }

                .focus {
                    font-style: normal;
                    font-weight: normal;
                    font-size: px2rem(11);
                    line-height: px2rem(15);
                    color: #FD9232;
                }
            }
        }
    }

    .weibo-title {
        padding: px2rem(10) 0px px2rem(8);
        font-style: normal;
        font-weight: normal;
        font-size: px2rem(14);
        line-height: px2rem(23);
        color: #333333;

        span {
            color: #EB7350;
        }
    }

    // 图片列表
    .img-list {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;

        li {
            width: px2rem(110);
            height: px2rem(110);
            margin: px2rem(2);
            background: url(./images/image1.png) no-repeat center;
            background-size: contain;

            &:nth-child(2) {
                background: url(./images/image2.png) no-repeat center;
                background-size: contain;
            }

            &:nth-child(3) {
                background: url(./images/image3.png) no-repeat center;
                background-size: contain;
            }

            &:nth-child(4) {
                background: url(./images/image4.png) no-repeat center;
                background-size: contain;
            }

            &:nth-child(5) {
                background: url(./images/image5.png) no-repeat center;
                background-size: contain;
            }

            &:last-child {
                background: url(./images/image6.png) no-repeat center;
                background-size: contain;
            }
        }
    }

    // 动态追踪、态度
    .tracking {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px2rem(5) 0 px2rem(10);
        border-bottom: px2rem(1) solid rgba(224, 224, 224, .35);

        p {
            font-style: normal;
            font-weight: normal;
            font-size: px2rem(12);
            line-height: px2rem(16);

            &.p-left {
                position: relative;
                color: #EB7350;
                padding-left: px2rem(20);

                span {
                    position: absolute;
                    top: px2rem(-2);
                    left: 0;
                    width: px2rem(16);
                    height: px2rem(18);
                    background: url(./images/open-heart.png) no-repeat center;
                    background-size: contain;
                }
            }

            &.p-right {
                color: #9F9F9F;
            }
        }
    }

    .footer {
        display: flex;
        height: px2rem(35);

        div {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-style: normal;
            font-weight: normal;
            font-size: 11px;
            line-height: 15px;
            // text-align: center;
            color: #808080;

            span {
                display: block;
                width: px2rem(10);
                height: px2rem(10);
                background: url(./images/share.png) no-repeat center;
                background-size: contain;
                margin-right: px2rem(5);

                &.comment {
                    background: url(./images/comments.png) no-repeat center;
                    background-size: contain;
                }

                &.support {
                    background: url(./images/support.png) no-repeat center;
                    background-size: contain;
                }
            }
        }
    }

}*/

第二种：
HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <header class="header">
            <div class="left">
                <span class="head-icon"></span>
                <span class="name">程菲丽</span>
                <span class="jing"></span>
            </div>
            <span class="collection"></span>
        </header>
        <main class="main">
            <div class="tag">
                <span class="tag-sign"></span>
                <span class="tag-name">JAVA特训营</span>
            </div>
            <div class="context"><span class="circle">JAVA</span><span class="text">什么是ServletContext，和tomcat等web容器的关系时什么？Servlet 工作原理解析.</span></div>
        </main>
        <footer class="footer">
            <div class="left">
                <span>3小时前</span>
                <span>13回复</span>
            </div>
            <div class="right">
                <span class="icon-support"></span>
                <span class="support-num">23</span>
                <span class="icon-against"></span>
                <span>2</span>
            </div>
        </footer>
    </div>
</body>

</html>

CSS部分：

html {
  font-size: 20px; }

body,
p {
  margin: 0;
  padding: 0;
  background: #c4c4c4; }

.container {
  box-sizing: border-box;
  width: 25rem;
  padding: 1rem;
  padding-bottom: 1.1666666667rem;
  background: #ffffff; }
  .container .header {
    position: relative;
    height: 2.3333333333rem; }
    .container .header .left {
      display: flex;
      align-items: center; }
      .container .header .left .head-icon {
        width: 2.3333333333rem;
        height: 2.3333333333rem;
        border-radius: 50%;
        background: url(./images/head-icon.png) no-repeat center;
        background-size: contain; }
      .container .header .left .name {
        margin: 0 0.6666666667rem;
        font-style: normal;
        font-weight: normal;
        font-size: 1.0666666667rem;
        line-height: 1.5rem;
        color: #333333; }
      .container .header .left .jing {
        width: 1rem;
        height: 1rem;
        background: url(./images/jing.png) no-repeat center;
        background-size: contain; }
    .container .header .collection {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 1.2666666667rem;
      height: 1.2666666667rem;
      background: url(./images/collection.png) no-repeat center;
      background-size: contain; }
  .container .main {
    margin-bottom: 0.9rem;
    padding-top: 0.6666666667rem; }
    .container .main .tag {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 6.9666666667rem;
      height: 1.6rem;
      border-radius: 0.8rem;
      background: #F5F5F5; }
      .container .main .tag .tag-sign {
        width: 0.9333333333rem;
        height: 1.2rem;
        margin-right: 0.3333333333rem;
        background: url(./images/jinhao.png) no-repeat center;
        background-size: contain; }
      .container .main .tag .tag-name {
        font-style: normal;
        font-weight: 500;
        font-size: 0.8666666667rem;
        line-height: 1.2rem;
        text-align: right;
        color: #3492FD; }
    .container .main .context {
      margin-top: 0.6666666667rem; }
      .container .main .context .circle {
        display: inline-block;
        width: 3.3333333333rem;
        margin-right: 0.6666666667rem;
        border-radius: 0.6333333333rem;
        background: #FF7C4A;
        text-align: center;
        font-style: normal;
        font-weight: normal;
        font-size: 0.8666666667rem;
        line-height: 1.2666666667rem;
        color: #FFFFFF;
        vertical-align: text-top; }
      .container .main .context .text {
        font-style: normal;
        font-weight: 500;
        font-size: 1.1333333333rem;
        line-height: 1.6rem;
        color: #333333; }
  .container .footer {
    display: flex;
    justify-content: space-between;
    height: 1.3333333333rem; }
    .container .footer .left span {
      font-weight: 300;
      font-size: 0.9333333333rem;
      line-height: 1.3rem;
      color: #818181; }
      .container .footer .left span:first-child {
        margin-right: 2rem; }
    .container .footer .right {
      display: flex;
      align-items: center;
      font-style: normal;
      font-weight: normal;
      font-size: 0.9333333333rem;
      line-height: 1.3rem;
      color: #818181; }
      .container .footer .right .icon-support {
        width: 1.2666666667rem;
        height: 1.2666666667rem;
        margin-right: 0.3333333333rem;
        background: url(./images/good.png) no-repeat center;
        background-size: contain; }
      .container .footer .right .support-num {
        margin-right: 0.6666666667rem; }
      .container .footer .right .icon-against {
        width: 1.2666666667rem;
        height: 1.2666666667rem;
        margin-right: 0.3333333333rem;
        background: url(./images/bad.png) no-repeat center;
        background-size: contain; }

/*scss代码如下：*/
/*html {
    font-size: 20px;
}

body,
p {
    margin: 0;
    padding: 0;
    // 为了凸显出container，给body添加一个背景色，后面会去除
    background: #c4c4c4;
}

@function px2rem($px) {
    $rem: $px / 30;
    @return #{$rem}rem;
}

.container {
    box-sizing: border-box;
    width: px2rem(750);
    padding: px2rem(30);
    padding-bottom: px2rem(35);
    background: #ffffff;

    .header {
        position: relative;
        height: px2rem(70);

        .left {
            display: flex;
            align-items: center;

            .head-icon {
                width: px2rem(70);
                height: px2rem(70);
                border-radius: 50%;
                background: url(./images/head-icon.png) no-repeat center;
                background-size: contain;
            }

            .name {
                margin: 0 px2rem(20);
                font-style: normal;
                font-weight: normal;
                font-size: px2rem(32);
                line-height: px2rem(45);
                color: #333333;
            }

            .jing {
                width: px2rem(30);
                height: px2rem(30);
                background: url(./images/jing.png) no-repeat center;
                background-size: contain;
            }

        }

        .collection {
            position: absolute;
            top: 0px;
            right: 0px;
            width: px2rem(38);
            height: px2rem(38);
            background: url(./images/collection.png) no-repeat center;
            background-size: contain;
        }
    }

    .main {
        // height: px2rem(230);
        margin-bottom: px2rem(27);
        padding-top: px2rem(20);

        .tag {
            display: flex;
            justify-content: center;
            align-items: center;
            width: px2rem(209);
            height: px2rem(48);
            border-radius: px2rem(24);
            background: #F5F5F5;

            .tag-sign {
                width: px2rem(28);
                height: px2rem(36);
                margin-right: px2rem(10);
                background: url(./images/jinhao.png) no-repeat center;
                background-size: contain;
            }

            .tag-name {
                font-style: normal;
                font-weight: 500;
                font-size: px2rem(26);
                line-height: px2rem(36);
                text-align: right;
                color: #3492FD;
            }
        }

        .context {
            margin-top: px2rem(20);

            .circle {
                display: inline-block;
                width: px2rem(100);
                margin-right: px2rem(20);
                border-radius: px2rem(19);
                background: #FF7C4A;
                text-align: center;
                font-style: normal;
                font-weight: normal;
                font-size: px2rem(26);
                line-height: px2rem(38);
                color: #FFFFFF;
                vertical-align: text-top;
            }

            .text {
                font-style: normal;
                font-weight: 500;
                font-size: px2rem(34);
                line-height: px2rem(48);
                color: #333333;
            }
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;
        height: px2rem(40);

        .left {
            span {
                font-weight: 300;
                font-size: px2rem(28);
                line-height: px2rem(39);
                color: #818181;

                &:first-child {
                    margin-right: px2rem(60);
                }
            }
        }

        .right {
            display: flex;
            align-items: center;
            font-style: normal;
            font-weight: normal;
            font-size: px2rem(28);
            line-height: px2rem(39);
            color: #818181;


            .icon-support {
                width: px2rem(38);
                height: px2rem(38);
                margin-right: px2rem(10);
                background: url(./images/good.png) no-repeat center;
                background-size: contain;
            }

            .support-num {
                margin-right: px2rem(20);
            }

            .icon-against {
                width: px2rem(38);
                height: px2rem(38);
                margin-right: px2rem(10);
                background: url(./images/bad.png) no-repeat center;
                background-size: contain;
            }

        }
    }

}*/

jasmyn518

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web实现：消息卡片开发实例

图片都在本地没有上传，使用代码时可以适当修改。第一种：HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>代码演示</title> <link rel="stylesheet" href="index.css"></head><body> <div
复制链接

扫一扫