【web课程设计网页规划与设计】基于HTML+CSS+JavaScript火车票网上预订系统网站(4个页面)

news2025/4/16 3:11:04

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码: 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

  • 一、👨‍🎓网站题目
  • 二、✍️网站描述
  • 三、📚网站介绍
  • 四、💠网站演示
  • 五、⚙️ 网站代码
    • 🧱HTML结构代码
  • 六、🥇 如何让学习不再盲目
  • 七、🎁更多干货


一、👨‍🎓网站题目

🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。


二、✍️网站描述

🏷️HTML网页设计,采用DIV+CSS布局,共有多个页面,排版整洁,内容丰富,主题鲜明,首页使用CSS排版比较丰富,色彩鲜明有活力,导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到二三级页面,有多页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 可选有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。

📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。

📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。


四、💠网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、⚙️ 网站代码

🧱HTML结构代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>熊二订票系统</title>
<link rel="stylesheet" type="text/css" href="css/home.css" />
</head>

<body>
<!--head-->
   <div class="header">
   		<div class="inner">
   			<div class="logo">
   <a href="index.html" title="火车票"><img src="picture/logo.png" width="350" height="60"/></a>
   			</div>
   			<div class="headlink">
   				<a href="login.html">登录</a>
   				&nbsp;|&nbsp;
   				<a href="zhuce.html">注册</a>
                &nbsp;|&nbsp;
			  <a href="login.html">▶注销</a>
   				
   				
   			</div>
   		</div>
   </div>
<!--head end-->
   <!--middle-->
<div class="middle">
   <div class="cont">
   <!--菜单-->
       <div class="class">
         <ul>
           <h3 style="color:#FFF;">栏目分类</h3>
           <a href="#" class="net"><li>申请订票</li></a>
           <a href="#" class="_all2"><li>火车时刻表</li></a>
           <a href="#" class="_all3"><li>我的火车票</li></a>
           <a href="#" class="_all4"><li>修改密码</li></a>
           <a href="#" class="_all5"><li>联系我们</li></a>
         </ul>
       </div>
       <!--菜单 end-->
       <!--指南-->
     <div class="class_a">
      <!--申请订票-->
           <div class="all1">
             <h4 style="color:#fff">申请订票</h4>
             <form runat="server" method="get" action="">
             <table width="800" height="300" style="margin:auto; margin-top:50px; border:1px solid #FFF;" border="1" cellpadding="0" cellspacing="0" >
  <tr>
    <td width="120">姓名:</td>
    <td width="277.6"><input style="width:250px; background:none;" type="text" /><span>*</span></td>
    <td width="120">身份证:</td>
    <td width="277.6"><input style="width:250px; background:none;" type="text" /><span>*</span></td>
  </tr>
  <tr>
    <td width="120">联系电话:</td>
     <td width="277.6"><input style="width:250px; background:none;" type="text" /><span>*</span></td>
    <td width="120">备用电话:</td>
    <td  width="277.6"><input style="width:250px; background:none;" type="text" /></td>
  </tr>
  <tr>
    <td width="120">车次:</td>
    <td width="277.6"><select  style="width:250px; background:none; border:0; outline:none; color:#CCC">
      <option>C6402</option>
      <option>G8708</option>
        <option>G8715</option>
       
    </select><span>*</span></td>
    <td width="120">起点站:</td>
    <td><input style="width:250px; background:none;" type="text" /><span>*</span></td>
  </tr>
  <tr>
    <td width="120">终点站:</td>
    <td><input style="width:250px; background:none;" type="text" /><span>*</span></td>
    <td width="120">出发日期:</td>
    <td><input  style="width:250px; background:none;" type="datetime-local" /><span>*</span></td>
  </tr>
  <tr>
    <td>备注:</td>
    <td colspan="3">
    <textarea placeholder="有需要请详细填写!" style="; color:#FFF; outline:none;resize:none;width:670px; height:70px; border:0; background:none;"   name="" cols="0" rows="0"></textarea></td>
    </tr>
</table>
<div class="tom" style="margin-top:20px;">
<input name="clear" style="width:80px; height:30px;" type="reset" value="清空" />

<input name="play" style="width:80px; height:30px; " type="submit" value="预定" />

</div>
<span style="float:right;">注:标注*为必填项!</span>
</form>                     
   </div>
  <!--申请订票 end--> 
  <!--火车时刻表-->
           <div class="all2">
           <h4 style="color:#fff">火车时刻表</h4>
        <iframe style="border:0; background:rgba(255,255,255,0.5);" scrolling="auto" src="http://www.chepiao100.com/application/views/statics/doc/demo/yupiao.php" width="1000" height="544"></iframe>
           </div>
   <!--火车时刻表--> 
    <!--我的火车票--> 
           <div class="all3">
           <h4 style="color:#fff">我的火车票</h4>
           
           </div>
         <!--我的火车票 end--> 
          <!--修改密码-->    
           <div class="all4" id="all4">
           <h4 style="color:#fff">修改密码</h4>
           </div>
           
            <!--修改密码 end--> 
             <!--联系我们--> 
           <div class="all5">
          <h4 style="color:#fff">&nbsp;&nbsp;联系我们</h4>
          
       
          </div>
             <!--联系我们 end--> 
         </div>
          <!--指南 end-->
   </div>
   </div>
   
   
   <!--middle end-->
