如何使用frame框架,将左边视为导航栏,右边作为链接界面

在浏览网页时,我们经常会看到一个导航条,当点击导航条上的项目时,相应网页会在显示区域变换显示。那么如何将一个界面中,左边设置为导航栏,点击项目链接,则右边显示相应的内容呢?使用frameset框架,并且设置链接标签<a>的target属性即可。

首先我们使用frame将主界面划分为3块,具体代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>框架</title><!--框架 注意不要放在body中--><frameset rows="20%,80%" noresize="noresize" ><frame src='top.html' name='top'/><frameset cols="20%,70%"><frame src='index.html' name="left"/><frame src="content.html" name='right'/></frameset></frameset></head>
</html>

效果如图: 框架用红色以标出。

要使左导航栏index与头部的导航栏top中的项目在右侧content区域显示,则需要在使用<a>链接时,使用target属性,设置链接显示的位置,代码如下:

左导航栏index.html中添加:

<a href='a.html' target="right">首页</a>
<a href='b.html' target="right">新闻</a>

头部导航栏top.html中添加:

<a href="user.html" target="right">个人中心</a>

则左导航栏index与头部的导航栏top中的项目可以在右侧content区域显示。

 

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

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

相关文章

面对大规模AI集成,企业为何迟迟犹豫?

来源&#xff1a;亿欧 概要&#xff1a;首先&#xff0c;需要全面了解您的业务目标、技术需求以及AI对客户和员工的影响。需要解决的问题是&#xff0c;大多数员工面临着接受人工智能程度方面的挑战与担忧。 人工智能是实现流程自动化、降低运营成本和进创新的重要手段。尽管AI…

类的初始化

加载 ----> 连接&#xff08;验证&#xff0c;准备&#xff0c;解析*&#xff09; ---->初始化 Java 虚拟机在首次主动使用类型时初始化它们。 主动使用&#xff08;6种&#xff09; 1、创建类的实例 2、调用类中声明的静态方法 3、操作类或者接口中声明的非常量静态…

用定时器控制灯的闪烁梯形图_用西门子PLC设计灯的闪烁的梯形图,就只要梯形图。...

展开全部使用特32313133353236313431303231363533e58685e5aeb931333431373235殊标志寄存器即可实现你想要的功能&#xff0c;如果想要设计出亮的时间固定、灭的时间也固定的闪烁效果比较复杂。SM0.5 该位提供了一个时钟脉冲&#xff0c;0.5 秒为1&#xff0c;0.5 秒为0&#xf…

如何进行模糊分页

使用模糊分页需要3个参数:关键字&#xff1a;key,当前页&#xff1a;page,查询内容个数&#xff1a;count 核心代码&#xff1a; //所有菜单列表分页private void foodList(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException …

PostgreSQL+安装及常见问题

postgresql-8.1-int.msi postgresql-8.1.msi &#xff08;点这个安装&#xff09; 前面一直用默认 1、到如下画面时注意&#xff1a; 重复账户时&#xff0c;报如下错误&#xff1a; 2、勾选所有连接都能使用该PostgreSQL 数据库&#xff0c;而不是仅仅支持 Localhost 3、…

post和get请求的区别

1.传送方式&#xff1a;get通过地址栏传输&#xff0c;post通过报文传输。 2.post请求无长度限制&#xff08;至少是理论上的&#xff09; &#xff1b;get有长度限制&#xff0c;最长不超过2048字节&#xff08;1024个汉字&#xff09; 3.Get/post 请求报文上的区别 get 和…

js 操作vuex数据_vue中使用vuex(超详细)

vuex是使用vue中必不可少的一部分,基于父子、兄弟组件,我们传值可能会很方便,但是如果是没有关联的组件之间要使用同一组数据,就显得很无能为力,那么vuex就很好的解决了我们这种问题,它相当于一个公共仓库,保存着所有组件都能共用的数据。 那么,我们一起来看看vue项目怎…

用脑科学支持人工智能

来源&#xff1a;中国科学报 概要&#xff1a;脑科学研究者正在揭示预测性运动控制神经机制&#xff0c;以脑科学基础研究支持人工智能发展并促进两大领域的深度融合。 最近&#xff0c;在国家自然科学基金&#xff08;项目号&#xff1a;31671075&#xff09;的支持下&#x…

