frameset在jsp页面制作导航栏详解

最新推荐文章于 2024-07-22 06:47:56 发布
最新推荐文章于 2024-07-22 06:47:56 发布
阅读量1.2w 收藏 64
点赞数 10
分类专栏： 前端相关 java基础 文章标签： frameset简单的实现导航栏 frameset在jsp页面实现重样式
这是自己创建的博客,欢迎大家访问--https://zhaoguangxiao.top
本文链接：https://blog.csdn.net/qq_40646143/article/details/79326797
版权

main.jsp

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>电子商务后台管理页面</title>

<frameset rows="14%,84%">
  <frame src="${pageContext.request.contextPath}/jsp/top/top.jsp">    //头部的jsp文件
  <frameset cols="15%,75%">
    <frame src="${pageContext.request.contextPath}/jsp/left.jsp">       //左边的jsp文件
    <frame src="${pageContext.request.contextPath}/jsp/right/selectall.jsp" name="rightframe">   //右边的jsp页面
  </frameset>
</frameset>
</head>

left.jsp

                         <ul class="mList">       
                          <li>
                        <h3><span>+</span>用户管理</h3>
                         <dl>
                         <dd><a href="right/yonghu.jsp" target ="rightframe">用户列表</a></dd>
                         </dl>
                        </li></ul>


selectall.jsp 是默认显示的页面,当你不点击左边的导航栏自动显示内容.

		
		
<div class="title">产品管理</div>
                <div class="details">
                    <div class="details_operation clearfix">
                        <div class="bui_select">
                            <input type="button" value="添  加" class="add">
                        </div>
                        <div class="fr">
                            <div class="text">
                                <span>商品名称：</span>
                                <div class="bui_select">
                                    <select name="" id="" class="select">
                                        <option value="1">测试内容</option>
                                        <option value="1">测试内容</option>
                                        <option value="1">测试内容</option>
                                    </select>
                                </div>
                            </div>
                            <div class="text">
                                <span>上架时间：</span>
                                <div class="bui_select">
                                    <select name="" id="" class="select">
                                        <option value="1">测试内容</option>
                                        <option value="1">测试内容</option>
                                        <option value="1">测试内容</option>
                                    </select>
                                </div>
                            </div>
                            <div class="text">
                                <span>搜索</span>
                                <input type="text" value="" class="search">
                            </div>
                        </div>
                    </div>
                    <!--表格-->
                    <table class="table" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr>
                                <th width="15%">编号</th>
                                <th width="25%">标题</th>
                                <th width="35%">来源</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <!--这里的id和for里面的c1 需要循环出来-->
                                <td><input type="checkbox" id="c1" class="check"><label for="c1" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" id="c2" class="check"><label for="c2" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" id="c3" class="check"><label for="c3" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" id="c4" class="check"><label for="c4" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" id="c5" class="check"><label for="c5" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" id="c6" class="check"><label for="c6" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" id="c7" class="check"><label for="c7" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" id="c8" class="check"><label for="c8" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" id="c9" class="check"><label for="c9" class="label">001</label></td>
                                <td>后台设计</td>
                                <td>测试内容</td>
                                <td align="center"><input type="button" value="修改" class="btn"><input type="button" value="删除" class="btn"></td>
                            </tr>
                        </tbody>
                    </table>
 </div>

yonghu.jsp  是你点击用户管理时自动跳转到yonghu.jsp

<body>
yonghu
</body>

我的jsp目录是这样的  需要注意的是jsp不能卸载web-InF下面



实现的效果如图  




当点击用户列表



NULL_ZGX
关注
专栏目录
jsp实现导航栏
weixin_33795093的博客
04-22 1万+
一．frameset实现导航栏在web开发中必不可少，其中利用frameset来实现是一种比较常见的方法。frameset通过target可将相关的页面连接起来，实现导航。实际开发中注意target的对应关系即可。效果图如下：主导航区top.jsp左侧分导航left.jsp内容区main.jsp页脚down.jsp1.index.jsp 纵向：主导航，主页面，页脚三块....
网页左侧菜单栏设计
热门推荐
twh6666的博客
03-31 1万+
    今天刚学了js的主要内容和HTML网页布局，开始着手写个菜单栏。下面先放上实际写出来的效果图。一目了然，这个菜单栏要达到的要求是：鼠标点击菜单的时候，对应的内容会显示出来，而其他菜单的内容则不显示。    简介这个菜单栏运用的主要知识点：CSS中display 和js中onclick；display：主要属性有none,block,inline...none属性表示隐藏该标签，block和...
