社区
HTML5
帖子详情
如下图所示的html5页面,中间部分的左边导航用什么标签?右侧内容用什么标签来实现:点击左侧每个菜单项,右侧显示相应内容呀?
zhou410527
2016-07-12 10:01:20
在这个图中,顶部信息用header标签来实现,底部信息用footer标签来实现,那中间部分呢?
中间部分的左边导航(红色方框中)用什么标签?右侧内容(黑色方框中)用什么标签来实现呀?
我要实现的效果是:点击左侧每个菜单项(text1、reserve1、reserve2等),右侧显示相应内容呀?
...全文
1018
5
打赏
收藏
如下图所示的html5页面,中间部分的左边导航用什么标签?右侧内容用什么标签来实现:点击左侧每个菜单项,右侧显示相应内容呀?
在这个图中,顶部信息用header标签来实现,底部信息用footer标签来实现,那中间部分呢? 中间部分的左边导航(红色方框中)用什么标签?右侧内容(黑色方框中)用什么标签来实现呀? 我要实现的效果是:点击左侧每个菜单项(text1、reserve1、reserve2等),右侧显示相应内容呀?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
5 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
瑞卡哥哥
2016-07-13
打赏
举报
回复
不要想着 新的有什么好 什么好. 只有外行才会这么认为. 再好的页面也是一点一点拼凑起来的
瑞卡哥哥
2016-07-13
打赏
举报
回复
header footer 其实跟div 是一样的 只是可以写语义化代码
zhou410527
2016-07-12
打赏
举报
回复
引用 1 楼 who_is_xiaoming 的回复:
左侧div 右侧用个iframe
这是html4的做法。在html5中,用新标签应该能实现吧?
自由的刺猬
2016-07-12
打赏
举报
回复
左侧div 右侧用个iframe
自由的刺猬
2016-07-12
打赏
举报
回复
新标签 倒是不清楚呢
Vue和SpringBoot打造假日旅社管理系统
《Vue和SpringBoot打造假日旅社管理系统》课程,将讲解如何使用Vue和SpringBoot开发这个项目,手把手演示开发流程!附赠源码、文档、数据库脚本等全部资料,提供售后答疑。 课程简介本课程讲解的是《基于 Vue 和 SpringBoot 的假日旅社管理系统》,该系统支持民宿档案、民宿新闻、民宿预定、民宿评论这四大核心业务,适用于乡村民宿企业的民宿预定业务。系统给
每个
民宿档案提供一个唯一标识,对民宿预定、评论等各个环节进行快速批量的数据采集,确保游客及时掌握景区民宿的真实数据,方便游客进行民宿预定。另外系统还包括员工管理、组织机构管理、文件管理、权限管理功能,给旅社企业提供更个性化的民宿管理模式。假日旅社管理系统采用了基于角色的访问控制,角色和菜单关联,一个角色可以配置多个菜单权限;然后再将用户和角色关联,一位用户可以赋予多个角色。这样用户就可以根据角色拿到该有的菜单权限,更方便旅社企业的管理人员进行权限管控。 软件技术选型前端Vue:Vue 是构建前端界面的核心框架,本系统采用 2.6.14 版本。View UI:基于 Vue.js2.0 的组件库,本系统采用 4.7.0 版本。后端Spring Boot:构建系统核心逻辑的后端框架,本系统采用 2.7.0 版本。MyBatis / MyBatis Plus:后端连接数据库的框架,本系统采用 3.5.2 版本。数据库MySQL:本项目的主数据库,本系统采用 8.0.29 版本。Redis:本系统采用基于 Windows 版本的 Redis,用于
图
形验证码和用户菜单权限的临时存储,采用了 5.0.14 版本。开发环境VsCode:项目前端的开发工具,使用版本为 1.68.0。IntelliJ IDEA :项目后端的开发工具,使用版本为 2021.3.2。Jdk:Java 的开发环境,使用版本为 17.0.3.1。Maven:后端项目的打包工具,使用版本为 3.6.2。NodeJs:前端项目的开发环境,使用版本为 16.13.0。 软件架构分析基于 Vue 和 SpringBoot 的假日旅社管理系统包括了系统基础模块、民宿档案模块、民宿新闻模块、民宿预定模块、民宿评论模块这五大功能模块,其架构如下
图
所示
。 接下来,分别对五大模块进行详细介绍。系统基础模块系统基础模块,是用于支撑假日旅社管理系统的正常运行,这个模块包括了登陆注册模块、员工部门管理、菜单权限管理等。假日旅社管理系统支持用户使用账号、密码和
图
形验证码登陆,操作界面如下
图
所示
。 假日旅社管理系统支持用户使用手机号、姓名、密码和
图
形验证码注册,操作界面如下
图
所示
。 用户成功进入系统后,可进入到基于 Vue 和 SpringBoot 的假日旅社管理系统的首页,首页展示了当前登陆的地址、现在的时间和用户配置的常用模块,如下
图
所示
。 接着用户
点击
左侧
的用户管理,即可进入用户管理模块,用户管理模块的首页如下
图
所示
。 用户可以在这个模块对系统登陆用户的档案进行维护,包括添加新用户、删除用户、编辑用户、根据姓名/部门查询用户。用户可以进入部门管理模块,管理旅社的部门数据,如下
图
所示
。 同理用户可以进入到菜单管理模块,对系统的菜单进行管理,菜单管理模块的操作界面如下
图
所示
。 民宿档案模块第二个模块是民宿档案模块,民宿档案就是用来管理民宿的数据,民宿档案包括民宿的名称、面积、房号、房间类型、早餐情况、价格、备注等,以下是民宿档案模块的主界面。用户可以
点击
顶部的“新增”按钮,进入民宿档案添加界面,添加民宿档案数据,如下
图
所示
。 其中房间类型为下拉框单项选择,如下
图
所示
。还有早餐情况也是下拉单选,如下
图
所示
。 用户可以对现有的民宿档案数据进行编辑更新,只需
点击
每一行民宿档案数据的“编辑”按钮,即可进入民宿档案数据的编辑界面,如下
图
所示
。 用户也可以对不需要的民宿数据进行删除操作,用户
点击
删除时,系统会弹出二次确认弹框,如下
图
所示
。 民宿新闻模块第三个模块是民宿新闻模块,民宿新闻就是用来管理民宿的新闻资讯,包含的功能如下
所示
。 民宿新闻包括民宿的名称、面积、房号、房间类型、早餐情况、价格、备注等,以下是民宿新闻模块的主界面,其中的
图
片仅供测试样例使用。用户可以
点击
顶部的“新增”按钮,进入民宿新闻添加界面,添加民宿新闻数据,如下
图
所示
。 新闻描述字段采用了 ueditor 富文本编辑器,这是由百度 web 前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点,基于 MIT 开源协议,所有源代码可自由修改和使用。 用户可以对现有的民宿新闻数据进行编辑更新,只需
点击
每一行民宿新闻数据的“编辑”按钮,即可进入民宿新闻数据的编辑界面,如下
图
所示
。 民宿预定模块第四个模块是民宿预定模块,旅客可以在民宿预定模块中预定民宿,达到旅客的住宿目的,民宿预定模块包含的功能如下
所示
。民宿预定包括了预定民宿 ID、预定民宿名称、预定日期、下单时间、下单人 ID、下单人姓名、价格、是否付款、下单备注等字段,旅客首先进入民宿档案模块,可以看到每一行民宿数据都有一个预约按钮,如下
图
所示
。 如用户
点击
1 幢 102 民宿的预约按钮后,会弹出预约确认框,需要输入预约的日期,日期表单默认选择今日,如下
图
所示
。 旅客需要
点击
“确认预约”按钮,完成预约操作,系统给与“预约成功”提示,如下
图
所示
。 预约成功后,旅客可以从民宿预定模块中进行查询,如下
图
所示
。 最后旅客进行付款操作,
点击
每一行
右侧
的付款按钮,如下
图
所示
。支付完成后,系统将预定单的支付状态改为付款,预定流程结束,如下
图
所示
。 民宿评论模块 第五个模块是民宿预定模块,旅客可以在民宿预定结束后评论民宿,以帮助更多的人了解民宿,民宿评论模块包含的功能如下
所示
。 民宿评论包括了民宿名称、民宿 ID、评论时间、评论
内容
、评论人 ID、评论人姓名等字段,旅客首先进入民宿档案模块,可以看到每一行民宿数据都有一个评论按钮,如下
图
所示
。 旅客
点击
评论后,系统给与弹框反馈,如下
图
所示
。 用户输入评论
内容
后,
点击
确认评论按钮,即可完成评论操作,如下
图
所示
。 旅客评论后,即可在民宿评论模块中查看此评论数据,如下
图
所示
。 也可以在民宿模块中,双击民宿数据查看评论信息,如下
图
所示
。 项目总结本软件是基于 Vue 和 SpringBoot 的假日旅社管理系统,包含了民宿档案、民宿新闻、民宿预定、民宿评论这四个功能模块。 开发本系统的目的,就是为了帮助旅游景点的民宿企业提高民宿管理效率,降低人力成本,让旅游景点的民宿企业获得更多的经济效益。
html中
点击
左边
菜单右边
内容
切换
左边
菜单,
点击
左边
右边
内容
改变 作为新手, 拿到真的很棘手。 很多人想到的是用iframe, 其实我的第一感也是, 但是好像iframe正在被淘汰, 所以一直在寻找新方法。、 当然, 我还是先把iframe方法贴出来, 这个方法是适用于对js不熟悉,或者刚入前端不就的童鞋们。 我们公司要做一个这样的后台系统(如下
图
所示
); 第一次接触后台,而且还带有
图
表, 着实小
css三种方法
实现
:上面固定,
左侧
固定,
右侧
内容
可滚动
版权声明:本文为博主原创文章,未经博主允许不得转载。 本文要
实现
的效果为:头部固定,
左侧
固定,
右侧
内容
可滚动,如下
图
所示
: 下面是三种
实现
方法,其中html均为: <body> <div class="header"> </div> <div class="main"> <div class="side...
青铜修炼手册:Axure
左侧
点击
按钮,右边
显示
相关
内容
一、前言 嗨 大家好。今天我在画原型的时候遇到了题目说的那个问题,然后在查了相关的资料之后找到比较好的方法,而且我觉得这个交互方式是比较常见和重要的,所以想在这里做个分享,废话不多说,马上开始吧。 二、
实现
步骤 1.首先现在画布
左侧
添加3个矩形原件,大小为150*400,画布
右侧
也添加一个矩形原件,大小为500*400,如下
图
所示
: 2.为画布
左侧
三个矩形分别填写红色、蓝色、绿色...
Vue - [完整源码]
实现
分类菜单 + 轮播
图
组合布局效果,类似
左侧
菜单与
右侧
轮播
图
连接在一起的效果(当鼠标移入菜单时,侧边出现子菜单列表)常见于商城系统,示例代码注释详细开箱即用!
vue
左侧
菜单分类盖在
右侧
轮播
图
之上的效果,vue css
实现
分类菜单+轮播
图
合在一起效果,vue仿小米商城的
导航
及轮播
图
拼在一起的效果,vue nuxt
左侧
分类菜单
右侧
轮播
图
的组合布局,css
实现
左边
菜单分类右边轮播
图
,vue css
左侧
分类
导航
菜单和
右侧
图
片轮播滚动布局代码,vue css
实现
带二级菜单的
图
片轮播动画,vue css如何
实现
垂直菜单,鼠标移入后出现二级菜单,vue有没有
左侧
是垂直菜单(鼠标移入后出现二级菜单)
右侧
是
图
片轮播
图
带左右箭头,vue css
左侧
菜单分类与
右侧
轮播
图
盖在一
HTML5
39,084
社区成员
5,548
社区内容
发帖
与我相关
我的任务
HTML5
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
复制链接
扫一扫
分享
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章