用html、css实现网页聊天页面

最近应届找工作好难，聊了一个公司，老板说自研项目，前端功能完善，我只需要做后端的就行。第二天技术人员面试让我写个纯html、css聊天界面，虽然楼主不是主要写前端的，奈何工作难找，硬着头皮上了。最后在B站找了个类似的项目，融合了自己的想法，凑合凑合写了一下。

页面效果如下：

铁子们，话不多说，咱们直接上代码！！！

Chat.html

<html><head><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>聊天</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="container"><div class="leftSide"><!--header--><div class="header"><div class="userimg"><img src="user.jpg" class="cover"></div><ul class="nav_icons"><li><img src="消息.png"></li><li><img src="更多.png"></li></ul></div><!--search--><div class="search_chat"><div><input type="text" placeholder="搜索..."><img src="搜索.png"></div></div><!--ChatList--><div class="chatlist"><div class="block active"><div class="imgbx"><img src="img1.jpg" class="cover"></div><div class="details"><div class="listHead"><h4>开心果</h4><p class="time">14:25</p></div><div class="message_p"><p>什么时候出去玩？</p></div></div></div></div><div class="chatlist"><div class="block unread"><div class="imgbx"><img src="img2.jpg" class="cover"></div><div class="details"><div class="listHead"><h4>板栗</h4><p class="time">15:10</p></div><div class="message_p"><p>天气太热了</p><b>1</b></div></div></div></div><div class="chatlist"><div class="block"><div class="imgbx"><img src="img3.jpg" class="cover"></div><div class="details"><div class="listHead"><h4>腰果</h4><p class="time">11:15</p></div><div class="message_p"><p>有点饿</p></div></div></div></div></div><div class="rightSide"><div class="header"><div class="imgText"><div class="userimg"><img src="img1.jpg" class="cover"></div><h4>开心果<br><span>在线</span></h4></div><ul class="nav_icons"><li><img src="消息.png"></li><li><img src="更多.png"></li></ul></div><!--chatbox--><div class="chatBox"><div class="message my_message"><p>你在干嘛呢？<br><span>10:15</span> </p></div><div class="message frnd_message"><p>在写作业<br><span>10:15</span> </p></div><div class="message frnd_message"><p>天气太热了天气太热了天气太热了天气太热了天气太热了天气太热了天气太热了天气太热了天气太热了天气太热了天气太热了天气太热了<br><span>10:15 </span> </p></div><div class="message my_message"><p>对啊 也不下雨<br><span>10:15</span> </p></div><div class="message my_message"><p>希望以后凉快点<br><span>10:15</span> </p></div>  </div><!--chat input--><div class="chatbox_input"><div class="instrument"><img src="表情.png" ><img src="语音.png"></div><div><input type="text"></div></div></div></div></body>
</html>

style.css

