微信聊天框以其简洁直观的界面和流畅的交互体验而广受欢迎。本文将展示如何利用HTML和CSS技术，在自己的网页上实现类似微信的聊天框效果。我们将一步步指导您完成，让网站或应用也能拥有专业且用户友好的聊天功能。
1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="twxt/css" href="code6_29.css">
</head>
<body>
<div class="box">
<div class="leftBox">
<img src="./1.png" width="40" height="40" />
<div class="left">
你好啊
</div>
</div>
<div class="rightBox" style="justify-content: flex-end;">
<div class="right">你好~~</div>
<img src="./2.png" width="40" height="40" />
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
2.css
.box {
width: 300px;
padding: 30px;
;
margin: 100px auto;
background-color: #f5f5f5;
}
.left,
.right {
width: 80px;
height: 40px;
border-radius: 5px;
background-color: #95ec69;
position: relative;
margin: 10px 0;
line-height: 40px;
}
.leftBox,
.rightBox {
display: flex;
flex-direction: row;
align-items: center;
img {
border-radius: 50%;
}
}
.left {
margin-left: 20px;
padding-left: 5px;
}
.right {
float: right;
margin-right: 20px;
padding-left: 5px;
}
.left::before {
content: "";
width: 0;
height: 0;
position: absolute;
/* 边框宽度为5px 颜色透明(也就是隐藏) */
border: 5px solid transparent;
/* 箭头向左 则右边框显示 */
border-right-color: #95ec69;
/* 在div左边展示 偏移量为 边框宽度*2 即5*2px */
left: -10px;
/*垂直居中计算*/
/*如果有高度 则(父元素高度 - 子元素高度 )/2 */
/*如果是边框 则(父元素高度 - 边框宽度*2 )/2 */
/* (40-5*2)/2=15 */
top: 15px;
}
.right::before {
content: "";
width: 0;
height: 0;
position: absolute;
/* 边框宽度为5px 颜色透明(也就是隐藏) */
border: 5px solid transparent;
/* 箭头向右 则左边框显示 */
border-left-color: #95ec69;
/* 在div右边展示 偏移量为 边框宽度*2 即5*2px */
right: -10px;
/*垂直居中计算*/
/*如果有高度 则(父元素高度 - 子元素高度 )/2 */
/*如果是边框 则(父元素高度 - 边框宽度*2 )/2 */
/* (40-5*2)/2=15 */
top: 15px;
}
1070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
