1、引言
设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
12306前端系统采用html5，css3技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。
2.1、作品简介方面
12306前端系统采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识，同时使用了一些js的相关知识。例如使用到了dom，和bom来获取浏览器的相关api，同时使用css对样式进行相关的美化，使得界面更加符合网页设计
3、作品演示
首页：
相关代码：
<div class="tl1">
<div class="logo">
<img class="tl1_img" src="./imgs/logo@2x.png" height="50" alt="logo">
</div>
<div class="tl1_sh">
<input class="tl1_sh_inp" type="text" placeholder="搜索车票、餐饮、常旅客、相关">
<a href=""><i class="fas fa-search"></i></a>
<div class="tl1_sh_list">
<ul>
<li><a href="#" class="tl1_sh_a">爱心模式</a></li>
<li class="tl1_sh_a2">|</li>
<li class="">
<a href="#" class="tl1_sh_a xl">
Eenlish
<div class="yy">
<span>简体中文</span>
<span>English</span>
</div>
</a>
</li>
<li class="tl1_sh_a2">|</li>
<li>
<a href="#" class="tl1_sh_a wd">
我的12306
<div class="wd12306">
<span>火车票订单</span><br>
<span>候补订单</span><br>
<span>计次•定期票订单</span><br>
<span>约号订单</span><br>
<span>本人车票</span><br>
<div class="x"></div>
<span>我的餐饮•特产</span><br>
<span>我的保险</span><br>
<span>我的会员</span><br>
<div class="x"></div>
<span>查看个人信息</span><br>
<span>账户安全</span><br>
<div class="x"></div>
<span>乘车人</span><br>
<span>地址管理</span><br>
<div class="x"></div>
<span>温馨服务查询</span><br>
</div>
</a>
</li>
<li class="tl1_sh_a2">|</li>
<li><a href="#" class="tl1_sh_a1">登录</a></li>
<li><a href="#" class="tl1_sh_a1">注册</a></li>
</ul>
</div>
</div>
</div> 轮播页面：
相关代码：
<!-- 导航 -->
<div class="tl2">
<div class="tl2_cen">
<ul>
<li class="tl2_cen_first"><a href="#">首页</a></li>
<li>
<a class=".tl2_cen_second qq" href="#">
车票∨
<div class="one">
<div class="goumai">
<h3>购买</h3>
<span class="a1">单程</span>
<span class="a2">往返</span>
<div class="sx1"></div>
<span class="a3">中转换乘</span>
<span class="a4">计次•定期票</span>
<div class="sx2"></div>
</div>
<div class="biangeng">
<h3>变更</h3>
<span class="b1">退票</span>
<span class="b2">变更到站</span>
<div class="sx3"></div>
<span class="b3">改签</span>
<div class="sx4"></div>
</div>
<div class="gengduo">
<h3>更多</h3>
<span class="c1">中铁银通卡</span>
<span class="c2">广九直通车</span>
<div class="sx5"></div>
<span class="c3">市郊快速铁路</span>
<span class="c4">国际列车</span>
</div>
</div>
</a>
</li>
<li>
<a class=".tl2_cen_second ww" href="#">
团购服务∨
<div class="two">
<div class="wugongrenyuan">
<span class="d1">务工人员</span>
<div class="sx6"></div>
<span class="d2">学生团体</span>
<div class="sx7"></div>
</div>
</div>
</a>
</li>
<li>
<a class=".tl2_cen_second ee" href="#">
会员服务∨
<div class="three">
<div class="huiyuanguanli">
<span class="e1">会员管理</span>
<div class="sx8"></div>
<span class="e2">积分账户</span>
<div class="sx9"></div>
<span class="e3">积分兑换</span>
<div class="sx10"></div>
<span class="e4">会员专享</span>
<div class="sx11"></div>
<span class="e5">会员中心</span>
</div>
</div>
</a>
</li>
<li>
<a class=".tl2_cen_second rr" href="#">
车站服务∨
<div class="four">
<div class="zdlkyy">
<span class="f1">重点旅客预约</span>
<span class="f2">遗失物品查找</span>
<div class="sx12"></div>
<span class="f3">便民托运</span>
<span class="f4">重点旅客预约</span>
<div class="sx13"></div>
</div>
<div class="gxqc">
<span class="g1">共享汽车</span>
<span class="g2">定制接送</span>
<div class="sx14"></div>
<span class="g3">车站引导</span>
<span class="g4">车站风采</span>
<div class="sx15"></div>
</div>
</div>
</a>
</li>
<li>
<a class=".tl2_cen_second tt" href="#">
商旅服务∨
<div class="five">
<div class="cytc">
<span class="h1">餐饮•特产</span>
<div class="sx16"></div>
<span class="h2">旅游</span>
<div class="sx17"></div>
<span class="h3">保险</span>
<div class="sx18"></div>
</div>
</div>
</a>
</li>
<li>
<a class=".tl2_cen_second yy" href="#">
出行指南∨
<div class="six">
<div class="cjwt">
<h3>常见问题</h3>
<span class="i1">车票</span>
<span class="i2">改签、变更到站</span>
<span class="i5">更多>></span>
<div class="sx19"></div>
<span class="i3">购票</span>
<span class="i4">计次•定期退票</span>
<div class="sx20"></div>
</div>
<div class="lkxz">
<h3>旅客须知</h3>
<span class="j1">铁路电子客票</span>
<span class="j2">身份核验</span>
<span class="j3">更多>></span>
<div class="sx21"></div>
<div class="sx22"></div>
</div>
<div class="xgzc">
<h3>相关章程</h3>
<span class="k1">铁路互联网售票暂行办法</span>
<span class="k2">铁路旅客运输规程</span>
<span class="k5">更多>></span>
<div class="sx23"></div>
<span class="k3">铁路旅客禁止、限制携...</span>
<span class="k4">广深港高速铁路跨境旅客...</span>
</div>
</div>
</a>
</li>
<li>
<a class=".tl2_cen_second uu" href="#">
信息查询∨
<div class="seven">
<div class="cycx">
<h3>常用查询</h3>
<span class="l1">正晚点</span>
<span class="l2">天气</span>
<div class="sx24"></div>
<span class="l3">时刻表</span>
<span class="l4">交通查询</span>
<div class="sx25"></div>
</div>
<div class="gbpj">
<span class="m1">公布票价</span>
<span class="m2">代售点</span>
<div class="sx26"></div>
<span class="m3">检票口</span>
<span class="m4">客服电话</span>
<div class="sx27"></div>
</div>
<div class="qssj">
<span class="n1">起售时间</span>
<span class="n2">列车状态</span>
<div class="sx28"></div>
<span class="n3">最新发布</span>
<span class="n4">信用信息</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 轮播图 -->
<div class="tl3">
<div id="outer" class="tl3_1">
<div class="tl3_2">
<ul class="tl3_cp">
<li class="cp">
<a href="#" class="ys">
<i class="fas fa-train-subway"></i>
车票
</a>
</li>
<li>
<a href="#">
<i class="fas fa-magnifying-glass"></i>
常用查询
</a>
</li>
<li>
<a href="">
<i class="fas fa-utensils"></i>
订餐
</a>
</li>
</ul>
<ul class="tl3_cpxx">
<li>
<a href="#">
<i class="fa fa-share"></i>
单程
</a>
</li>
<li>
<a href="#">
<i class="fa fa-reply"></i>
往返
</a>
</li>
<li>
<a href="#">
<i class="fa fa-refresh"></i>
中转换乘
</a>
</li>
<li class="xhx">
<a href="#" class="tgq">
<i class="fa fa-edit"></i>
退改签
</a>
</li>
</ul>
<div class="tl3_dl">
<form action="">
查询类型
<input type="radio" name="sex" value="male">订票日期
<input type="radio" name="sex" value="female">乘车日期 <br><br><br>
开始日期 <input class="text" type="text"><br><br><br>
结束日期 <input class="text" type="text"><br><br><br>
关键字 <input class="text" type="text"
placeholder="订单号/车次/乘车姓名"><br><br><br>
<button>查询</button>
</form>
</div>
</div>
</div>
</div>总结
以上就是本次项目的全部内容，需要交流或者获取代码请关注微信公众号：coding加油站获取
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
