网站基本布局CSS

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">body {margin: 0;padding: 0;box-sizing: border-box;}.header {height: 60px;background: #79EDEE;}.warp {height: calc(100vh - 60px);box-sizing: border-box;display: flex;align-items: center;justify-content: space-between;}.left {width: 20%;height: 100%;position: relative;}.right {background-color: #CDFDEA;width: 100%;height: 100%;overflow-y: auto;}.left-top {background-color: #C1ECEA;height: 80%;box-sizing: border-box;overflow-y: auto;}.left-bottom {background-color: #D0F5BE;height: 20%;box-sizing: border-box;overflow-y: auto;}/* 滚动条样式 */::-webkit-scrollbar {width: 6px;}/* 滑块样式 */::-webkit-scrollbar-thumb{background-color: #9f9f9f; border-radius: 10px;}/* 滚动条轨道样式 */::-webkit-scrollbar-track{background-color: #fcfcfc;border-radius: 10px;}.collapse {height: 30px;width: 20px;border: 1px solid lightgray;display: flex;align-items: center;justify-content: center;background-color: aliceblue;}.menu-btn {display: flex;align-items: center;justify-content: center;}</style>
</head>
<body><div><div class="header"><div class="menu-btn"><button class="collapse" id="collapse" onclick="collapse()"></button><button class="collapse" id="collapse" onclick="extend()"></div></div></div><div class="warp"><div class="left" id="left-menu"><div class="left-top" id="left-top"></div><div class="left-bottom" id="left-bottom"></div></div><div class="right" id="right"></div></div></div>
</body><script type="text/javascript">let leftTopEl = document.getElementById('left-top')for (let i = 0; i < 100; i++) {leftTopEl.innerHTML += `<div>${i}</div>`;}let leftBottomEl = document.getElementById('left-bottom')for (let i = 0; i < 100; i++) {leftBottomEl.innerHTML += `<div>${i}</div>`;}let rightEl = document.getElementById('right')for (let i = 0; i < 1000; i++) {rightEl.innerHTML += `<div>${i}</div>`;}function collapse() {document.getElementById('left-menu').style.display = 'none'}function extend() {document.getElementById('left-menu').style.display = 'block'}
</script>
</html>

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/383190.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

性能调优 17. GraalVM云原生时代的Java虚拟机

1. GraalVM诞生的背景 1.1. Java在微服务/云原生时代的困境及解决方案 ‌‌‌  事实 ‌‌‌  Java总体上是面向大规模、长时间的服务端应用而设计的。 ‌‌‌  即时编译器(JIT)、性能优化、垃圾回收等有代表性的特征需要一段时间来达到最佳性能。 ‌‌‌  矛盾 ‌…

4、Python+MySQL+Flask的文件管理系统【附源码,运行简单】

4、PythonMySQLFlask的文件管理系统【附源码&#xff0c;运行简单】 总览 1、《文件管理系统》1.1 方案设计说明书设计目标工具列表 2、详细设计2.1 登录2.2 注册2.3 个人中心界面2.4 文件上传界面2.5 其他功能贴图 3、下载 总览 自己做的项目&#xff0c;禁止转载&#xff0c…

大厂面试官问我:两个1亿行的文件怎么求交集?【后端八股文十五:场景题合集】

本文为【场景题合集】初版&#xff0c;后续还会进行优化更新&#xff0c;欢迎大家关注交流~ hello hello~ &#xff0c;这里是绝命Coding——老白~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f…

Unity UGUI 之 Input Field

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 1.Input Field是什么&#xff1f; 给玩家提供输入的输入框 2.重要参数 中英文对照着看…

设计模式|观察者模式

观察者模式是一种行为设计模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。当主题对象发生变化时&#xff0c;它的所有观察者都会收到通知并更新。观察者模式常用于实现事件处理系统、发布-订阅模式等。在项目中&#xff0c…

爬虫学习4:爬取王者荣耀技能信息

爬虫&#xff1a;爬取王者荣耀技能信息&#xff08;代码和代码流程&#xff09; 代码 # 王者荣耀英雄信息获取 import time from selenium import webdriver from selenium.webdriver.common.by import By if __name__ __main__:fp open("./honorKing.txt", "…

nginx隐藏server及版本号

1、背景 为了提高nginx服务器的安全性&#xff0c;降低被攻击的风险&#xff0c;需要隐藏nginx的server和版本号。 2、隐藏nginx版本号 在 http {—}里加上 server_tokens off; 如&#xff1a; http {……省略sendfile on;tcp_nopush on;keepalive_timeout 60;tcp_nodelay o…

Microsoft 365 Office BusinessPro LTSC 2024 for Mac( 微软Office办公套件)

Microsoft 365 Office BusinessPro LTSC 2024是一款专为商业用户设计的办公软件套件&#xff0c;它集成了Word、Excel、PowerPoint等核心应用&#xff0c;并特别包含了Microsoft Teams这一强大的协作工具。Teams将聊天、会议、文件共享、任务管理等功能整合到一个平台上&#x…

【黑科技】:Laravel 项目性能提升 20 倍

