纯HTML+CSS实战之仿微信聊天界面制作
在本文中，我们将详细描述如何使用 HTML 和 CSS 来创建一个类似于微信聊天界面的界面。这个项目主要运用了之前实战项目中的三角形制作和 `before` 及 `after`伪类选择器知识。
效果图
首先，让我们来看一下效果图：
微信号
- 你好
- 我也好
- 哈哈
- 你好
- 我也好
- 哈哈
```
CSS代码
下面是 CSS代码：
```css/* 基础样式 */
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: f0f0f0;
}
/* 头像区域 */
.header {
position: relative;
width:100%;
height:60px;
background-color: fff;
padding:10px;
box-shadow:02px4px rgba(0,0,0,0.1);
}
.avatar {
position: absolute;
top:50%;
left:20px;
transform: translateY(-50%);
width:30px;
height:30px;
border-radius:50%;
background-color: ccc;
}
.username {
position: absolute;
top:50%;
right:20px;
transform: translateY(-50%);
font-size:16px;
color: 333;
}
/* 聊天记录区域 */
.chat-record {
width:100%;
height: calc(100vh -60px);
background-color: fff;
padding:10px;
box-shadow:02px4px rgba(0,0,0,0.1);
}
.left-chat,
.right-chat {
width:50%;
height: calc(100% -20px);
background-color: f7f7f7;
padding:10px;
box-shadow:02px4px rgba(0,0,0,0.1);
}
.left-chat {
float: left;
}
.right-chat {
float: right;
}
ul {
list-style: none;
margin:0;
padding:0;
}
li {
padding:10px;
border-bottom:1px solid ccc;
}
/* 输入区域 */
.input-area {
width:100%;
height:60px;
background-color: fff;
padding:10px;
box-shadow:02px4px rgba(0,0,0,0.1);
}
input {
width: calc(100% -80px);
height:30px;
padding:10px;
font-size:16px;
border: none;
border-radius:5px;
box-shadow: inset02px4px rgba(0,0,0,0.1);
}
send-btn {
width:80px;
height:30px;
background-color: 4CAF50;
color: fff;
border: none;
border-radius:5px;
cursor: pointer;
}
```
JavaScript代码
下面是 JavaScript代码：
```javascript// 获取输入框和发送按钮的元素const input = document.getElementById('input');
const sendBtn = document.getElementById('send-btn');
// 给发送按钮添加点击事件监听器sendBtn.addEventListener('click', () => {
// 获取输入框中的值 const value = input.value.trim();
// 如果输入框中有值，才发送消息 if (value) {
// 创建一个新的聊天记录项 const chatItem = document.createElement('li');
chatItem.textContent = `你:${value}`;
// 将新创建的聊天记录项添加到右边的聊天记录列表中 document.querySelector('.right-chat ul').appendChild(chatItem);
// 清空输入框中的值 input.value = '';
}
});
```
总结
在本文中，我们详细描述了如何使用 HTML 和 CSS 来创建一个类似于微信聊天界面的界面。这个项目主要运用了之前实战项目中的三角形制作和 `before` 及 `after`伪类选择器知识。我们还添加了一些 JavaScript代码来实现发送消息的功能。
希望通过阅读本文，你能够更好地理解 HTML、CSS 和 JavaScript 的使用方法，并且能够创建出更加美观和实用的界面。
