【记录生活】简单实现“今日头条”我的消息界面

简单实现“今日头条”我的消息界面，示例图、代码展示如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <title>我的消息 - 趣味笔记</title>
        <style>
            html,
            body {
                height: 100%;
                background-color: #fff;
            }
            
            .title {
                height: 43px;
                line-height: 43px;
                width: 100%;
                text-align: center;
                font-size: 16px;
                color: #222;
                background-color: #fefefe;
                border-bottom: 1px solid #d8d8d8;
                box-sizing: border-box;
                position: relative;
            }
            
            .title .arrow {
                width: 43px;
                height: 43px;
                position: absolute;
                left: 0;
                bottom: 0;
                background-image: url(../image/pic22.png);
                background-repeat: no-repeat;
                background-size: 11px 19px;
                background-position: center center;
            }
            
            .cnt {
                box-sizing: border-box;
                padding-left: 46px;
                background-image: url(../image/my/head.png);
                background-repeat: no-repeat;
                background-size: 29px 29px;
                background-position: 9px 13px;
                border-bottom: 1px solid #eee;
                position: relative;
            }
            
            .name {
                font-size: 13px;
                color: #898989;
                line-height: 22px;
                padding-top: 8px;
            }
            
            .time {
                font-size: 8px;
                color: #919191;
                line-height: 13px
            }
            
            .praise {
                height: 28px;
                background-image: url(../image/my/praise.png);
                background-repeat: no-repeat;
                background-size: 14px 14px;
                background-position: left center;
            }
            
            .text {
                width: 74px;
                position: absolute;
                top: 8px;
                right: 10px;
                font-size: 9px;
                color: #ababab;
                line-height: 12px;
                text-align: left;
            }
        </style>
    </head>

    <body>
        <div class="title">
            <div class="arrow"></div>我的消息</div>
        <div class="cnt">
            <div class="name">苏晴</div>
            <div class="time">02-27 17:22</div>
            <div class="praise"></div>
            <div class="text">最近怎么样呢？小小
         </div>
        </div>
    </body>

    <script type="text/javascript">
        apiready = function() {
        };
    </script>

</html>
xiaoquanbiji
发布了32 篇原创文章 · 获赞 40 · 访问量 5971
私信关注
【记录生活】简单实现“今日头条”我的消息界面

猜你喜欢
