一个简单的前端静态聊天界面,实现了聊天的基本功能,目前后台还没做,接下来还会继续更新后台和完善前台样式并更新。
一.Html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chat</title>
<link rel="stylesheet" href="../css/chat.css" type="text/css">
<script type="text/javascript" src="../js/chat.js"></script>
</head>
<body>
<div class="all">
<div class="chat_index">
<!--banner-->
<div class="chat_banner">
</div>
<div class="chat_body">
<!--在线列表-->
<div class="chat_online">
<!--搜索-->
<div class="search_online">
<form>
<input type="text" placeholder="搜索联系人">
</form>
</div>
<div class="online_friend">
<ul>
<li>
<div class="a_friend">
<div class="head_portrait">
<div class="head_text">
黄
</div>
</div>
<div class="friend">
<div class="name">天狼星</div>
<div class="this_time">4-12-15:10</div>
</div>
</div>
</li>
<li>
<div class="a_friend">
<div class="head_portrait">