剛入門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運營商 -->
中國移動 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>
待解決問題
- 信號圖標、鬧鐘、電量以及回覆都是盜用截圖裏的，需要找素材
- 語音、小程序、圖片、視頻
- 等等等等