聊天室之主界面

陌小柠

已于 2022-04-05 16:15:21 修改

阅读量9.2k

点赞数 3

分类专栏：网页开发学习文章标签： css bootstrap html vscode web

于 2021-12-15 17:59:26 首次发布

本文链接：https://blog.csdn.net/weixin_46555054/article/details/121957976

版权

本文档介绍了如何使用Vscode作为开发工具，结合HTML和CSS以及Bootstrap框架，构建聊天室的主界面。内容包括欢迎界面、联系人界面、推荐添加好友界面和个人管理界面的设计与实现。

摘要由CSDN通过智能技术生成

聊天室之主界面

文章目录

- 聊天室之主界面

一. 环境：

开发工具：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;
        f

最低0.47元/天解锁文章

陌小柠

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
聊天室之主界面

一. 环境：开发工具：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&g
复制链接

扫一扫

专栏目录