<div class="foot">
      
     <p>
     火车订票版权所有
     <br />
     重庆工程学院
     </p>
    </div>

</body>
<script src="js/jquery.min.js"></script>
<script src="js/home.js"></script>

</html>




六、🥇 如何让学习不再盲目

21年程序员总结给编程菜鸟的16条忠告

  1. 入门期间不要盲目看太多书,找一本网上或身边有经验程序员推荐的教材,先系统的学习。
  2. 多看帮助文档,帮助文档就像一个游戏的玩法说明通关秘籍,该看就看别太自信。
  3. 菜鸟容易被对象、属性、方法等词汇迷惑?那是你连最基础知识都还没掌握。
  4. 不要忽视没一个看起来不起眼的问题,经常总结做到举一反三。
  5. 没积累足够知识和经验前,你是开发不出一个完整项目的。
  6. 把最新技术挂在嘴边,还不如把过时技术牢记心中。
  7. 活到老学到老,只有一招半式是闯不了江湖的。
  8. 看得懂的书,仔细看;看不懂的书,硬着头皮也要看完。
  9. 书读百遍其义自见,别指望读一遍就能掌握。
  10. 请把教程里的例子亲手实践下,即使案例中有完整源码。
  11. 把在教程中看到的有意义的例子扩充;并将其切实的运用到自己的工作中。
  12. 不要漏掉教程中任何一个习题——请全部做完并做好笔记。
  13. 水平是在不断的实践中完善和发展的,你与大牛差的只是经验的积累。
  14. 每学到一个难点的时候,尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。
  15. 做好保存源文件的习惯,这些都是你的知识积累。
  16. 遇到问题不要张口就问,要学会自己找答案,比如google、百度和w3cschool上都有很多编程相关资料,你只要输入关键字就能找到你的答案。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

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

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

相关文章

Part4_场景_第52章 场景描述第53章 柏林I:BVG场景第54章 柏林II:CEMDAP-Matsim-Cadyts方案

第52章 场景概述 本书的最后一部分总结了MATSIM场景,如图52.1中的地图所示,并在http://matsim.org/scolutions中列出。 尽管存在基于免费和公共数据的真实场景,如圣地亚哥或科特布斯场景(第84或66章),但由于数据隐私问题,许多场景是不公开的。 然而,了解适用于情景创建…

【STM32备忘录】二、FSMC做LCD控制器,使用stm32cube配置示例

文章目录1. FSMC框图2. 配置示例(1) cube配置(2) 代码参考*疑问1. FSMC框图 如果屏幕接口8位数据宽度访问&#xff0c;地址线FSMC_A[25:0], 一共26位&#xff0c;一个块22667108864Byte64MB&#xff0c;如果屏幕接口16位数据宽度访问&#xff0c;地址线FSMC_A[25:0], 一共26位&…

远程访问数据库,快解析助力疫情防控远程办公

当前&#xff0c;国内疫情形势不容乐观&#xff0c;企业的经营发展再一次面临巨大挑战。虽然“远程办公”早已不是新鲜词&#xff0c;但依然有大量企业没有做好随时切换到远程办公的准备。如遇疫情风险&#xff0c;企业运营很容易陷入瘫痪。 企业一般在内网部署服务器、视频监…

【Java并发入门】01 并发编程Bug的源头

一、根本原因 「CPU、内存、磁盘之间的速度差异」 为了能同时执行多个任务&#xff0c;CPU 发展出时间片轮转、多核等CPU 要从内存中读数据太慢了&#xff0c;所以给自己设置了缓存CPU 读磁盘更慢了&#xff0c;所以可以让该线程阻塞 二、直接原因 缓存导致的可见性问题 C…

函数 function

一、创建函数方法 1.基本语法 函数是引用数据类型 1.1有函数名称的叫具名函数 function 函数名称&#xff08;&#xff09;{ }&#xff1b; 调用函数&#xff1a; 函数名&#xff08;&#xff09;&#xff1b; <script>function fnl( ){var a 2;var b 5…

教你快速搭建微服务环境

目录 一、项目搭建 1.父项目搭建 2.子项目的搭建 二、项目展示 一、项目搭建 1.父项目搭建 步骤&#xff1a; 1 选择maven项目作为父项目&#xff0c;修改为1.8之后直接点击next 2 定义父项目的名称&#xff0c;修改Artifct Coordinates ---> GroupId 然后点击finsh就可…

现代营销杂志现代营销杂志社现代营销编辑部2022年第11期目录