mysql数据库进行更新、插入显示中文乱码问题

很多种情况下&#xff0c;从数据库中查询出来的内容中文显示正确&#xff0c;但是如果向数据库中插入或更新表时&#xff0c;会出现中文乱码问题&#xff0c;但英文显示正确&#xff0c;以下三种方式可以解决中文乱码问题。 1.数据库连接的配置文件中添加characterEncodingutf…

1进程 ppid_杀死僵尸进程,你需要这些神奇的Linux命令行

Linux高手&#xff0c;其实都是玩儿命令行很熟练的人。命令行的学习捷径Linux命令有许多强大的功能&#xff1a;从简单的磁盘操作、文件存取&#xff0c;到进行复杂的多媒体图像和流媒体文件的制作&#xff0c;都离不开命令行。在Linux的学习中&#xff0c;新手都会遇到这么一个…

PostgreSQL 常见操作

1、在命令行登录指定数据库 2、创建表 CREATE TABLE weather (city varchar(80),temp_lo int, -- low temperaturetemp_hi int, -- high temperatureprcp real, -- precipitationdate date ); …

大数据统计分析毕业设计_数据分析毕业设计 大数据可视化毕业设计

做大数据分析相关的毕业设计&#xff0c;有什么好的题目或方向推荐吗&#xff1f;毛台九大数据其它九大数据油业&#xff0c;三农&#xff0c;科研&#xff0c;人文&#xff0c;……打算用Python做毕业设计&#xff0c;可以做哪些方面的&#xff1f;Python做毕业设计&#xff0…

MultipartFile文件上传

一、配置文件&#xff1a; SpringMVC 用的是 的MultipartFile来进行文件上传 所以我们首先要配置MultipartResolver:用于处理表单中的file。在springmvc.xml中进行配置&#xff0c;目录结构如下&#xff1a; <!-- 配置MultipartResolver 用于文件上传 使用spring的CommosMul…

一个简单的 iBatis 实现——完整示例

表和数据&#xff1a; CREATE TABLE weather (city varchar(80),temp_lo int, -- low temperaturetemp_hi int, -- high temperatureprcp real, -- average temperaturedate date );insert int…

测绘技术设计规定最新版_公示 | 29家单位申报甲级测绘资质审查意见

关于北京同创天成工程勘测有限公司等29家单位申报甲级测绘资质审查意见的公示  根据《中华人民共和国测绘法》和《测绘资质管理规定》《测绘资质分级标准》(国测管发〔2014〕31号)&#xff0c;我部对北京同创天成工程勘测有限公司、北京麦格天宝科技股份有限公司、中友四达(北…

智能驾驶时代已经到来

来源&#xff1a;中国科学报 概要&#xff1a;智能化、电动化、轻量化&#xff0c;无疑是被业界公认的汽车的三大发展方向。其中&#xff0c;汽车的智能化&#xff0c;或者说智能驾驶最为引人关注。 智能化、电动化、轻量化&#xff0c;无疑是被业界公认的汽车的三大发展方向。…

@requestparam @param @pathvariable @requestbody的区别

requestParam注解 用来获取前台传递过来的参数&#xff0c;例如获取以下链接的参数&#xff1a; http://api.nc.com/api/item/category/list?pid0 public String Demo1(RequestParam String pid){ System.out.println(“链接中请求参数的id&#xff1a;”pid); return null; }…

PostgreSQL 的一个简单连接和查询操作——示例

表和数据&#xff1a; CREATE TABLE weather (city varchar(80),temp_lo int, -- low temperaturetemp_hi int, -- high temperatureprcp real, -- average temperaturedate date );insert int…

8s nfs 挂载文件_Kubernetes集群使用网络存储NFS

NFS存储NFS即网络文件系统Network File System&#xff0c;它是一种分布式文件系统协议&#xff0c;最初是由Sun MicroSystems公司开发的类Unix操作系统之上的一款经典网络存储方案&#xff0c;其功能是在允许客户端主机可以像访问本地存储一样通过网络访问服务端文件。Kuberne…