当前位置：首页 > article >正文

HTML左右分页2【搬代码】

article 2026/3/15 12:26:04

HTML左右分页2

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>左右分页布局</title><link rel="stylesheet" href="style.css"></link>
</head><body><!-- 左侧导航栏 --><div id="left-nav"><!-- 第一个下拉框 --><div class="dropdown"><button class="dropdown-btn">菜单 1</button><ul class="dropdown-content"><li data-content="content1">子菜单 1-1</li><li data-content="content2">子菜单 1-2</li></ul></div><!-- 第二个下拉框 --><div class="dropdown"><button class="dropdown-btn">菜单 2</button><ul class="dropdown-content"><li data-content="content3">子菜单 2-1</li><li data-content="content4">子菜单 2-2</li></ul></div></div><!-- 右侧内容区域 --><div id="right-content"><!-- 顶部操作栏 --><div id="top-bar"><!-- 隐藏导航栏按钮 --><button id="toggle-nav">☰</button><!-- 右上角个人中心图标 --><span id="profile-icon">👤</span></div><!-- 内容显示区域 --><div id="content-area"><div id="content1" class="show"><div class="content1-child">这是 content1 里的第一个子 div 内容</div><div class="content1-child">这是 content1 里的第二个子 div 内容</div></div><div id="content2" class="hide"><div class="content2-child">这是 content2 里的第一个子 div 内容</div><div class="content2-child">这是 content2 里的第二个子 div 内容</div></div><div id="content3" class="hide"><div class="content3-child">这是 content3 里的第一个子 div 内容</div><div class="content3-child">这是 content3 里的第二个子 div 内容</div></div><div id="content4" class="hide"><div class="content4-child">这是 content4 里的第一个子 div 内容</div><div class="content4-child">这是 content4 里的第二个子 div 内容</div></div></div></div>
</body>
<script src="script.js"></script>
</html>

css

<style>
/* 整体页面样式 */
body {margin: 0;padding: 0;font-family: Arial, sans-serif;display: flex;height: 100vh;
}/* 左侧导航栏样式 */
#left-nav {position: fixed;width: 200px;height: 100vh;background-color: #333;color: white;padding-top: 20px;transition: width 0.3s ease;overflow-y: auto;
}/* 隐藏左侧导航栏时的样式 */
#left-nav.hidden {width: 0;overflow: hidden;
}/* 导航栏下拉框样式 */
.dropdown {position: relative;display: block;
}/* 下拉框按钮样式 */
.dropdown-btn {background-color: #333;color: white;padding: 10px;width: 100%;border: none;text-align: left;cursor: pointer;
}/* 下拉框内容样式 */
.dropdown-content {display: none;position: relative;background-color: #444;width: 100%;
}/* 下拉框内容列表项样式 */
.dropdown-content li {padding: 10px;cursor: pointer;
}/* 下拉框内容列表项悬停样式 */
.dropdown-content li:hover {background-color: #555;
}/* 右侧内容区域样式 */
#right-content {flex: 1;display: flex;flex-direction: column;margin-left: 200px; /* 留出左侧导航栏的空间 */
}/* 顶部操作栏样式 */
#top-bar {display: flex;justify-content: space-between;align-items: center;padding: 10px;background-color: #f0f0f0;
}/* 隐藏导航栏按钮样式 */
#toggle-nav {background: none;border: none;font-size: 20px;cursor: pointer;
}/* 右上角个人中心图标样式 */
#profile-icon {font-size: 20px;cursor: pointer;
}/* 内容显示区域样式 */
#content-area {padding: 20px;overflow-y: auto;
}/* 内容区域显示与隐藏类 */
.show {display: flex;justify-content: space-around;
}.hide {display: none;
}/* content1 内子 div 样式 */
.content1-child {background-color: lightblue;padding: 10px;margin: 5px;flex: 1;
}/* content2 内子 div 样式 */
.content2-child {background-color: lightgreen;padding: 10px;margin: 5px;flex: 1;
}/* content3 内子 div 样式 */
.content3-child {background-color: lightcoral;padding: 10px;margin: 5px;flex: 1;
}/* content4 内子 div 样式 */
.content4-child {background-color: lightyellow;padding: 10px;margin: 5px;flex: 1;
}
</style>

script

