【HTML】HTML作业

您所在的位置:网站首页 地铁售票系统界面设计图片高清 【HTML】HTML作业

【HTML】HTML作业

2024-07-14 01:50| 来源: 网络整理| 查看: 265

1、引言

设计结课作业,课程设计无处下手,网页要求的总数量太多?没有合适的模板?数据库,java,python,vue,html作业复杂工程量过大?毕设毫无头绪等等一系列问题。你想要解决的问题,在微信公众号“coding加油站”中全部会得到解决

2、作品介绍

影院售系统采用html,css技术来实现,符合所学知识体系,适用于常见的作业以及课程设计,需要获取更多的作品,请关注微信公众号:coding加油站,获取,如需更多资料,可在微信后台留言。欢迎大家来提问,交流学习。

2.1、作品简介方面 

电影院售票界面采用常规方式来实现,符合绝大部分的要求。代码配置有相关文档讲解,如需从代码中学到知识点,那么这个作品将是你的不二之选,

2.1.1、页面布局思想:

利用一个大的div包括整个页面,然后从中间分开,左边一个div和右边一个div,设置宽度,高度可以不设置,然后利用浮动,就可以实现页面布局,当然如果没有设置给父盒子设置高度的话,需要清除浮动,本次使用的clearfix类名,编写css样式清除浮动,左边盒子可以分成三个部分,头部、中间(使用表格)、底部;右边,分成两个部分,第一部分要继续细分,成左右两部分,然后要再次利用浮动完成布局,第二部分用div向下排列就可以了。

2.2、作品二次开发工具

此作品代码相对简单,基本使用课堂中所学知识点来完成,只需要修改相关的介绍文字,一些图片,就可以改为自己独一无二的代码,网页作品下载后可使用任意编辑软件(例如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用),java,python等相关作业使用自己常使用的工具亦可完成相关二次开发。

2.3、作品技术介绍

html网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面,部分采用了javascript来做校验。 使用html5,以及css3等相关技术完成技术的布局,在本作品中,会使用常见的布局,常见的浮动布局,flex布局都会有使用到哦。同时在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识,同时使用了一些js的相关知识。例如使用到了dom,和bom来获取浏览器的相关api,同时使用css对样式进行相关的美化,使得界面更加符合网页设计

3、作品演示

【coding加油站】HTML设计--电影院售票界面

4、作品图片

相关代码:

电影售票界面 屏幕 已选座位 可选座位 售出座位 中文名:coding加油站 英文名:Lost in Russia 剧情:喜剧 版本:中文2D 中国大陆/126分钟 2020.02 影院:万达影城 影厅:8号影厅 场次:2020.05.18(周一)20:00 座位: 已选择个座位,再次点击可取消,您最多只能买5张票!

单价:¥38.00

总价:¥0.00

确认信息,下单

选座实现原理:

当我们座位选中时,我们就利用jQuery给当前座位添加选中的类名,当座位又取消选中时,我们就把添加的类名移除掉。首先要获取左边座位的索引,然后对应索引进行判断,已得到行和列,利用jQuery动态的创建一个座位,把行和列加到座位里面去,然后把创建的座位动态的显示到页面上。

定义count为已选座位的个数,countPrice为总价钱,利用公式:总价钱=单价*已选座位的个数,算出总价的金额。

总结

以上就是本次项目的全部内容,需要交流或者获取代码请搜索公众号:coding加油站,获取



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3