网站基本布局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>
效果
相关文章：
网站基本布局CSS
代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width, initial-scale1"><title></title><style type"text/css">body {margi…...
ssm框架整合，异常处理器和拦截器（纯注解开发）
目录 ssm框架整合 第一步：指定打包方式和导入所需要的依赖 打包方法：war springMVC所需依赖 解析json依赖 mybatis依赖 数据库驱动依赖 druid数据源依赖 junit依赖 第二步：导入tomcat插件 第三步：编写配置类 SpringCon…...
古籍双层PDF制作教程：保姆级古籍数字化教程
在智慧古籍数字化项目中，很多图书馆要求将古籍导出为双层PDF，并且确保输出双层PDF底层文本与上层图片偏移量控制在1毫米以内。那么本教程带你使用古籍数字化平台，3分钟把一个古籍书籍转化为双侧PDF。 第1步：上传古籍 点批量上传…...
Git 删除 远端的分支
要删除 Git 远端的分支（例如： V3.2.1.13）： 可以执行以下命令 git push origin --delete V3.2.1.13这条命令会向远端的仓库删除名为 V3.2.1.13 的分支。如果这个分支只在远端仓库存在而没有对应的本地分支，那么删除后这…...
PrgogressBar实现原理分析
ProgressBar 是 Android 中用于显示进度条的控件，它可以用来表示任务的完成程度或者加载进度等信息。ProgressBar 有两种主要类型：一种是确定性的（determinate），另一种是不确定性的（indeterminateÿ…...
【HarmonyOS】HarmonyOS NEXT学习日记：七、页面与组件的生命周期
【HarmonyOS】HarmonyOS NEXT学习日记：七、页面与组件的生命周期 页面和组件 组件：用Component装饰的代码称为自定义组件页面：Entry装饰的组件即页面的根节点 组件生命周期 aboutToAppear：在创建自定义组件的新实例后…...
【iOS】——Block循环引用
循环引用原因 如果在Block中使用附有_ _strong修饰符的对象类型自动变量，那么当Block从栈复制到堆时，该对象为Block所持有，这样容易引起循环引用。 HPPerson *person [[HPPerson alloc] init];person.block ^{NSLog("person.age--- …...
shell脚本自动化安装启动各种服务
1、自动化配置dns服务器 A主机：vim dns.sh #!/bin/bash# 自动化部署dns# 1、下载bind# 2、修改配置文件# vim /etc/named.conf # listen-on port 53 { 127.0.0.1;any; }; 修改（定位替换）# allow-query { localhost;any; }; 修改&am…...
Python - 开源库 ReportLab 库合并 CVS 和图像生成 PDF 文档
欢迎关注我的CSDN：https://spike.blog.csdn.net/ 本文地址：https://spike.blog.csdn.net/article/details/140281680 免责声明：本文来源于个人知识与公开资料，仅用于学术交流，欢迎讨论，不支持转载。 Report…...
Java编写SIP协议
1、编写Server代码 package com.genersoft.iot.vmp.sip; import javax.sip.*; import javax.sip.message.*; import javax.sip.header.*; import java.util.*;public class SimpleSipServer implements SipListener {private SipFactory sipFactory;private SipStack sipStack…...
大型语言模型LLM的核心概念
本文主要介绍了目前主流的，几个大型语言模型LLM的整个训练过程 通常分为下面的几个阶段 1. 预训练 采用互联网上的大量数据进行训练，这一阶段大模型LLM的主体已定，找出共性并且压缩成一个模型。模型的参数量不是越大越好，遵循合理…...
软件测试---网络基础、HTTP
一、网络基础 （1）Web和网络知识 网络基础TCP/IP 使用HTTP协议访问Web WWW万维网的诞生 WWW万维网的构成 （2）IP协议 （3）可靠传输的TCP和三次握手策略 （4）域名解析服务DNS ࿰…...
韩顺平0基础学java——第39天
p820-841 jdbc和连接池 1.JDBC为访问不同的数据库提供了统一的接口，为使用者屏蔽了细节问题。 2.Java程序员使用JDBC，可以连接任何提供了JDBC驱动程序的数据库系统，从而完成对数据库的各种操作。 3.jdbc原理图 JDBC带来的好处 2.JDBC带来的…...
Linux文件恢复
很麻烦 一般还是小心最好 特别恢复的时候 可能不能选择某个文件夹去扫描恢复 所以 删除的时候 用rm -i代替rm 一定小心 以及 探索下linux的垃圾箱机制 注意 一定要恢复到不同文件夹 省的出问题 法1 系统自带工具 debugfs 但是好像不能重启？ testdisk 1、安装 …...
大数据的数据质量有效提升的研究
大数据的数据质量有效提升是一个涉及多个环节和维度的复杂过程。以下是从数据采集、处理、管理到应用等方面，对大数据数据质量有效提升的研究概述： 一、数据采集阶段 明确采集需求：在数据采集前，需明确数据需求，包括…...
Flink-CDC解析（第47天）
前言 本文主要概述了Flink-CDC. 1. CDC 概述 1.1 什么是CDC？ CDC是（Change Data Capture 变更数据获取）的简称 ，在广义的概念上，只要是能捕获数据变更的技术，都可以称之为 CDC。 核心思想是，…...
二阶段测试
二阶段测试 1、部署框架前准备工作 服务器类型部署组件ip地址DR1调度服务器 主（ha01）KeepalivedLVS-DR192.168.168.21DR2调度服务器 备 (ha02)KeepalivedLVS-DR192.168.168.22web1节点服务器 (slave01)NginxTomcatMySQL 备MHA managerMHA node192.168.1…...
CSP-J模拟赛day1——解析+答案
题目传送门 yjq的吉祥数 题解 送分题，暴力枚举即可 Code #include<bits/stdc.h> using namespace std;int l,r; int num1,tmp0,q[10000],a[10000]; int k (int x){for (int j1;j<tmp;j){if (xq[j])return 0;}return 1; } int main(){while (num<100…...
【PostgreSQL案例】我要查的表没有在执行计划中
问题：查的表没有在执行计划中 sql： SELECT* FROM(SELECTA.column1 as "column1",--中间省略很多A字段A.column99 as "column99"fromtable_a Aleft join (SELECTlzl_idfromtable_a AAinner join table_b BB ON AA.lzl_key BB.lzl_…...
《程序猿入职必会（5） · CURD 页面细节规范 》
📢 大家好，我是 【战神刘玉栋】，有10多年的研发经验，致力于前后端技术栈的知识沉淀和传播。 💗 🌻 CSDN入驻不久，希望大家多多支持，后续会继续提升文章质量，绝不滥竽充数…...
智慧树网课自动化学习插件：三步告别手动刷课的完整指南
智慧树网课自动化学习插件：三步告别手动刷课的完整指南 【免费下载链接】zhihuishu 智慧树刷课插件，自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 还在为智慧树平台冗长的网课视频而烦恼吗࿱…...
NotebookLM讨论模块写作：为什么87%的用户输出缺乏论证纵深？3个可立即部署的认知框架
更多请点击： https://intelliparadigm.com 第一章：NotebookLM讨论模块写作的认知断层诊断 NotebookLM 的讨论模块（Discussion Panel）旨在基于用户上传的文档生成上下文感知的对话，但实践中常出现“理解正确却表达失焦…...
TVA模型适配FPC材料疲劳差异
重磅预告：本专栏将独家连载系列丛书《智能体视觉技术与应用》部分精华内容，该书是世界首套系统阐述“因式智能体”视觉理论与实践的专著，特邀美国 TypeOne 公司首席科学家、斯坦福大学博士 Bohan 担任技术顾问。Bohan先生师从美国三院院士、“…...
Arduino Audio Tools终极指南：从音频新手到专业开发者的完整解决方案
Arduino Audio Tools终极指南：从音频新手到专业开发者的完整解决方案 【免费下载链接】arduino-audio-tools Arduino Audio Tools (a powerful Audio library not only for Arduino) 项目地址: https://gitcode.com/gh_mirrors/ar/arduino-audio-tools 在嵌入…...
大语言模型实战：从Transformer到QLoRA微调与RAG应用
1. 项目概述：为什么我们需要一门关于大语言模型的课程？如果你在过去一年里关注过技术圈，那么“大语言模型”这个词一定已经听得耳朵起茧了。从ChatGPT的横空出世，到各类开源模型的百花齐放，再到企业级应用的遍地开花&a…...
gprMax模拟结果看不懂？手把手教你用Paraview可视化不规则地质雷达模型
gprMax模拟结果可视化实战：用Paraview解析复杂地质雷达模型 地质雷达模拟完成后，面对海量的三维数据，许多研究者常陷入"数据在手，却无从下手"的困境。特别是当模型包含不规则异常体时，传统二维切片往往难以…...
从审批流到业务闭环：企业流程管理软件的价值变化
从审批流到业务闭环：企业流程管理软件的价值变化 很多企业最早上 OA，是为了“让审批在线上走”。请假、报销、合同、采购、用印都能提交、审核、归档，确实比纸质单据和微信群规范。但随着业务复杂度提升，企业会发现：审…...
无线门铃、车库遥控与物联网：聊聊OOK（2ASK）调制那些老技术的新应用
无线门铃、车库遥控与物联网：聊聊OOK（2ASK）调制那些老技术的新应用 在智能家居和物联网设备大行其道的今天，一种诞生于上世纪中期的通信技术——OOK（On-Off Keying）调制，依然活跃在无线门铃、车…...
GCC __builtin函数避坑指南：让你的跨平台C代码在ARM和x86上都跑得稳
GCC __builtin函数跨平台避坑实战：ARM与x86兼容性深度解析 在嵌入式开发与高性能计算领域，GCC编译器的__builtin函数集一直是开发者提升性能的利器。但当代码需要同时运行在ARM架构的嵌入式设备和x86架构的服务器上时，这些看似美妙的"魔…...
古典戏曲研究新范式，NotebookLM+《牡丹亭》原始刻本实测：自动生成曲牌-情感-舞台调度三维映射表
更多请点击： https://intelliparadigm.com 第一章：NotebookLM戏剧研究辅助的范式革命 传统戏剧研究长期依赖人工文本细读、跨剧目比对与历史语境重建，耗时冗长且易受主观经验局限。NotebookLM 的引入，标志着从“线性阅读—笔记摘…...