@import url('https://fonts.googleapis.com css2?family-Open+Sans:wght@300;400;00;600;700&display=swap');
*
{margin: 0;padding: 0;box-sizing: border-box;font-family: 'Open Sans' ,sans-serif;
}
body
{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(#009688 0%,#009688 130px,#d9dbd5 130px,#d9dbd5 100%)
}
.container
{position: relative;width: 1396px;max-width: 100%;height: calc( 100vh - 40px);background:#fff;box-shadow: 0 1px 1px 0 rgba(0,0,0,0.06),0 2px 5px 0 rgba(0,0,0,0.06);display: flex;
}
.container .leftSide
{position: relative;flex:30%;background:#fff;border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.container .rightside
{position: relative;flex: 70%;background:#e5ddd5;
}
.container .rightside::before
{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background:url(img6-bg.jpg) ;opacity: 0.06;
}
.header
{position: relative;width: 100%;height: 60px;background: #ededed;display: flex;justify-content: space-between;align-items: center;padding: 0 15px;
}
.userimg
{position: relative;width: 40px;height: 40px;overflow: hidden;border-radius: 50%;cursor: pointer;
}
.cover
{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;
}
.nav_icons
{display: flex;
}
.nav_icons li
{display: flex;list-style: none;cursor: pointer;color: #51585c;font-size: 1.5em;margin-left: 22px;
}
.search_chat
{position: relative;width: 100%;height: 50px;background: #f6f6f6;display: flex;justify-content: center;align-items: center;padding: 0 15px;
}
.search_chat div
{width: 100%;
}
.search_chat div input
{width:100%;outline: none;border: none;background: #fff;padding: 6px;height: 38px;border-radius: 30px;font-size: 14px;padding-left: 40px;
}
.search_chat div input::placeholder
{color: #bbb;
}
.search_chat div img
{position: absolute;left: 30px;top: 14px;font-size: 1.5em;
}
.chatlist
{position: relative;height: calc(100%-110px);overflow-y: auto;
}
.chatlist .block
{position: relative;width: 100%;display: flex;align-items: center;padding: 15px;border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.chatlist .block.active{background: #ebebeb;
}
.chatlist .block:hover
{background:#f5f5f5;
}
.chatlist .block .imgbx
{position: relative;min-width: 45px;height: 45px;overflow: hidden;border-radius: 50%;margin-right: 10px;
}
.chatlist .block .details
{position: relative;width: 100%;
}
.chatlist .block .details .listHead
{display: flex;justify-content: space-between;margin-bottom: 5px;
}
.chatlist .block .details .listHead h4
{font-size: 1.1em;font-weight: 600;color: #111;
}
.chatlist .block .details .listHead .time
{font-size: 0.75em;color: #aaa;
}
.chatlist .block .details .listHead .time
{color: #111;
}.message_p
{display: flex;justify-content: space-between;align-items: center;
}
.message_p p
{color: #aaa;display: -webkit-box;-webkit-line-break: 1;font-size: 0.9em;overflow: hidden;text-overflow: ellipsis;
}
.message_p b
{background-color: red;color: #fff;min-width: 20px;height: 20px;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 0.75em;
}
.imgText
{position: relative;display: flex;justify-content: center;align-items: center;
}
.imgText h4
{font-weight: 500;line-height: 1.2em;margin-left: 15px;
}
.imgText h4 span
{font-size: 0.8em;color: #555;
}
.chatBox
{position: relative;width: 100%;height: calc(100%-120px);padding: 50px;overflow-y: auto;
}
.message
{position: relative;display: flex;width: 100%;margin: 5px 0;
}
.message p
{position: relative;right: 0;text-align: right;max-width: 65%;padding: 12px;background: #dcf8c6;border-radius: 10px;font-size: 0.9em;
}
.message p::before
{content: '';position: absolute;top: 0;right: -12px;width: 20px;height: 20px;background: linear-gradient(135deg,#dcf8c6 0%,#dcf8c6 50%,transparent 50%,transparent);
}
.message p span
{display: block;margin-top: 5px;font-size: 0.85em;opacity: 0.5;
}
.my_message
{justify-content: flex-end;
}
.frnd_message
{justify-content: flex-start;
}
.frnd_message p
{background: #fff;text-align: left;
}
.message.frnd_message p::before
{content: '';position: absolute;top: 0;left: -12px;width: 20px;height: 20px;background: linear-gradient(225deg,#fff 0%,#fff 50%,transparent 50%,transparent);
}
.chatbox_input
{position: relative;width: 100%;height: 150px;background: #f0f0f0;padding: 15px;justify-content: space-between;align-items: center;
}
.chatbox_input input
{position: relative;width: 90%;margin: 0 20px;padding: 10px 20px;border: none;outline: none;border-radius: 30px;font-size: 1em;
}

里面的一些小图标（icon）是在 https://www.iconfont.cn/ 这个网站里面下载的，感觉里面的图标很多，所以推荐给大家。

感谢阅读，共同进步。

用html、css实现网页聊天页面相关推荐

html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
精通CSS.DIV网页样式与布局（四） ——页面背景
咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,他直接决定了整个网页的风格和色调.我们这回主要来学习如何用CSS来设置背景颜色.背景图片. 背景颜色:CSS设置背景颜 ...
精通CSS+DIV网页样式与布局--页面背景
上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...
web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个人. 美食. 公司 ...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课 ...
web课程设计网页规划与设计—— 中西餐美食餐饮网站(10页面) html+css+javascript网页设计实例...
web课程设计网页规划与设计-- 中西餐美食餐饮网站HTML(10页面) html+css+javascript网页设计实例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HT ...
HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
DIV布局艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个 ...
HTML5期末大作业：艺术品商城网站设计——艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有个 ...

用html、css实现网页聊天页面

用html、css实现网页聊天页面相关推荐

最新文章

热门文章