[前端] html入门练手——微信对话框

最新推荐文章于 2024-06-15 21:29:25 发布

土肆

最新推荐文章于 2024-06-15 21:29:25 发布

阅读量2.6k

点赞数 5

分类专栏： # 2019 学习笔记

本文链接：https://blog.csdn.net/sinat_18665801/article/details/103055555

版权

学习笔记同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

2019

6 篇文章 0 订阅

订阅专栏

html入门练手——微信对话框

效果图
css部分
html部分
待解决问题

刚入门html，学到了元素的动态布局，就试试看，写得很死很烦，慢慢来吧。

效果图

在这里插入图片描述

css部分

气泡框部分参考CSS实现微信对话框。

    <style>
      .fake {
        background-color: rgb(236, 236, 236);
      }
      .phonehead {
        background-color: rgb(236, 236, 236);
        height: 5%;
        width: 100%;
        font-size: 13px;
        font-weight: 800;
        overflow: auto;
        padding: 5px 0;
      }
      .line1 {
        width: 33%;
        float: left;
      }
      .chathead {
        background-color: rgb(236, 236, 236);
        height: 13%;
        width: 100%;
        font-size: 18px;
        font-weight: 800;
        overflow: auto;
        padding: 3px 0 3px 0;
      }
      .chat {
        background-color: rgb(236, 236, 236);
        height: 577px;
        border-top: 1px solid rgb(214, 214, 214);
        border-bottom: 1px solid rgb(214, 214, 214);
        padding: 5px 0 0 0;
      }
      .avatar1 {
        padding: 0 10px;
        float: left;
      }
      .avatar1 img {
        height: 45px;
        border-radius: 4px;
      }
      .avatar2 {
        padding: 0 10px;
        float: left;
      }
      .avatar2 img {
        height: 45px;
        border-radius: 4px;
      }
      .dialog1 {
        /* 左边儿的对话框 */
        margin: 5px 3px;
        float: left;
        clear: both;
      }
      .dialog2 {
        /* 右边儿的对话框 */
        margin: 5px 3px;
        float: right;
        clear: both;
      }
      .word1 {
        /* ref: https://blog.csdn.net/weixin_30379911/article/details/99922923 */
        left: 3px;
        min-width: 20px;
        max-width: 240px;
        background: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-size: 18px;
        color: black;
        word-break: break-word;
        position: relative;
        padding: 10px 14px;
        float: left;
      }
      .word1::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        left: -12px;
        top: 15px;
        border: 6px solid;
        border-color: transparent white transparent transparent;
      }
      .word2 {
        right: 3px;
        min-width: 20px;
        max-width: 240px;
        background: rgb(150 237 107);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-size: 18px;
        color: black;
        word-break: break-word;
        position: relative;
        padding: 10px 14px;
        float: left;
      }
      .word2::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        right: -12px;
        top: 12px;
        border: 6px solid;
        border-color: transparent transparent transparent rgb(150 237 107);
      }
      .reply {
        height: 58px;
        background-color: rgb(245 245 245);
      }
    </style>

html部分

  <body>
    <div class="fake" style="float: left; width:400px">
      <!-- 造假部分 -->
      <div class="phonehead">
        <!-- 手机自带头部 -->
        <div class="line1" style="text-align: left;">
          <!-- 1.1信号 -->
          <div style="height: 100%; float: left; padding: 2px ; margin: 0 2px;">
            <img src="img/信号.png" height="14px" />
          </div>
          <!-- 1.2运营商 -->
          中国移动&nbsp;&nbsp;4G
        </div>
        <div class="line1" style="text-align: center;">
          <!-- 2.时间 -->
          16:04
        </div>
        <div class="line1" style="text-align: right;">
          <!-- 3.电量 -->
          <div
            style="height: 100%; float: right; padding: 2px 0; margin: 0 2px;"
          >
            <img src="img/电量.png" height="14px" />
          </div>
        </div>
      </div>
      <div class="chathead">
        <!-- 对话框头部 -->
        <div class="line1" style="text-align: left;">
          <div
            style="height: 100%; float: left; padding: 2px ; margin: 0 15px;"
          >
            <img src="img/arrow.png" height="21px" />
          </div>
        </div>
        <div class="line1" style="text-align: center;">
          A同学
        </div>
        <div
          class="line1"
          style="text-align: right; margin-right:4px; width:30%;"
        >
          ···
        </div>
      </div>
      <div class="chat">
        <!-- 对话内容 -->
        <div class="dialog1">
          <div class="avatar1"><img src="img/a.jpg" /></div>
          <div class="word1">
            啊啊啊啊啊啊啊啊
          </div>
        </div>
        <div class="dialog2">
          <div class="word2">
            啦啦啦啦啦啦
          </div>
          <div class="avatar2"><img src="img/B.jpg" /></div>
        </div>
        <div class="dialog1">
          <div class="avatar1"><img src="img/a.jpg" /></div>
          <div class="word1">
            嘻嘻嘻嘻嘻嘻嘻嘻
          </div>
        </div>
        <div class="dialog2">
          <div class="word2">
            略略略略略
          </div>
          <div class="avatar2"><img src="img/B.jpg" /></div>
        </div>
        <div class="dialog2">
          <div class="word2">
            呼呼呼呼呼呼
          </div>
          <div class="avatar2"><img src="img/B.jpg" /></div>
        </div>
      </div>
      <div class="reply">
        <!-- 回复内容 -->
        <div>
          <img src="img/reply.png" width="400px" />
        </div>
      </div>
    </div>
  </body>

待解决问题

信号图标、闹钟、电量以及回复都是盗用截图里的，需要找素材
语音、小程序、图片、视频
等等等等

土肆

关注

5
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
[前端] html入门练手——微信对话框

html入门练手——微信对话框效果图css部分html部分存在问题效果图css部分 <style> .fake { background-color: rgb(236, 236, 236); } .phonehead { background-color: rgb(236, 236, 236); ...
复制链接

扫一扫

专栏目录