不使用iframe如何实现左边导航栏、右边子页面，点击导航栏后右边的子页面显示响应页面，请给出一个完整的页面代码
时间: 2024-05-09 20:20:43 浏览: 81
以下是一个使用CSS布局的例子，点击导航栏后右边的子页面会显示相应的内容：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>左侧导航栏和右侧子页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="nav">
<ul>
<li><a href="#page1">页面1</a></li>
<li><a href="#page2">页面2</a></li>
<li><a href="#page3">页面3</a></li>
<li><a href="#page4">页面4</a></li>
</ul>
</div>
<div class="content">
<div id="page1" class="page">
<h2>页面1</h2>
<p>这是页面1的内容。</p>
</div>
<div id="page2" class="page">
<h2>页面2</h2>
<p>这是页面2的内容。</p>
</div>
<div id="page3" class="page">
<h2>页面3</h2>
<p>这是页面3的内容。</p>
</div>
<div id="page4" class="page">
<h2>页面4</h2>
<p>这是页面4的内容。</p>
</div>
</div>
</div>
</body>
</html>
CSS代码：
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
}
.nav {
background-color: #333;
color: #fff;
padding: 20px;
}
.nav ul {
list-style: none;
}
.nav li {
margin-bottom: 10px;
}
.nav a {
color: #fff;
text-decoration: none;
}
.content {
flex: 1;
padding: 20px;
}
.page {
display: none;
}
.page:target {
display: block;
}
解释一下CSS代码：
*选择器会将所有元素的外边距和内边距都设置为0，这样就不会有默认的边距影响布局。.container设置为flex布局，这样左边的导航栏和右边的子页面就能够一起占据整个页面。.nav设置导航栏的样式，包括背景颜色、文字颜色和内边距。.nav ul将列表样式去掉。.nav li设置导航栏每个选项之间的间距。.nav a设置导航栏链接的样式，包括文字颜色和去掉下划线。.content设置右侧子页面的样式，包括内边距和flex布局占据剩余空间。.page将子页面的样式设置为不显示。.page:target使用伪类选择器，当子页面被点击后显示。:target会选中当前URL的锚点（#page1、#page2等）所对应的元素。
这样就实现了左边导航栏、右边子页面的布局。
向AI提问 
相关推荐
大家在看
guru和godef
goru.exe godef.exe go 的工具包
goru.exe godef.exe go 的工具包
goru.exe godef.exe go 的工具包
Qwen1.5大模型微调、基于PEFT框架LoRA微调，在数据集HC3-Chinese上实现文本分类。.zip
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
Kml2nema地图导航数据和Nema0183定位数据转换工具软件
本人开发了一款小程序Kml2Nema，可实现将谷歌地图导航文件（.kml）转换为一般GPS/BD定位设备输出的Nema0183格式的数据文件。同时，还支持反向转换，将Nema0183的数据文件转换为谷歌地图导航文件（.kml）或者百度地图导航文件（.html），在联网的条件下可直接在地图中显示出定位轨迹。
————————————————
版权声明：本文为CSDN博主「陈年老酱油」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_50750451/article/details/128571977
AoIP标准解析
Livewire+ 来自Telos 联盟
早期的Livewire是业界最早的AoIP方案，并取得
了不错的市场业绩（Livewire并不支持IEEE1588）
升级后的Livewire+ 符合AES67标准
glibc.i686 + redhat7.9
glibc.i686 + redhat7.9
rpm安装文件
最新推荐
基于Bootstrap实现tab标签切换效果
这个导航栏包含了一个可折叠的导航菜单，当屏幕尺寸变小后，菜单项会折叠成一个下拉列表。`navbar-toggle`和`data-toggle="collapse"`属性用于触发这个折叠效果，而`data-target=".navbar-collapse"`指定了折叠内容...
vue3 访问通义千问聊天代码例子
vue3 访问通义千问聊天代码例子
基于Python的Flask-vue基于Hadoop的智慧校园数据共享平台实现源码-演示视频.zip
基于Python的Flask-vue基于Hadoop的智慧校园数据共享平台实现源码-演示视频
项目关键技术
开发工具：Pycharm
编程语言: python
数据库: MySQL5.7+
后端技术：Flask
前端技术：HTML
关键技术：HTML、MYSQL、Python
数据库工具：Navicat、SQLyog
C#调用Ni板卡进行实现采集任务(模拟量输入输出)示例1
【实验1】：读取一次AI0通道数值
【实验2】：一次读取AI0通道多个数值
【实验3】：单次模拟量输出
【实验4】：连续模拟量输出（输出一个正弦曲线）
无人船的Smith-PID跟踪控制方法研究及实现：融合传统与最优PID策略的LOS曲线跟踪资料,基于无人船Smith-PID改进
无人船的Smith-PID跟踪控制方法研究及实现：融合传统与最优PID策略的LOS曲线跟踪资料,基于无人船Smith-PID改进跟踪控制技术及其LOS曲线跟踪方法研究资料,基于无人船的smith-pid跟踪控制资料。
首先，针对pid进行了改进，有传统pid，最优pid和基于smith的pid三种控制方式。
然后还在smithpid基础上设计了LOS的曲线跟踪方法。
（有对应参考文献）。
有意者可直接联系，参考学习资料。
python语言。
,基于无人船的Smith-PID跟踪控制; PID改进(传统PID、最优PID、基于Smith的PID); Smith-PID曲线跟踪方法; 参考学习资料; Python语言。,基于无人船的Smith-PID优化跟踪控制资料
进销存系统必备PNG图标集合
PNG图标是计算机图形学中常见的一种图像格式，它采用无损压缩技术来存储位图数据，使得文件体积相对较小，同时能够保持良好的图像质量。PNG格式的图标因其透明度支持和不损失质量的特点，在开发软件界面时被广泛应用，尤其是在进销存管理系统中。进销存管理系统是企业管理其产品进货、销售以及库存状态的一种软件系统，通过使用图标能够直观地展示系统功能和数据状态，提高用户操作的便捷性和界面的友好性。
下面将详细介绍与“进销存常用PNG图标”相关的一些知识点：
1. PNG格式的特点：
PNG，全称Portable Network Graphics，意为便携式网络图形，是一种无损压缩的位图图形格式。PNG格式的特点主要体现在以下几个方面：
- 支持无损压缩：PNG格式保留了图像的原始数据，不会因为压缩而损失图像质量。
- 支持透明度：PNG格式可以支持256个级别的透明度，使得图像在不同背景上显示更为自然。
- 支持灰度和调色板图像：PNG格式支持灰度图像和使用有限颜色集的图像，有利于减小文件大小。
- 支持文件大小减小：采用高效的无损压缩算法，使得文件占用空间相对较小。
2. 进销存管理系统的基本功能：
进销存管理系统通常需要处理商品的进货、销售和库存管理等核心业务，其基本功能通常包括：
- 商品信息管理：用于录入和修改商品的基本信息，如名称、分类、价格、规格等。
- 库存管理：监控库存水平，进行库存量的增加和减少操作。
- 销售管理：记录销售订单信息，管理客户订单和发票。
- 采购管理：记录和管理供应商信息及采购订单。
- 财务管理：包括往来账目管理、收支管理、账单生成等。
3. 图标在进销存系统中的应用：
图标在进销存系统的用户界面中扮演着重要的角色，通过直观的图形化元素表达系统功能和提示信息，帮助用户快速理解并操作系统。
- 功能图标：为系统的每个功能模块设计相应的图标，例如库存管理用库存量表图标、销售管理用购物车或销售图表图标表示。
- 导航图标：为了帮助用户在各个模块间快速切换，使用箭头或路径图标的导航元素是常见的设计。
- 操作图标：用于表示特定操作的图标，比如新增、删除、修改、查询等，通常配合按钮使用。
- 信息图标：展示系统状态或者提示信息的图标，如消息提示、警告、成功信息等。
4. 如何使用图标优化用户体验：
为了确保用户界面的友好性和操作的直观性，在进销存系统中使用图标时应注意以下几点：
- 图标风格统一：系统中所有图标应遵循统一的设计风格，包括颜色、线条粗细、角的处理等。
- 图标语义明确：每个图标的含义应直观易懂，避免产生歧义，确保用户能够迅速理解图标的意图。
- 保持图标简洁：避免使用过于复杂的图案和细节，以免影响图标的可读性。
- 图标尺寸适配：图标大小应根据实际使用场景进行适配，保证在界面上的可识别性和美观性。
- 提供文本辅助：对于重要的操作或功能，除了图标外，还应提供文字说明，以便不同背景的用户都能理解。
综上所述，“进销存常用PNG图标”是一个涵盖了图形设计、用户界面设计和软件开发的综合性知识领域。在开发进销存系统时，合理利用PNG图标不仅可以提升软件的专业度，还能够增强用户体验，提高工作效率。开发者需要对图标的设计和应用有深入的理解，才能确保软件界面既美观又实用。
Linux内核模块开发进阶：ILITEK I2C驱动编写、测试与优化
# 摘要
Linux内核模块与I2C协议的整合为硬件设备提供了有效的通信支持，其中ILITEK I2C驱动开发是实现高效硬件交互的关键。本文首先概述了Linux内核模块和I2C协议的基础，随后深入探讨了ILITEK I2C驱动的基础开发，包括驱动架构解析、核心编程和调
mse ssim联合损失函数
### 实现 MSE 和 SSIM 联合损失函数
为了提高图像处理任务的效果，尤其是对于图像生成和重建的任务来说，单独使用均方误差（Mean Squared Error, MSE）可能无法很好地捕捉到人类视觉系统的特性。因此，结合结构相似度指数（Structural Similarity Index Measure, SSIM），可以更好地反映图像的质量。
#### 定义联合损失函数
联合损失函数可以通过加权组合的方式定义：
\[ L_{\text{total}} = \alpha L_{\text{mse}} + (1-\alpha) L_{\text{ssim}} \]
其中 \
京津冀地区功能区划详细解读与GIS数据整合
在地理信息系统（GIS）领域中，"京津冀功能区划"是一个重要的概念，指的是对中国北方的北京、天津和河北三个省市的主要功能区域进行划分。京津冀地区是中国北方经济最活跃的地区之一，也是国家区域协调发展战略的重点区域。对其进行合理的功能区划，有助于推动区域经济一体化，优化区域发展布局。
### 知识点一：功能区划的目的与重要性
京津冀功能区划的主要目的是为了协调区域内部的经济发展，优化资源配置，推动产业升级和环境保护，最终实现区域一体化发展。通过合理划分功能区，可以有效地指导区域内各地区依据自身特色，发展优势产业，同时减少各地区间的重复建设和恶性竞争，实现可持续发展。
### 知识点二：功能区划的分类
在描述中提到的"优化开发区、城市发展新区、城市功能拓展区、农产品主产区、生态功能区、首都功能核心区、重点开发区"是对京津冀地区进行的功能划分。下面是这些功能区的基本含义：
1. **优化开发区**：通常指的是经济较为发达、产业结构优化的区域，应重点发展高新技术产业和现代服务业，推动经济转型升级。
2. **城市发展新区**：旨在推动区域城市化的区域，主要通过基础设施建设和产业布局，促进人口和产业的集聚，打造新的经济增长点。
3. **城市功能拓展区**：这些区域主要承担城市扩展的职能，通过完善城市功能，承接中心城区非核心功能的疏解。
4. **农产品主产区**：顾名思义，是指农业产业集中的区域，重点发展农业生产和农产品加工，保障国家粮食安全和重要农产品的供给。
5. **生态功能区**：这部分地区需要重点保护生态环境，实施生态修复和保护措施，确保生态安全。
6. **首都功能核心区**：以北京为中心，发挥政治、文化、国际交流和科技创新中心的作用。
7. **重点开发区**：主要指具有区位优势、资源禀赋和开发潜力的区域，鼓励和支持其快速发展。
### 知识点三：ArcGIS与SHP数据
ArcGIS是一款专业的地理信息系统软件，广泛应用于地图制作、地理分析和管理。在这个标题中提到的SHP数据指的是Shapefile格式的文件，这是一种常用的GIS矢量数据格式，由Esri公司开发。
- **京津冀功能区划.dbf**：DBF文件存储了空间数据的属性信息，包括各功能区的具体属性特征，如名称、代码、分类等。
- **京津冀功能区划.prj**：PRJ文件包含空间数据的坐标系统和投影信息，它定义了地理数据的位置和地图的展示方式。
- **京津冀功能区划.sbn与.sbx**：这两种文件是索引文件，用于加速地图数据的检索和显示。
- **京津冀功能区划.shp**：是Shapefile格式的主要文件，存储了地理空间信息，包括点、线、面等矢量图形。
- **京津冀功能区划.shx**：索引文件，存储了Shapefile的几何特征和位置信息。
通过对这些SHP文件的分析和操作，可以进行京津冀功能区的可视化展示、空间分析以及决策支持等。GIS专家可以通过ArcGIS工具对这些数据进行编辑、分析和制图，实现对京津冀功能区划的详细研究。
### 知识点四：京津冀一体化战略
京津冀一体化是国家提出的一项重大战略，其核心目的是通过加强区域间的协同合作，优化区域内的产业布局，推动京津冀三地资源互补、协调发展。功能区划是实现区域一体化的基础工作之一，通过科学合理的规划，确保各个功能区在一体化发展中的作用得到充分发挥。
### 结语
综上所述，京津冀功能区划不仅关系到区域经济的优化发展，还关联到国家整体的战略布局。通过ArcGIS和SHP数据的综合应用，可以实现对京津冀功能区划的精确分析和有效管理，为相关政策制定和实施提供科学依据。这不仅是一个技术问题，更是涉及经济、社会、环境等多方面因素的综合课题。
ILITEK驱动开发实战：Linux内核I2C通信技巧与性能提升策略
# 摘要
随着物联网与嵌入式技术的快速发展，Linux内核的I2C通信协议和ILITEK驱动开发成为技术热点。本文首先概述了Linux内核I2C通信协议与框架，分析了其基础、子系统架构和通信流程。接着，通过实战技巧章节深入探讨了ILITEK驱动开发的需求、实践和调试测试方法。之后，文章聚焦于I2C通信性能优化