JavaScript 动态网页实例 —— 基本菜单的设计
最新发布
cccloveforever的博客
07-22 1077
本节实例给出基本的下拉菜单的实现方法。用户可以在下拉列表中选择一个链接，单击该链接后，将跳转至相应的链接页面。
jsp左侧菜单栏_jsp 实现简单的左边菜单
weixin_39640262的博客
12-19 3472
&lt%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %&gt&lt%@ include file="../golbal/connection.jsp"%&gt&lthtml&gt&lthead&a...
jsp简洁左侧面板
Devil_May_Crying的博客
05-20 3708
在修改静态的样式时，熟悉jQuery的某些常用的方法可以方便很多时候的思路。动态的数据交互或者是简单的动画效果都和静态不一样。很大程度上我们需要提炼其中一部分代码片段作为一个干净的模板，适合不同的调用。
jsp动态导航栏
weixin_33971977的博客
04-11 1501
站点页面的导航栏是从数据库中生成出来的，所以在界面上展示导航栏时，要从数据库中读取出来，但不能每次显示一个页面都从数据库中读。这样就非常浪费性能。应该考虑把导航栏放到一个缓存中。如：session、application、memcache等。 对于訪问量小的站点。也能够使用例如以下方法： @Component public class NavigationUtil { publi...
jsp 中将一部分抽取出来，做成公共部件，比如导航栏
许诗宇的博客
09-08 5662
比如说导航栏，所有的页面都需要，如果要改的话，得一个个改，很麻烦，就把他们做成一个单独的jsp，引用即可 比如一部分html的代码，把它放在一个新成立的jsp的body内，再在原来的地方用jsp include标签引用，即可 &amp;lt;jsp:include page=&quot;side_buyer.jsp&quot;&amp;gt;&amp;lt;/jsp:include&amp;gt; &amp;lt;%@ page langu
JSP使用＜%@include file=“header.jsp“ %＞实现导航栏复用
小绵杨
11-18 2791
问题 不同页面使用同一个导航栏，如果每一次都写一遍，很麻烦。参考vue中的路由，实现组件复用。 解决 <%@include file="header.jsp" %> 其中header.jsp就是导航栏： 主页index.jsp代码： 测试
frame也frameset
08-03 268
谓框架便是网页画面分成几个框窗，同时取得多个 URL。只需要 即可，面所有框架标记需要放在一个总起的 html 档，这个档案只记录了该框架如何分割 ，不会显示任何资料，所以不必放入 标记，浏览这框架必须读取这档案 面不是其他框窗的档案。 是用来划分框窗，每一窗框由一个 标
JSP frameset
leidijava的专栏
01-25 7034
此架构包含了三个页面top.jsp, left.jsp, body.jsp 当点击left.jsp页面中的“提交”按钮时，右边的body.jsp页面换成另一个页面即userLst.jsp 则在struts跳转路径中配置为： /xyjsp/userLst.jsp   即可
导航页（frameset）
Meteor31的博客
10-15 378
展示页面： <!DOCTYPE html> <html> <!--导航页--!> <frameset cols="120,*"> <frame src="target.html" /> <frame src="index.html" name="content"/> </frameset> </html> 导航页面（target.html）属性target的值为展示页面中name的值 <!DOCTYPE
jsp导航条 下拉菜单
11-11
jsp有下拉的导航条 自己写的，仅供参考，不好请留言
JSP页面导航条的快速生成(生成源码,baidu可以搜索到)
07-23
利用本类可以快速生成导航条,并且可以被baidu 搜索到. 希望大家喜欢.总共包含三个文件.
frameset的应用：编写了几个jsp页面
10-17
frameset的应用：编写了几个jsp页面 1.<frameset>：定义一个框架集，它被用来组织多个窗口。每个窗口都是一个独立的html界面。 2.<frameset>有两个参数，cols和rows。cols：列的数目和尺寸。rows：行的...
html页面嵌套使用示例(frameset使用方法)
09-28
在HTML中，页面嵌套通常通过使用`frameset`元素实现，这是一种创建多窗口布局的方式，允许网页内容被分割成不同的区域，每个区域可以独立显示不同的网页。`frameset`是HTML4的一个特性，但在HTML5中已被废弃，但仍然...
用frameset实现复杂的页面布局技巧小结
09-22
这展示了frameset与frame标签的协同工作，允许页面的各个部分进行独立的导航与内容更新。 综上所述，虽然frameset标签在现代网页设计中已不常用，但理解其原理与使用方法对于学习和维护老旧的网页仍有重要意义。...
js 跳出页面的frameset框架示例介绍
10-26
在现代Web开发中，框架（frameset）曾是一种流行的页面布局技术，用于将浏览器窗口分割成几个独立的部分，每个部分可以加载不同的页面。然而，随着HTML5和CSS3的兴起，框架结构逐渐被更为先进的页面布局技术（如...
Frameset_详解
10-05
- **固定导航栏**：保持导航菜单始终可见，便于用户在页面间跳转。 #### 五、Frameset 的局限性 随着Web技术的发展，`Frameset`逐渐暴露出一些问题，如SEO不友好、维护困难、用户体验不佳等。现代Web开发更倾向于...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值