聊天室之主界面

已于 2022-04-05 16:15:21 修改
阅读量9.2k 收藏 13
点赞数 3
分类专栏： 网页开发学习 文章标签： css bootstrap html vscode web
于 2021-12-15 17:59:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46555054/article/details/121957976
版权

聊天室之主界面

文章目录

一. 环境：

开发工具：Vscode
前端技术栈：HTML+CSS+Bootstrap

二、代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室主界面</title>
     <!-- 引用Bootstrap -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" 
     integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" 
         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
     <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" 
     integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
</head>
<style>
    * {
   
        margin: 0;
        padding: 0;
    }

    html,body {
   
            width: 100%;
            height: 100%;
        }

    body {
   
            background-image: url("背景.png");
            background-position: center 0;
            /* 不拉伸图片 */
            /* background-repeat: no-repeat; */
           
           
        }
    
    .home-container {
   
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .home-container header {
   
        width: 100%;
        height: 15%;
        background-color:  rgb(96, 152, 202);
    }

    .home-container main {
   
        width: 100%;
        height: 85%;
    }

    .home-container main .menu {
   
        width: 10%;
        height: 100%;
        /* background-color: #2f6fa7; */
        box-shadow: 2px 2px 4px #000, 0px -2px 4px #000;
        float: left;
    }

    .home-container main .tabs1 {
   
        width: 90%;
        height: 100%;
        box-shadow: 2px 2px 4px #000, 0px -2px 4px #000;
        float: left;<
最低0.47元/天 解锁文章
陌小柠
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
基于bootstrap的聊天页面设计
12-25
很实用的模板工具，基于bootstrap响应式界面设计 很实用的模板工具，基于bootstrap响应式界面设计
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例（超详细必看 附源码）
showswoller的博客
12-07 2488
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例（超详细必看 附源码）
推荐开源项目：Bootstrap3-Dialog——让Bootstrap模态框更易用
最新发布
gitblog_00099的博客
05-10 256
推荐开源项目：Bootstrap3-Dialog——让Bootstrap模态框更易用 项目地址:https://gitcode.com/nakupanda/bootstrap3-dialog 在Web开发中，Bootstrap的模态框（Modal）是常用的一种交互元素，但有时它的灵活性和定制性可能略显不足。为此，我们向您推荐一个强大的扩展库——Bootstrap3-Dialog，它将Bootstr...
基于Sanic（Python）和ChatGPT的超级简易聊天应用
fengtaokelly的博客
05-05 842
本项目是一个简易的聊天应用，基于Sanic Web框架搭建后端，使用Bootstrap 3和JavaScript搭建前端，通过调用ChatGPT API实现智能对话。项目包含一个简单的Token认证，以及一些页面的简单美化处理。 非常之简易，只有150行左右的代码（还包括很多空行）。前提是你得有openai的api_key，而且不建议在墙内搭建。
bootstrap消息对话框插件
ICode联盟
07-21 772
bootstrap消息对话框插件是，jQuery+bootstrap.js封装的消息对话框插件。
bootstrap聊天界面模板,基于bootstrap响应式聊天软件,Html页面,可以用于个人聊天软件
03-06
非常漂亮!!! 基于bootstrap响应式聊天软件Html页面 页面非常漂亮,可以用于制作个人聊天软件
Bootstrap 模态对话框
海涛高软
03-22 1837
最后运行的画面如下： 最后总结：modal-dialog 以对话框形式打开 modal-content： 对话框以白色背景显示 class="close" 关闭叉按钮在右上角显示 data-dismiss="modal" 关闭模态对话框 modal-body 模态对话框四周添加一
基于Android的聊天室应用 ChatRoom 1.4
10-26
注意：之前上传的同类资源1.0、1.1、1.2、1.3版本有一些小问题，现在上传修改后的最新版本，各位请注意下载最新版的，主界面的ip地址和port端口号是我的一个服务器上的地址，可以正常连接 一、端点连接机制：基于...
java聊天室的实现代码
08-27
在本Java聊天室实现代码中，我们看到了一个简单的多客户端聊天室系统，它允许多个用户通过网络进行实时通信。这个程序主要包括以下几个关键知识点： 1. **网络编程基础**： - 使用`Socket`类来创建客户端与服务器...
QQ聊天室/MFC/C++源代码，学习
12-04
1.ChatRoom模仿QQ界面实现局域网消息互通； ... 3.登录后，选中私信模式，在好友列表中可以双击选中某位好友，来进行私信聊天； 4.群聊世界，可以跟局域网内所有...5.用户主界面额外设置了Bing网页搜索功能，供用户使用。
java socket实现聊天室 java实现多人聊天功能
08-27
Java Socket 实现聊天室多人聊天功能 Java Socket 是一种网络编程技术，通过 Socket 可以实现客户端和服务器之间的通信。在本篇文章中，我们将详细介绍如何使用 Java Socket 实现一个多人聊天室功能。 标题: Java ...
jquery mobile 实例用bootstrap 搭建响应式手机软件交谈聊天页面样式
05-14
jquery mobile 实例用bootstrap 搭建响应式手机软件交谈聊天页面样式
如何实现一个聊天系统
shiyugang18的博客
05-30 606
上述代码是一个基本的聊天系统框架，它使用Netty来处理服务器和客户端之间的通信。你可以根据需求进一步扩展和改进这个框架，例如添加用户身份验证、存储聊天记录、实现私聊等功能。这些只是简要的指导方针，具体实现细节会根据你的应用需求和技术选型而有所不同。要实现这些功能，你需要综合考虑数据库操作、消息传递、用户管理等方面的技术和实现细节。一个聊天系统通常涉及到客户端之间的消息传递、用户管理和消息广播等功能。请注意，这只是一个简单示例，并不处理所有可能的错误情况和边界情况。
手把手教你写一个web聊天室之bookstap框架
zzz_zsd的博客
08-19 1352
一：bookstap简介 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。并且对开发响应式网页十分友好，使用框架进行网页开发还可以使网页各个原件的风格统一，开发难度降低，提高效率。 二：bookstap引入 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min
用bootstrap结合jQuery实现简单的模态对话框
weixin_68067009的博客
06-22 1987
用bootstrap结合jQuery实现简单的模态对话框
模态框
lwj734114646的专栏
04-03 342
Bootstrap 实例 - 模态框（Modal）插件 创建模态框（Modal） <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 <div class="modal fade" id="myModal" tabin
基于bootstrap制作聊天工具UI，WebSockt实现即时通信
Gavyn的博客
03-28 1222
WebSockt和Http一样是应用层的协议，但是它是双向的，Http只是单向的，相同之处就是都是建立在TCP协议上。 1.浏览器、服务器建立TCP连接，进行握手。这是通信的基础，传输控制层，若失败后续都不执行。 2.浏览器通过HTTP协议向服务器传送WebSocket支持的版本等信息。 3.当客户端收到了连接成功的消息后，就可以通过TCP通道进行交互了。 本篇文章只是将刚实现的UI做一个展示 哈哈，好啦就到这里了，具体功能的实现还在继续中，还望多多支持哦 ...
Bootstrap（三）网页自适应---一个仿手机qq登录界面实例
qq_36688622的博客
06-07 2994
第三章是关于bootstrap的自适应专题。本章主要围绕viewport的使用方法以及包含属性来具体讲解，合并会提出一个仿手机qq登录界面的实例来具体分析代码。首先是界面的样式展示：我们可以看到，这个界面分为这么几个部分：头像框，账户输入框，密码输入框，底部链。接下来贴出代码部分：&lt;div class="container"&gt; &lt;div&gt; &lt;...
python tkinter 聊天室图形化界面 代码生成
06-09
好的，关于 Python tkinter 聊天室图形化界面的代码生成，这里提供一个简单的示例代码，供参考： ```python from tkinter import * from tkinter import scrolledtext class ChatRoom: def __init__(self, master): self.master = master master.title("聊天室") # 创建一个多行文本框用于显示聊天记录 self.msg_display = scrolledtext.ScrolledText(master, width=50, height=20) self.msg_display.grid(row=0, column=0, columnspan=2) # 创建一个单行文本框用于输入聊天内容 self.msg_input = Entry(master, width=40) self.msg_input.grid(row=1, column=0, padx=10) # 创建一个发送按钮 self.send_button = Button(master, text="发送", command=self.send_msg) self.send_button.grid(row=1, column=1) def send_msg(self): # 获取用户输入 msg = self.msg_input.get() # 将用户输入添加到聊天记录中 self.msg_display.insert(END, "我说：" + msg + "\n") # 清空用户输入框 self.msg_input.delete(0, END) # 创建主窗口 root = Tk() # 创建聊天室窗口 chatroom = ChatRoom(root) # 运行程序 root.mainloop() ``` 这个代码示例实现了一个简单的聊天室图形化界面，包括一个多行文本框用于显示聊天记录，一个单行文本框用于输入聊天内容，以及一个发送按钮。当用户输入聊天内容并点击发送按钮时，程序会将用户输入添加到聊天记录中，并清空用户输入框。 当然，这只是一个简单的示例代码，实际应用中还需要考虑一些其他的功能和细节。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值