财务金融《现代营销》投稿&#xff1a;cnqikantg126.com 我国中小企业货币资金管理分析 安宁; 1-3 企业财务管理转型路径探讨 秦春; 4-6 互联网背景下电商企业税务风险研究 何秋梅; 7-9 目标成本管理在企业经济管理中的应用分析 艾蕾梅; 10-12 关于我国发展…

CentOS7.9集群部署(配置hosts、集群免密、时间同步)

在上一篇我们介绍了如何在windows下安装虚拟机&#xff0c;在虚拟机上安装CentOS7.9&#xff0c;并且在系统安装完成后配置了固定ip和系统时间。 在食用本篇之前&#xff0c;如果上述操作没有做过&#xff0c;可以先移步 windows安装VMware虚拟机(附带CentOS7部署) 但是在分布式…

文献阅读总结(3)Neural Graph Collaborative Filtering

1、Introduction 左图u1&#xff0c;右图从左图的u1开始展开 图反应的信息&#xff1a; 1、从路径u1->i2->u2,可以反映出u1和u2的相似性&#xff1b; 2、u1和i4之间有两条路径&#xff0c;而u1和i5之间只有一条路径&#xff0c;可以反应u1对i4的兴趣比u1对i5的兴趣更高…

[附源码]Python计算机毕业设计Django-Steam游戏平台系统论文

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

【web网页设计期末课程大作业】基于HTML+CSS+JavaScript仿山东传媒职业学院网站

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

梯度下降原理+梯度消失和爆炸

梯度下降算法&#xff08;Gradient Descent)的原理和实现步骤 - 知乎 (zhihu.com) 梯度&#xff08;gradient&#xff09;到底是个什么东西&#xff1f;物理意义和数学意义分别是什么&#xff1f; - 知乎 (zhihu.com) 目的&#xff1a;最小化损失函数&#xff0c;一个优化的思…

流媒体传输 - RTSP 协议报文分析

在流媒体传输 - RTSP 协议中&#xff0c;我们分析 RTSP 协议交互的整个流程&#xff0c;在本篇文章中&#xff0c;我们对交互中携带的报文进行详细分析。 Request Request Request-Line ; Section 6.1*( general-header ; Section 5…

Qemu-KVM 网络性能优化实践

背景 在做优化之前&#xff0c;腾讯云上使用的母机单队列&#xff0c;性能只有14w pps。 已有的多队列版本&#xff0c;在20w pps左右&#xff0c;不是很理想。 主要问题性能 1 . 单队列成为性能瓶颈 物理主机环境&#xff0c;使用多队列已经有多年。 而在公有云上&#…

深度学习常见损失函数总结+Pytroch实现

文章目录一、引言二、损失函数1.均方差损失&#xff08;Mean Squared Error Loss&#xff09;2.平均绝对误差损失&#xff08;Mean Absolute Error Loss&#xff09;3.交叉熵&#xff08;Cross Entropy Loss&#xff09;&#xff08;1&#xff09;信息论中的熵a.熵b.相对熵&…

苹果系统(MacOS)无法下载Android SDK或下载缓慢解决办法

SDK管理器一般会在安装完Android Studio 的时候就弹出来.如果当时给关闭了或者是后续想找的话,Command, 或者通过菜单打开偏好设置以后 即可找到Android SDK的设置.与Jetbrains家族的产品方式一致.也可以直接在首屏页面上点More Actions 会出来SDK Manager 然后点击EDIT 找到缺…

DVWA靶场通关实战

DVWABrute Force&#xff08;暴力破解&#xff09;LowMediumHighImpossibleCommand Injection&#xff08;命令行注入&#xff09;LowMediumHighImpossibleCSRF&#xff08;跨站请求伪造&#xff09;LowMediumHighImpossible截至2022.11.24&#xff0c;DVWA共有十四个模块&…

TPS7A3301RGWR稳压器 AK4493EQ音频DAC,电路原理图

TPS7A33系列线性稳压器是负电压(–36V)&#xff0c;超低噪声&#xff08;16μVRMS&#xff0c;72dBPSRR&#xff09;线性稳压器&#xff0c;能够为最高1A负载供电。TPS7A33系列产品装有一个补偿金属氧化物半导体(CMOS)逻辑电平兼容使能引脚(EN)&#xff0c;此引脚允许可由用户定…

【MM小贴士】采购信息记录与工厂的相关性

【业务背景】在SAP的组织架构中&#xff0c;信息记录是一个非常重要的数据。这里面涉及到两个主数据&#xff1a;供应商主数据&物料主数据。 供应商主数据是一个集团性的主数据&#xff0c;无论哪个公司&#xff0c;哪个工厂&#xff0c;都用的同一个供应商代码&#xff0…

数仓开发之DWS层(二)

目录 五&#xff1a;用户域用户注册各窗口汇总表 5.1 主要任务 5.2 思路分析 5.3 图解 5.4 ClickHouse建表语句 六&#xff1a;交易域加购各窗口汇总表 6.1 主要任务 6.2 思路分析 6.3 图解 6.4 ClickHouse建表语句 七&#xff1a;交易域支付各窗口汇总表 7.1 主要任…