令人激动的黑科技&#xff1a;Laravel 项目性能提升 20 倍 这个项目能够在无需修改任何代码且无需第三方扩展的前提下&#xff0c;将你的 Laravel 项目性能提高 20 倍。它仅依赖于 PHP 原生的 pcntl、posix、fiber 和 sockets。 项目灵感 起因是看到官方发布的 PHP 8.1 更新…

软件开发者消除edge浏览器下载时“此应用不安全”的拦截方法

当Microsoft Edge浏览器显示“此应用不安全”或者“已阻止此不安全的下载”这类警告时&#xff0c;通常是因为Windows Defender SmartScreen或者其他安全功能认为下载的文件可能存在安全风险。对于软件开发者来说&#xff0c;大概率是由于软件没有进行数字签名&#xff0c;导致…

河南萌新联赛2024第(二)场:南阳理工学院

文章目录 原题链接A.国际旅行Ⅰ题意&#xff1a;思路&#xff1a;代码&#xff1a; F.水灵灵的学弟题意&#xff1a;思路&#xff1a;代码 I.重生之zbk要拿回属于他的一切题意&#xff1a;思路&#xff1a;代码&#xff1a; J.这是签到题意&#xff1a;思路&#xff1a;代码&am…

畅游时空|虚拟世界初体验,元宇宙游戏如何开发?

在元宇宙中&#xff0c;用户可以通过虚拟身份进行互动、社交、工作和娱乐&#xff0c;体验与现实世界平行的生活和活动。元宇宙不仅仅是一个虚拟空间&#xff0c;更是一个融合了虚拟和现实的生态系统&#xff0c;具有巨大的发展潜力和应用前景。 在不断发展的数字环境中&#x…

NCRE3 2-1 网络总体设计基本方法

这部分记忆的比较多 概览 设计网络建设总体目标确定网络系统方案设计原则网络系统总体设计设计网络拓扑结构进行网络设备选型网络系统安全设计 设计网络建设总体目标 这部分视频没说到 确定网络系统方案设计原则 这部分视频没说到 网络系统总体设计 核心层网络结构设计 …

图形编辑器基于Paper.js教程09:鼠标拖动画布,以鼠标点为缩放中心进行视图的缩放

如何使用Paper.js实现画布的缩放与拖动功能 在Web开发中&#xff0c;利用Paper.js库进行图形的绘制和交互操作是一种常见的实践。Paper.js是一个强大的矢量图形库&#xff0c;可以让开发者通过简洁的API完成复杂的图形操作。在本文中&#xff0c;我们将详细探讨如何使用Paper.…

Dify中接入GPT-4o mini模型

GPT-4o mini模型自己承认是基于GPT-3.5架构的模型&#xff0c;有图有真相&#xff1a; 一.GPT-4o mini官网简介 GPT-4o mini&#xff08;“o"代表"omni”&#xff09;是小型型号类别中最先进的型号&#xff0c;也是OpenAI迄今为止最便宜的型号。它是多模态的&#x…

idea一键为实体类赋值

file -> settings -> plugins -> marketplace 把这个插件装上 找个实体&#xff0c;选中&#xff0c;altenter进入edit界面 我是选择只保留右边这种生成方法&#xff0c;然后选择ok 返回到那个实体&#xff0c;选择&#xff0c;altenter generate生成

键盘是如何使用中断机制的?当打印一串字符到显示屏上时发生了什么???

当在键盘上按下一个键时会进行一下操作&#xff1a; 1.当按下任意一个键时&#xff0c;键盘编码器监控会来判断按下的键是哪个 2.键盘控制器用将解码,将键盘的数据保存到键盘控制器里数据寄存器里面 3.此时发送一个中断请求给中断控制器&#xff0c;中断控制器获取到中断号发送…

PyTorch基础(24)--torch.multinomial()方法

&#x1f449;torch.multinomial的源码见https://github.com/dongjinkun/PyTorch/tree/main/torch 一、前言 torch.multinomial()方法多出现在需要采样的场景中&#xff0c;如强化学习。具体讲&#xff0c;当使用强化学习解决旅行商问题时&#xff0c;针对某一个instance&…

Spring Boot集成Spring Batch快速入门Demo

1.什么是Spring Batch&#xff1f; Spring Batch 是一个轻量级的开源框架&#xff0c;它提供了一种简单的方式来处理大量的数据。它基于Spring框架&#xff0c;提供了一套批处理框架&#xff0c;可以处理各种类型的批处理任务&#xff0c;如ETL、数据导入/导出、报表生成等。S…

【通信协议-RTCM】MSM语句(2) - RINEXMSM7语句总结(重要!自动化开发计算卫星状态常用)

注释&#xff1a; 在工作中主要负责的是RTCM-MSM7语句相关开发工作&#xff0c;所以主要介绍的就是MSM7语句相关内容 1. 相位校准参考信号 2. MSM1、MSM2、MSM3、MSM4、MSM5、MSM6和MSM7的消息头内容 DATA FIELDDF NUMBERDATA TYPENO. OF BITSNOTES Message Number - 消息编…