html+css制作简易12306页面
2024-04-15 12:14:27
制作匆忙很多代码细节没注意 图片都是官网扒的
源文件见GitHub
https://github.com/cw1322311203/12306
html页面
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>中国铁路12306</title><link rel="shortcut icon" href="https://www.12306.cn/index/images/favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="css/12306.css" /></head><body><div style="width: 1349px;height: auto;background-color:white;"><!--第一个div区域--><div style="width: 1349px;height: 80px;background-color: white;"><div style="margin-left:80px;margin-top:10px;float: left;background-color: white;"><img src="img/logo.jpg" /></div><div style="width: 950px;height: 60px;float: right;margin-top: 10px;background: url(img/火车图标.png) no-repeat 22px 10px;background-color: white;"><div style="width: 459px;height: 30px;background-color: cadetblue;margin-left: 130px;margin-top: 20px;"><input type="text" placeholder="搜索车票/餐饮/常旅客/相关规章" style="width:420px;height: 24px;float: left;"/><img src="img/searchbtn.jpg" style="float: left;"/></div><div style="float: right;position: relative;top:-28px;right: 60px;"><ul style="list-style-type: none;"><li style="float: left;"><font style="font-family: '微软雅黑';font-size: 10px;color: #3B9DFC;">陈卫的12306</font></li><li style="float: left;margin-left: 10px;"><img src="img/list_1.jpg"></li><li style="float: left;margin-left: 10px;"><img src="img/line.jpg"></li><li style="float: left;margin-left: 10px;"><a href="#" style="font-family:'微软雅黑';font-size:10px;color:black;text-decoration: none;">登录</a></li><li style="float: left;margin-left: 10px;"><a href="#" style="font-family:'微软雅黑';font-size:10px;color:black;text-decoration: none;">注册</a></li></ul></div></div></div><!--第二个div区域--><div style="width: 1349px;height: 40px;background-color: #3B99FC;"><div style="width:1200px;height: 40px;background-color: #3B99FC;;margin-left: 85px;margin: 0px auto;"><div style="width: 12.5%;height:40px;background-color: #2676E3;float: left;"><font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 60px;">首页</font></div><div style="width: 12.5%;height:40px;background-color: #3B99FC;float: left;"><font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">车票</font><img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" /></div><div style="width: 12.5%;height:40px;background-color: #3B99FC;float: left;"><font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">团购服务</font><img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" /></div><div style="width: 12.5%;height:40px;background-color: #3B99FC;float: left;"><font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">会员服务</font><img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" /></div><div style="width: 12.5%;height:40px;background-color: #3B99FC;float: left;"><font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">站车服务</font><img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" /></div><div style="width: 12.5%;height:40px;background-color:#3B99FC;float: left;"><font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">商旅服务</font><img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" /></div><div style="width: 12.5%;background-color:#3B99FC;float: left;"><font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">出行指南</font><img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" /></div><div style="width: 12.5%;background-color:#3B99FC;float: left;"><font style="font-family:'微软雅黑';font-size:15px;color: white;position: relative;top:10px;left: 50px;">信息查询</font><img src="img/act2.jpg" style="margin-left: 57px;position: relative;top:10px" /></div></div></div><!--第三个div区域--><div style="width: 1264px;height: 400px;background:url(img/餐饮特产1.png) no-repeat;background-color: blue;padding-left:85px;padding-top: 50px;"><div style="width: 515px;height: 355px;background-color: white"><!--左侧目录区域--><div style="width: 100px;height:355px;background: white;float: left;"><div style="width:72px;height: 118px;background: url(img/ticket.jpg) no-repeat 2px 48px;background-color:white;border-left: 3px #3B99FC solid;line-height: 118px;padding-left: 25px;font-family: '微软雅黑';color:#3B99FC;">车票</div><div style="width:73px;height: 118px;background: url(img/com_search.jpg) no-repeat 2px 48px;background-color: #3B99FC;margin-top:1px;line-height: 118px;padding-left: 27px;font-family: '微软雅黑';color:white;">常用查询</div><div style="width:73px;height: 118px;background: url(img/order.jpg) no-repeat 2px 48px;background-color: #3B99FC;margin-top:1px;line-height: 118px;padding-left: 27px;font-family: '微软雅黑';color:white;">订餐</div></div><!--右侧区域--><div style="width:370px;height: 270px;background-color: white;float: left;margin-top: 35px;margin-left: 22px;"><!--目录--><div style="width: 370px;height: 20px;background: url(img/list_2.jpg) no-repeat 15px;background-color: white;"><ul style="list-style-type: none;"><li style="float: left;font-size: 15px;font-family: '微软雅黑';">单程</li><li style="float: left;font-size: 15px;font-family: '微软雅黑';position: relative;left: 57px;">往返</li><li style="float: left;font-size: 15px;font-family: '微软雅黑';position: relative;left: 105px;">接续换乘</li><li style="float: left;font-size: 15px;font-family: '微软雅黑';position: relative;left: 145px;">退改签</li></ul></div><!--线--><div style="width: 370px;height: 30px;background:url(img/查询横线框.png) no-repeat;background-color: white;"></div><!--表--><div style="width:370px;height: 205px;background-color: white;"><div style="width: 345px;height: 32px;background-color: white;font-size: 15px;font-family: '微软雅黑';margin-left: 25px;">出发地 <input type="text" value=" 简拼/全拼/汉字" style="width:265px;height: 25px;background: url(img/from_to.jpg) no-repeat 240px;border:1px #DEDEDE solid ;" /></div><div style="width: 345px;height: 32px;background-color:white;font-size: 15px;font-family: '微软雅黑';margin-left: 25px;margin-top: 15px;">到达地 <input type="text" value=" 简拼/全拼/汉字" style="width:265px;height: 25px;background: url(img/from_to.jpg) no-repeat 240px;border:1px #DEDEDE solid ;" /></div><div style="width: 360px;height: 32px;background-color: white;font-size: 15px;font-family: '微软雅黑';margin-left: 10px;margin-top: 15px;">出发日期 <input type="text" value=" 2019-03-01" style="width:265px;height: 25px;background: url(img/date.jpg) no-repeat 240px;border:1px #DEDEDE solid ;" /></div><div style="width:290px;height:38px ;background-color:white ;padding-left: 70px;margin-top: 5px;">学生 <input type="checkbox" />       高铁/动车 <input type="checkbox" /></div><div style="width:360px;height:35px;background: url(img/btn.jpg) no-repeat;line-height: 35px;text-align: center;font-family: '微软雅黑';font-size:15px;color: white;">查  询</div><div style="position: relative;top:-200px;left: 350px;"><img src="img/change.jpg"></div></div></div></div></div><!--第四个div区域--><div style="width: 1349px;height: 135px;background-color:white;"><div style="width:1120px;height:64px;position: relative;top:28px;background: url(img/list_4.jpg) no-repeat 10px ;background-color: white;margin: 0 auto;"><font style="position: relative;top:35px;left: -1px;font-family:'微软雅黑';font-size:15px;color: black;">重点旅客预约 遗失物品查找 共享汽车 便民托运 车站引导 站车风采 用户反馈</font></div></div><!--第五个div区域--><div style="width:1349px;height:380px;background-color:white;"><div style="width: 1200px;height: 350px;background-color: white;margin: 0 auto;"><img src="img/abanner01.jpg" height="160px" width="590px" /><img src="img/abanner02.jpg" height="160px" width="590px" style="margin-left: 7px;"/><img src="img/abanner03.jpg" height="160px" width="590px" style="margin-top: 13px;"/><img src="img/abanner04.jpg" height="160px" width="590px" style="margin-left: 7px;margin-top: 13px;"/></div></div><!--第六个div区域--><div style="width:1349px;height: 545px;background-color:white;"><div style="width:1190px;height: 40px;background-color:white;margin: 0 auto;"><font style="float: left;color: #3B99FC;font-family: '微软雅黑';">铁路旅游</font><font style="float: right;">更多>></font><img src="img/查询横线框.png" width="1190px" height="10px"/></div><div style="width:1190px;height:500px;background-color: white;margin: 0 auto;"><div style="background-color: white;width: 290px;height: 228px;float: left;border: 1px #EFEFEF solid;"><dl><dt><img src="img/pro1.jpg" width="290px" height="160px"></dt><dd><font style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;">“环西部火车游”高品质旅游版专线列车</font></dd><dd><font style="color:#FF8201;font-size: 18px;position: relative;top:15px;left: 8px;font-weight: bold;">¥2560</font></dd></dl></div><div style="background-color: white;width: 290px;height: 228px;float: left;margin-left: 7px;border: 1px #EFEFEF solid;"><dl><dt><img src="img/pro2.jpg" width="290px" height="160px"></dt><dd><font style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;">“环西部火车游”陇上江南·行摄山水</font></dd><dd><font style="color:#FF8201;font-size: 18px;position: relative;top:15px;left: 8px;font-weight: bold;">¥930</font></dd></dl></div><div style="background-color: white;width: 290px;height: 228px;float: left;margin-left: 7px;border: 1px #EFEFEF solid;"><dl><dt><img src="img/pro3.jpg" width="290px" height="160px"></dt><dd><font style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;">“环西部火车游”华夏寻根·人文始祖</font></dd><dd><font style="color:#FF8201;font-size: 18px;position: relative;top:15px;left: 8px;font-weight: bold;">¥980</font></dd></dl></div><div style="background-color: white;width: 290px;height: 228px;float: left;margin-left: 7px;border: 1px #EFEFEF solid;"><dl><dt><img src="img/pro4.jpg" width="290px" height="160px"></dt><dd><font style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;">“环西部火车游”兰州-张掖-嘉峪关</font></dd><dd><font style="color:#FF8201;font-size: 18px;position: relative;top:15px;left: 8px;font-weight: bold;">¥3380</font></dd></dl></div><div style="background-color: white;width: 290px;height: 228px;float: left;margin-top: 10px;border: 1px #EFEFEF solid;"><dl><dt><img src="img/pro5.jpg" width="290px" height="160px"></dt><dd><font style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;">“环西部火车游”美丽甘南三日游</font></dd><dd><font style="color:#FF8201;font-size: 18px;position: relative;top:15px;left: 8px;font-weight: bold;">¥880</font></dd></dl></div><div style="background-color: white;width: 290px;height: 228px;float: left;margin-left: 7px;margin-top: 10px;border: 1px #EFEFEF solid;"><dl><dt><img src="img/pro6.jpg" width="290px" height="160px"></dt><dd><font style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;">“环西部火车游”茶卡，青海湖两日游</font></dd><dd><font style="color:#FF8201;font-size: 18px;position: relative;top:15px;left: 8px;font-weight: bold;">¥880</font></dd></dl></div><div style="background-color: white;width: 290px;height: 228px;float: left;margin-left: 7px;margin-top: 10px;border: 1px #EFEFEF solid;"><dl><dt><img src="img/pro7.jpg" width="290px" height="160px"></dt><dd><font style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;">“环西部火车游” 嘉、敦煌5日游</font></dd><dd><font style="color:#FF8201;font-size: 18px;position: relative;top:15px;left: 8px;font-weight: bold;">¥2260</font></dd></dl></div><div style="background-color: white;width: 290px;height: 228px;float: left;margin-left: 7px;margin-top: 10px;border: 1px #EFEFEF solid;"><dl><dt><img src="img/pro8.jpg" width="290px" height="160px"></dt><dd><font style="font-family: '微软雅黑';font-size: 14px;font-weight: bold;">“环西部火车游”敦煌一地三日游</font></dd><dd><font style="color:#FF8201;font-size: 18px;position: relative;top:15px;left: 8px;font-weight: bold;">¥1380</font></dd></dl></div></div></div><!--第七个div区域--><div style="width: 1349px;height: 270px;"><div style="width:1190px;height: 260px;margin: 0 auto;border: 1px #DEDEDE solid;border-top:0px ;"><!--标题部分--><div><div style="width: 390px;height:40px;background-color: #3B99FC;float: left;"><font style="font-family: '微软雅黑';font-size:17px ;position: relative;top:8px;left: 160px;">最新发布</font></div><div style="width: 390px;height:40px;background-color: #EFEFF4;float: left;margin-left: 9px;"><font style="font-family: '微软雅黑';font-size:17px ;position: relative;top:8px;left: 160px;">常见问题</font></div><div style="width: 390px;height:40px;background-color: #EFEFF4;float: left;margin-left: 10px;"><font style="font-family: '微软雅黑';font-size:17px ;position: relative;top:8px;left: 160px;">信用信息</font></div></div><!--列表--><div id="div5"><!--左侧新闻列表--><div id="left_list"><div style="float:left ;" class="wor"><ul style="list-style-position: inside;list-style-image: url(img/act.jpg);"><li >候补购票操作说明</li><li >燃了！宣传片《新时代的中国高铁》震撼亮相</li><li >公 告 </li><li >中国铁路上海局集团有限公司关于2019年3月1日-2019年4月1日增开部分旅客列车的公告</li><li >中国有限公司关于2019年3月3日至4月2日加开K4350/1、K4352/49次的公告铁路成都局集团</li></ul></div><div style="float:right;"><ul style="list-style-type: none;" class="dat"><li>2018-11-26</li><li>2018-09-15</li><li>2018-06-17</li><li>2018-03-21</li><li>2017-04-06</li></ul></div></div><!--右侧新闻列表--><div id="right_list"><div style="float:left ;" class="wor"><ul style="list-style-position: inside;list-style-image: url(img/act.jpg);"><li >关于港澳居民来往内地通行证、台湾居民来往大陆通行证公司关于20公司关于20</li><li >接续换乘和选座功能使用说明</li><li >关于调整互联网、电话订票起售时间的公告</li><li >中国铁路南宁局集团有限公司关于停运、加开部分列车的公告</li><li >中国铁路武汉局集团有限公司关于2019年3月2日—31日临时加开部分旅客列车的公告</li></ul></div><div style="float:right;"><ul style="list-style-type: none;" class="dat"><li>2018-11-26</li><li>2018-09-15</li><li>2018-06-17</li><li>2018-03-21</li><li>2017-04-06</li></ul></div></div><div style="float: right;position: relative;top:180px;left: 530px;font-size: 15px;font-family: '微软雅黑';">更多></div></div></div></div><!--第八个div区域--><div style="width: 1349px;height: 215px; background: #F8F8F8;margin-top: 40px;"><!--友情链接--><div style="width: 420px;height: 120px;position: relative;top:45px;left: 135px;float: left;"><font>友情链接</font><br/><div style="margin-top: 20px;"><img src="img/link01.png" width="200px" height="30px" /><img src="img/link02.png" width="200px" height="30px" style="margin-left: 5px;" /><img src="img/link03.png" width="200px" height="30px" style="margin-top: 5px;" /><img src="img/link04.png" width="200px" height="30px" style="margin-left: 5px;margin-top: 5px;" /></div></div><!--二维码--><div style="width: 450px;height: 130px;background-color: #F8F8F8;position: relative;top:45px;left: 170px;float: left;"><div style="float: left; " align="center"><dl><dd style="font-size: 15px;">中国铁路官方微信</dd><dd> </dd><dt><img src="img/zgtlwx.png" width="80px" height="80px" ></dt></dl></div><div style="float: left;margin-left: 10px;" align="center"><dl><dd style="font-size: 15px;">中国铁路官方微博</dd><dd> </dd><dt><img src="img/zgtlwb.png" width="80px" height="80px"></dt></dl></div><div style="float: left;margin-left: 10px;" align="center"><dl><dd style="font-size: 15px;">12360公众号</dd><dd> </dd><dt><img src="img/public.png" width="80px" height="80px"></dt></dl></div><div style="float: left;margin-left: 10px;" align="center"><dl><dd style="font-size: 15px;">铁路12360</dd><dd> </dd><dt><img src="img/download.png" width="80px" height="80px"></dt></dl></div></div><!--提示--><div style="width: 200px;height: 85px;background:url(img/文本框背景.bmp);background-color: blueviolet;position: relative;top:85px;left: 190px;float: left;"><font style="font-size: 10px;position: relative;top: 10px;left: 14px;">官方APP下载，目前铁路未授<br/>权其他网站或APP开展类似服<br/>务内容，敬请广大用户注意。</font></div></div><!--底部区域--><div style="width:1349px;height: 80px;background-color:#666666;"><div style="width: 590px;height: 50px;margin: 0 auto;position: relative;top: 15px;"><font face="微软雅黑" style="font-size: 13px;color: #C1C1C1;"><div align="center" >版权所有©2008-2018 中国铁路信息科技有限责任公司 中国铁道科学研究院集团有限公司<br/><br/>京ICP备15003716号-3 | 京ICP证150437号</div></font></div></div><!--右侧悬浮区域--><div id="hov"><div id="div1" class="divr"><font>最新<br/>发布</font></div><div id="div2"class="divr" ><font>联系<br/>客服</font></div><div id="div3" class="divr"><font>APP<br/>下载</font></div><div id="div4" class="divrr"><font>旅客<br/>出行<br/>温馨<br/>提示</font></div></div></div></body>
</html>css文件
*{margin: 0px;
}
.divr{width: 50px;height: 85px;
}
#hov font{position: relative;top:37px;left: 13px;font-family: "微软雅黑";font-size: 2px;color: #666666;vertical-align:top;
}
#div1{position: fixed;right: 0px;top:160px;background:url(../img/喇叭.png) no-repeat 14px 14px;background-color:#EFEFEF;
}
#div2{position: fixed;right: 0px;top:250px;background: url(../img/电话.png) no-repeat 14px 14px;background-color:#EFEFEF;
}
#div3{position: fixed;right: 0px;top:340px;background: url(../img/二维码.png) no-repeat 14px 14px;background-color:#EFEFEF;
}
#div4{width: 50px;height: 124px;position: fixed;right: 0px;top:430px;background: url(../img/捧手.png) no-repeat 14px 14px;background-color:#EFEFEF;
}
.wor{font-size: 14px;position: relative;left:-10px
}
.wor li{width:385px;/*设置li的宽度*/line-height:35px;/*设置li间的距离*/white-space:nowrap; /*不让文字内容换行*/overflow:hidden;/*文字溢出的部分隐藏起来*/text-overflow:ellipsis; /*用...替代溢出的部分*/
}
#div5 li{font-family: "微软雅黑";line-height: 30px;
}
.dat{color:darkgray;font-size: 12px;
}
#left_list{float: left;width:555px;height:175px;position: relative;top:18px;right:15px;
}
#right_list{float: right;width:555px;height:175px;position: relative;top:18px;right:15px;
}
html+css制作简易12306页面相关推荐
- 使用html和css制作一个小米商城页面
使用html和css制作一个小米商城页面 创作不易,可否给作者点个赞再走 html部分: /** * author 阿木木 * date 10/01 14:32 * / `<html>&l ...
- html+css制作简易版Baymax
</pre>大白的简易版图片如下,我用html+css来制作简易版的大白.<img src="https://img-blog.csdn.net/2016012418583 ...
- HTML制作简易登录页面（网易笔记）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>网易邮 ...
- 纯css制作简易轮播图（animation、keyFrame）
主要是通过css3的动画及关键帧属性来设置图片的平移距离,以达到轮播图的效果 HTMl <body><div class="banner"><div ...
- html+css制作豆瓣读书页面
效果所下图所示: 1.第一层导航栏,我使用ul写的 这部分写在body-->header-->div1中(分不清在哪里的,看文章末尾的完整代码) <div class="d ...
- HTML +CSS制作QQ登录页面
用a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
- html+css制作3D七夕表白旋转相册特效
一个温暖的拥抱,一句轻声的问候,一个暖心的笑容,一双坚实的双手,让我们日久天长,健健康康,快乐每一天!祝你们七夕快乐!一个基于html+css制作简易的3D七夕表白旋转相册特效,就当送给你们当作七夕表 ...
- 九宫格——用html+css制作一个网页
自用(仅供参考,如有错误欢迎指出) 要求: 1.通过html和css制作一个可以根据页面缩放进行变化的九宫格. 2.并且可以通过手机浏览器访问. 过程: 1.网页制作 先不管通过网页访问这一项,先写一 ...
- 第3期：12306页面制作
12306页面制作 第1期: 手把手教你制作网易邮箱注册页面 第2期: 网页动画制作(CSS+JS) 第3期:12306页面制作 文章目录 12306页面制作 前言 一.基础知识 1.JS基础语法 2 ...
最新文章
- Facebook 万字长文：AI 模型全部迁移至 PyTorch 框架
- 创界uVision下的ADuC845的工程文件
- 106. Leetcode 122. 买卖股票的最佳时机 II (动态规划-股票交易)
- 用Python对数学函数进行求值、求偏导
- 解密阿里云高效病原体基因检测工具
- Spring Boot Logback 配置详解
- git提交emoji_Emoji-Log：一种编写Git提交消息的新方法
- 计算机单词大全及缩写,计算机英文单词和缩写
- 基于深度学习和支持向量机的４种苜蓿叶部病害图像识别
- vba打开服务器文件,EXCEL+VBA快速部署及运维管理FTP+SMB共享文件服务器
- AutoCAD2012官方原版软件下载
- 产品读书《周鸿祎-我的互联网方法论》
- 【工控老马】三菱Q系列PLC调试及三菱触摸屏报警使用说明详解
- 物种内共线性分析——思路以及踩坑总结（二）
- 【Java分享客栈】我为什么极力推荐XXL-JOB作为中小厂的分布式任务调度平台
- 利用全加器实现7段数码管_单片机入门：LED数码管基础
- 大众点评数据爬虫思路[更新版]
- 百度收录排名好的网站-哪些网站百度收录排名好
- idc服务器硬件,IDC基础：服务器机柜的设备介绍
- php scada,scada系统是什么