<script>// 获取左侧导航栏元素const leftNav = document.getElementById('left-nav');// 获取切换导航栏按钮元素const toggleNav = document.getElementById('toggle-nav');// 获取所有下拉框按钮元素const dropdownBtns = document.querySelectorAll('.dropdown-btn');// 获取导航栏所有列表项元素const navItems = document.querySelectorAll('.dropdown-content li');// 获取所有内容区域元素const contents = document.querySelectorAll('#content-area > div');// 为切换导航栏按钮添加点击事件监听器toggleNav.addEventListener('click', () => {leftNav.classList.toggle('hidden');if (leftNav.classList.contains('hidden')) {document.getElementById('right-content').style.marginLeft = '0';} else {document.getElementById('right-content').style.marginLeft = '200px';}});// 为下拉框按钮添加点击事件监听器dropdownBtns.forEach(btn => {btn.addEventListener('click', () => {const dropdownContent = btn.nextElementSibling;dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';});});// 为导航栏列表项添加点击事件监听器navItems.forEach(item => {item.addEventListener('click', () => {// 获取点击列表项对应的内容 IDconst contentId = item.dataset.content;console.log(`点击了 ${item.textContent}，对应的内容 ID 是 ${contentId}`);// 隐藏所有内容区域contents.forEach(content => {content.classList.add('hide');content.classList.remove('show');});// 显示点击列表项对应的内容区域const selectedContent = document.getElementById(contentId);if (selectedContent) {selectedContent.classList.add('show');selectedContent.classList.remove('hide');console.log(`显示内容区域 ${contentId}`);} else {console.error(`未找到 ID 为 ${contentId} 的内容区域`);}});});// 获取个人中心图标元素const profileIcon = document.getElementById('profile-icon');// 为个人中心图标添加点击事件监听器profileIcon.addEventListener('click', () => {// 这里可以添加进入个人中心的逻辑，例如跳转到个人中心页面alert('进入个人中心');});
</script>

HTML左右分页2【搬代码】

HTML左右分页2 html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>左右分页布局</title>&l…...

编程日记 2026/3/11 17:07:40

【鸿蒙开发】OpenHarmony调测工具hdc使用教程(设备开发者)

00. 目录文章目录 00. 目录01. OpenHarmony概述02. hdc简介03. hdc获取04. option相关的命令05. 查询设备列表的命令06. 服务进程相关命令07. 网络相关的命令08. 文件相关的命令09. 应用相关的命令10. 调试相关的命令11. 常见问题12. 附录 01. OpenHarmony概述 OpenHarmony是…...

编程日记 2026/3/11 17:37:05

【贪心算法】简介

1.贪心算法贪心策略：解决问题的策略，局部最优----》全局最优 （1）把解决问题的过程分成若干步 （2）解决每一步的时候，都选择当前看起来的“最优”的算法 （3）“希望”得…...

编程日记 2026/2/22 4:37:48

transformer模型介绍——大语言模型 LLMBook 学习（二）

1. transformer模型 1.1 注意力机制 **注意力机制（Attention Mechanism）**在人工智能中的应用，实际上是对人类认知系统中的注意力机制的一种模拟。它主要模仿了人类在处理信息时的选择性注意（Selective Attention）&a…...

编程日记 2026/3/4 15:39:50

【GPT入门】第11课 FunctionCall调用本地代码入门

【GPT入门】第11课 FunctionCall调用代码入门 1. 手撕FunctionCall2.代码3.functionCall的结果 1. 手撕FunctionCall 为了了解，funcationCall底层，手写一个functionCall多方法，并调用，体验思路： 任务：让…...

编程日记 2026/3/12 4:47:20

LangChain教程 - Agent -之 ZERO_SHOT_REACT_DESCRIPTION

在构建智能 AI 助手时，我们希望模型能够智能地调用工具，以便提供准确的信息。LangChain 提供了 AgentType.ZERO_SHOT_REACT_DESCRIPTION，它结合了 ReAct（Reasoning Acting）策略，使得 LLM 可以基于工具的描…...

编程日记 2026/3/6 6:47:37

GStreamer —— 2.17、Windows下Qt加载GStreamer库后运行 - “播放教程 5：色彩平衡“（附：完整源码）

运行效果介绍亮度、对比度、色相和饱和度是常见的视频调整， 在 GStreamer 中统称为 Color Balance 设置。本教程展示了： • 如何找出可用的色彩平衡通道 • 如何更改它们允许访问颜色平衡设置。如果元素支持这个接口，只需将其转发给应用…...

编程日记 2026/2/26 12:20:46

串口通信ASCII码转16进制及C#串口编程完整源码下载

