微信聊天页面前端模拟

最新推荐文章于 2024-07-09 03:57:35 发布

kzf_studyhard

最新推荐文章于 2024-07-09 03:57:35 发布

阅读量333

点赞数 7

分类专栏： web前端文章标签：微信前端 html5 css

本文链接：https://blog.csdn.net/kzf_studyhard/article/details/138003931

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

话不多说，直接上代码。

以下是html部分：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WeChat</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <!--总体-->
    <div class="wechat">
        <!--头部-->
        <div class="header">
            微信
            <img src="tupian/微信搜索.png" height="18" width="18" class = "searching">
            <img src="tupian/微信添加.png" height="18" width="18" class = "adding">
        </div>
        <!--头部-->
        <!--内容-->
        <div class="content">
            <!--置顶-->
            <div class="topper">
                <img src="微信头像/微信图片_20240325122252.jpg" height="43.8" width="43.8" class="avatar">
                <sapn class="name">(*^▽^*)</sapn>
                <span class="timestamp">20:30 </span>
            <div>
                <span class="chat_text">你在干嘛呀?</span>
            <!--置顶-->
            <div class="friends">
                <img src="微信头像/微信图片_20240325122339.jpg" height="687" width="687" class = avatar>
                <sapn class="name">阿哲</sapn>
                <span class="timestamp">19:42 </span>
            <div>
                <span class="chat_text">有无LOL?</span>
            <div class="friends">
                <img src="微信头像/微信图片_20240325122356.jpg" height="687" width="687" class = avatar>
                <sapn class="name">黄谟富</sapn>
                <span class="timestamp">11:10 </span>
            <div>
                <span class="chat_text">我套死你</span>
            <div class="friends">
                <img src="微信头像/微信图片_20240325122415.jpg" height="687" width="687" class = avatar>
                <sapn class="name">于凡</sapn>
                <span class="timestamp">10:10 </span>
            <div>
                <span class="chat_text">我真服了</span>
            <div class="friends">
                <img src="微信头像/微信图片_20240325122428.jpg" height="687" width="687" class = avatar>
                <sapn class="name">魏红霞</sapn>
                <span class="timestamp">8:30 </span>
            <div>
                <span class="chat_text">[视频通话]</span>
            <div class="friends">
                <img src="微信头像/微信图片_20240325122521.jpg" height="687" width="687" class = avatar>
                <sapn class="name">姐姐</sapn>
                <span class="timestamp">昨天 </span>
            <div>
                <span class="chat_text">好嘟,嘻嘻</span>
            <div class="friends">
                <img src="微信头像/微信图片_20240325122538.jpg" height="687" width="687" class = avatar>
                <sapn class="name">傻逼</sapn>
                <span class="timestamp">3月22日 </span>
            <div>
                <span class="chat_text">[图片]</span>
            <div class="friends">
                <img src="tupian/4524ccd24829c67021134cbdd01ca199.jpg" height="687" width="687" class = avatar>
                <sapn class="name">中国建设银行</sapn>
                <span class="timestamp">3月22日 </span>
            <div>
                <span class="chat_text">交易提醒</span>
            <div class="friends">
                <img src="tupian/b79f22d223f024dc1865a33141e1c3cb.jpg" height="687" width="687" class = avatar>
                <sapn class="name">微信支付</sapn>
                <span class="timestamp">3月21日 </span>
            <div>
                <span class="chat_text">支付凭证</span>
        </div>
        <!--内容-->
        <!--底部-->
        <div class="footer">
            <ul>
                <li>
                    <img src="tupian/微信-聊天.png" height="19" width="19">
                    <div>微信</div>
                </li>
                <li>
                    <img src="tupian/微信通讯录 (1).png" height="19" width="19"/>
                    <div>通讯录</div>
                </li>
                <li>
                    <img src="tupian/指南针.png" height="19" width="19"/>
                    <div>发现</div>
                </li>
                <li>
                    <img src="tupian/我.png" height="19" width="19"/>
                    <div>我</div>
                </li>
            </ul>
        </div>
        <!--底部-->
    <!--总体-->
    <div>
</body>
</html>

下面是css样式部分：

/*总体*/
.wechat{
    height: 680px;
    width: 360px;
    margin:auto ;
    border:1px solid #e9e9e9 ;
    
}
/*总体*/
/*头部*/
.header{
    font-size: 18px;
    position: sticky;
    top:0;
    height: 81.6px;
    text-align: center;
    line-height: 81.6px;
    background: #ededed;
    border:1px solid #e9e9e9;
}
.searching{
    position: absolute;
    right: 50.4px;
    top: 30.5px;
}
.adding{
    position: absolute;
    right: 12.6px;
    top: 30.5px;
}
/*头部*/
/*内容*/
.content{
    position: fixed;
    top:81.6px;
    bottom: 65px;
    height: 609.6px;
    width: 360px;
}
.topper{
    position: relative;
    height: 64.8px;
    background: #ffffff;
    border-bottom: 1px solid #e9e9e9;
}
.timestamp {
    position: absolute;
    top: 20px;
    right: 10px;
    font-size: 12px; /* Adjust font size as needed */
    color: #999; /* Adjust color as needed */
}
.friends{
    position: relative;
    height: 64.8px;
    background: #ffffff;
    border-bottom: 1px solid #e9e9e9;
}
img.avatar{
    height: 43.2px;
    width:43.2px;
}
.avatar{
    position: relative;
    height: 64.8px;
    width:64.8px;
    left:10.8px;
    top:10.8px;
}
.name{
    position: relative;
    font-size: 18px;
    left: 15px;
    bottom: 12px;
}
.chat_text{
    position: relative;
    font-size: 12px;
    color: #a1a1a1;
    left: 64.8px;
    bottom: 13px;
}
/*内容*/
/*底部*/
.footer{
    position: sticky;
    top: 700px;
    height: 200px;
    background: #f7f7f7;
    border:1px solid #e9e9e9;
}
li{
    position: relative;
    width: 75px;
    list-style: none;
    float: left;
    font-size: 10px;
    text-align: center;
    left: -10px;
    bottom: 10px;
}

/*底部*/