在工业自动化、嵌入式系统及物联网以行业中，串口编程非常重要。串口编程，重点在于串口数据通信和数据处理。在C#中，System.IO.Ports命名空间提供了SerialPort类，用于实现串口通信。串口程序的开发主要包括以下几点 1.引用命…...

编程日记 2026/3/7 0:09:01

解决vscode中出现“无法将pip项识别...“问题

问题遇见问题如下： 查看pip 通过 winR ，输入 cmd，进入终端，搜索 where pip。发现 pip 查不出来，然后进入文件资源管理器，搜索 Scripts 文件夹，如果没有找到可能是电脑没有下载 python。点击…...

编程日记 2026/3/3 14:41:35

nacos下载及安装

下载官方最新稳定版 github下载较慢，推荐下面的下载链接 Nacos Server 下载 | Nacos 官网点击下载和试用下载最新稳定版 Nacos Server 下载 | Nacos 官网配置检查（可选） 默认情况下，Nacos 使用内置的 Derby 数据库&#x…...

编程日记 2026/2/15 6:55:16

C++从零实现Json-Rpc框架

文章目录一、项目介绍1. 基本原理2. 涉及到的技术栈3. 最终实现的效果二、第三方库的介绍与使用1. JsonCpp库Json的数据格式JsonCpp介绍封装Json工具类 2. muduo库muduo库是什么Muduo库常见接口介绍 3. C11异步操作std::future 三、框架设计1. 服务端模块划分NetworkProtoco…...

编程日记 2026/3/2 15:11:41

rom定制系列------小米note3 原生安卓15 批量线刷默认开启usb功能选项插电自启等

小米Note 3搭载骁龙660处理器，1200万像素广角镜头、俗称大号版的小米6，官方最终版为12.0.1稳定版安卓9的固件。客户需要运行在安卓15的rom。根据原生官网的rom修改一些功能选项。以便客户操作需求。定制资源说明根据客户需求采用安卓15原生系统为底包…...

编程日记 2026/3/14 10:33:13

使用jest测试用例之入门篇

Jest使用 Jest 是由 Facebook 开发的一个 js 测试框架，jest 主要侧重于被用于做单元测试和集成测试安装 npm i jest -D运行 **package.json**里面配置命令 // scripts添加测试脚本 {"test": "jest" /* 运行后便会使用 jest 执行所有的 .t…...

编程日记 2026/2/19 11:48:38

大数据学习（59）-DataX执行机制

&&大数据学习&& 🔥系列专栏： 👑哲学语录: 承认自己的无知，乃是开启智慧的大门 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一下博主哦&#x1f91…...

编程日记 2026/2/18 11:46:18

YashanDB认证，YCA证书认证教程，免费证书，内含真题考试题库及答案——五分钟速成

目录一.账号及平台注册登录流程二.登录进行设备调试核验三.考试（考完获取分数） 四.获取证书五.题库及答案一.账号及平台注册登录流程 1-点击这里进行账号注册（首次学习必须先注册，有账号之后可以直接在2号链接登录&#…...

编程日记 2026/3/14 18:33:52

消防行业如何借助 TDengine 打造高效的数据监控与分析系统

小T导读：本篇文章来自“2024，我想和 TDengine 谈谈”征文活动的优秀投稿，深入探讨了如何在消防行业中运用 TDengine 进行业务建模。文章重点介绍了如何通过 TDengine 的超级表、标签设计和高效查询功能，有效管理消防监控系统中的时…...

编程日记 2026/3/5 12:50:46

自然语言处理中的语音识别技术：从声波到语义的智能解码

引言语音识别（Automatic Speech Recognition, ASR）是自然语言处理（NLP）的关键分支，旨在将人类语音信号转化为可处理的文本信息。随着深度学习技术的突破，语音识别已从实验室走向日常生活，赋能…...

编程日记 2026/3/15 1:56:26

010-Catch2

Catch2 一、框架简介 Catch2 是一个基于 C 的现代化单元测试框架，支持 TDD（测试驱动开发）和 BDD（行为驱动开发）模式。其核心优势在于： 单头文件设计：v2.x 版本仅需包含 catch.hpp 即可使用自然…...

编程日记 2026/2/15 0:56:11

TypeScript类：面向对象编程的基石

一、从现实世界到代码世界想象你要建造一栋房子，首先需要一张设计蓝图——它定义了房屋的结构（几个房间）、功能（卧室/厨房）和特性（材料/颜色）。在TypeScript中，class就是这个设计蓝…...

编程日记 2026/2/14 23:50:02

Bad owner or permissions on ssh/config - 解决方案

问题在Windows系统通过ssh连接远程服务器时报错： ssh [ssh_user][ip] Bad owner or permissions on C:\\Users\\[win_user]/.ssh/config原因这是因为.ssh文件夹或.ssh/config文件的权限异常，当前Windows账号没有读写权限导致的。 Windows系统重装&a…...

编程日记 2026/3/10 1:43:24

C++之序列容器（vector,list,dueqe）

1.大体对比在软件开发的漫长历程中，数据结构与算法始终占据着核心地位，犹如大厦的基石，稳固支撑着整个程序的运行。在众多编程语言中，数据的存储与管理方式各有千秋，而 C 凭借其丰富且强大的工具集脱颖而出&#xff…...

编程日记 2026/3/12 18:49:18

安卓Android与iOS设备管理对比：企业选择指南

目录一、管理方式差异 Android Enterprise方案包含三种典型模式： Apple MDM方案主要提供两种模式： 二、安全防护能力 Android系统特点： 三、应用管理方案四、设备选择建议五、典型场景推荐需求场景推荐方案六、决策建议要点…...

编程日记 2026/3/14 7:58:31

git本地仓库链接远程仓库

重命名本地分支为main 如果你希望本地分支名称与远程分支名称保持一致，可以考虑将本地的master分支重命名为main。这可以通过以下命令完成： 在连接之前要先提交 git add . git commit -m "init" 强制推送到远程 git push -f origin main 首…...

编程日记 2026/2/20 10:45:49

版本控制器Git(1)

文章目录前言一、初识Git问题引入解决方案注意事项二、Git安装三、Git配置与基本操作Git创建Git配置用户名称和地址认识工作区、暂存区、版本库添加文件到仓库添加文件到暂存区提交暂存区内容到本地仓库查看提交历史四、Git 暂存区、HEAD、对象库及文件Git内部结构概览查看…...

编程日记 2026/3/13 9:52:03

推理模型对SQL理解能力的评测：DeepSeek r1、GPT-4o、Kimi k1.5和Claude 3.7 Sonnet

引言随着大型语言模型（LLMs）在技术领域的应用日益广泛，评估这些模型在特定技术任务上的能力变得越来越重要。本研究聚焦于四款领先的推理模型——DeepSeek r1、GPT-4o、Kimi k1.5和Claude 3.7 Sonnet在SQL理解与分析方面的能力，…...

编程日记 2026/3/13 1:40:32

[动手学习深度学习]12.权重衰退

1.介绍权重衰退是常见的处理过拟合的方法控制模型容量方法把模型控制的比较小，即里面参数比较少使参数选择范围小约束就是正则项每个特征的权重都大会导致模型复杂，从而导致过拟合。控制权重矩阵范数可以使得减少一些特征的权重，甚至…...

编程日记 2026/2/14 23:42:32

JavaEE_多线程(二)

目录 1. 线程的状态2. 线程安全2.1 线程不安全问题的原因 3. 线程安全中的部分概念3.1 原子性3.2 可见性3.3 指令重排序 4. 解决线程安全问题4.1 synchronized关键字4.1.1 可重入4.1.2 synchronized使用 4.2 volatile关键字4.2.1 volatile使用 5. wait和notify5.1 wait()方法5.…...

编程日记 2026/3/15 12:16:33

【unity小技巧】分享vscode如何进行unity开发，且如何开启unity断点调试模式，并进行unity断点调试（2025年最新的方法，实测有效）

文章目录前言一、前置条件1、已安装Visual Studio Code，并且unity首选项>外部工具>外部脚本编辑器选择为Visual Studio Code [版本号]，2、在Visual Studio Code扩展中搜索Unity，并安装3、同时注意这个插件下面的描述，需要根…...

编程日记 2026/3/14 13:12:33

【Hadoop】详解HDFS

Hadoop 分布式文件系统(HDFS)被设计成适合运行在通用硬件上的分布式文件系统，它是一个高度容错性的系统，适合部署在廉价的机器上，能够提供高吞吐量的数据访问，非常适合大规模数据集上的应用。为了做到可靠性，HDFS创建了…...

编程日记 2026/3/11 1:15:41

Spring（4）——响应相关

一、返回静态页面 1.1**RestController和Controller** 想返回如下页面： 如果我们依旧使用原来的**RestController** 可以看到的是仅仅返回了字符串。此时将**RestController改为Controller** 可以看到这次返回的是html页面。那么**RestController和Controller…...

编程日记 2026/3/2 3:22:51

相关文章：