一、代码如下（示例）：

照片就没有传上去了，可以自行替换一下


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>中国铁路12306</title><link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" /><link rel="stylesheet" href="css/12306.css" /></head><body><div class="tl"><div class="tl1"><img class="tl1_img" src="img/logo.jpg" /><div class="tl1_sh"><input class="tl1_sh_inp" type="text" placeholder="搜索车票，餐饮，常旅客，相关规章" /><img class="tl1_sh_img" src="img/查找.png" width="20px" height="20px" /><div class="tl1_sh_list"><ul><li><a href="" class="tl1_sh_a">English</a></li><li><span>|</span></li><li><a href="" class="tl1_sh_a">我的12306</a></li><li><span>|</span></li><li><a href="" class="tl1_sh_a2">登录</a></li><li><a href="http://127.0.0.1:8848/12306/index.html" class="tl1_sh_a2">注册</a></li></ul></div></div></div></div><!--顶部的导航--><div class="tl2"><div class="tl2_cen"><ul><li class="tl2_cen_first"><a href="">首页</a></li><li><a href="">车票<img src="./img/向下.png" alt="" width="10%"></a><div class="xiala"><ul><li><a href="#">购买</a><br><a href="#">单程</a><br><a href="#">中转换乘</a></li><a href="line">|</a><li><a href="#">往返</a><br><a href="#">计次*定期票</a><br></li><li><a href="#">变更</a><br><a href="#">退票</a><br><a href="#">变更到站</a></li><a href="linee">|</a><li><a href="#">改签</a><br></li><a href="line">|</a><li><a href="#">更多</a><br><a href="#">中铁银通卡</a><br><a href="#">市郊快速铁路</a></li><a href="linee">|</a><li><a href="#">广九直通车</a><br><a href="#">国际列车</a></li></ul></div></li><li><a href="">团购服务 <img src="./img/向下.png" alt="" width="10%"></a></li><li><a href="">会员服务 <img src="./img/向下.png" alt="" width="10%"></a></li><li><a href="">站车服务 <img src="./img/向下.png" alt="" width="10%"></a></li><li><a href="">商旅服务 <img src="./img/向下.png" alt="" width="10%"></a></li><li><a href="">出行指南 <img src="./img/向下.png" alt="" width="10%"></a></li><li><a href="">信息查询 <img src="./img/向下.png" alt="" width="10%"></a></li></ul></div></div><!-- 定位 --><div class="dingwei"><div class="zuo"><div class="pup">车票</div><div class="pup">常用查询</div><div class="pup o">订餐</div></div><div class="you"><div class="shang"><ul><li>单程</li><li>往返</li><li>中转换乘</li><li>退改签</li></ul><div class="xia"><div class="chuf"><div class="daoda">出发地 <input type="" name="" id="" value="&nbsp;&nbsp;简拼/全拼/汉字" /><br>到达地 <input type="" name="" id="" value="&nbsp;&nbsp;简拼/全拼/汉字" /></div>出发日期<input type="" name="" id="" value="&nbsp;&nbsp;2022-09-18" /><br><div class="chaxun">查&nbsp;&nbsp;询</div></div></div></div></div></div><!-- 轮播图 --><div class="tl3"></div><div class="tl4"><ul><li><img src="img/ico1.jpg" /><p><a href="">重点客户预约</a></p></li><li><img src="img/ico2.jpg" /><p><a href="">遗失物品查找</a></p></li><li><img src="img/ico3.jpg" /><p><a href="">约车服务</a></p></li><li><img src="img/ico1.jpg" /><p><a href="">便民托运</a></p></li><li><img src="img/ico5.jpg" /><p><a href="">车站引导</a></p></li><li><img src="img/ico6.jpg" /><p><a href="">车站风采</a></p></li><li><img src="img/ico5.jpg" /><p><a href="">用户反馈</a></p></li></ul></div><!--会员服务--><div class="pic"><ul><li><img src="./img/abanner01.jpg" alt="" width="580px" height="160px"></li><li><img src="./img/abanner02.jpg" alt="" width="580px" height="160px"></li><li><img src="./img/abanner03.jpg" alt="" width="580px" height="160px"></li><li><img src="./img/abanner04.png" alt="" width="580px" height="160px"></li></ul></div><!--更多内容--><div class="tl6"><span>铁路旅游</span><a>更多&gt;</a></div><!--铁路旅游信息展示--><div class="t"><ul><li class="t17-float"><img src="./img/001.jpg" width="288px" height="160px" /><p>“环西部火车游” 高品质旅游版专线列车</p><p>&yen; &nbsp;2590</p></li><li class="t17-float"><img src="./img/002.jpg" width="288px" height="160px" /><p>“环西部火车游” 高品质旅游版专线列车</p><p>&yen; &nbsp;2590</p></li><li class="t17-float"><img src="./img/003.jpg" width="288px" height="160px" /><p>“环西部火车游” 高品质旅游版专线列车</p><p>&yen; &nbsp;2590</p></li><li class="t17-float"><img src="./img/004.jpg" width="288px" height="160px" /><p>“环西部火车游” 高品质旅游版专线列车</p><p>&yen; &nbsp;2590</p></li><li class="t17-float"><img src="./img/005.jpg" width="288px " height="160px" /><p>“环西部火车游” 高品质旅游版专线列车</p><p>yen; &nbsp;2590</p></li><li class="t17-float"><img src="./img/006.jpg" width="288px" height="160px" /><p>“环西部火车游” 高品质旅游版专线列车</p><p>&yen; &nbsp;2590</p></li><li class="t17-float"><img src="./img/007.jpg" width="288px" height="160px" /><p>“环西部火车游” 高品质旅游版专线列车</p><p>&yen; &nbsp;2590</p></li><li class="t17-float"><img src="./img/008.jpg" width="288px" height="160px" /><p>“环西部火车游” 高品质旅游版专线列车</p><p>&yen; &nbsp;2590</p></li></ul></div><!--信息位置展示--><div class="tl8"><div class="tl8_div2">最新发布</div><div class="tl8_div">常见问题</div><div class="tl8_div">信用信息</div></div><div class="tl9"><div class="tl9_msg1"><ul type="square"><li><a>铁路旅客禁止。限制携带和托运品目录</a><span>2022-06-17</span></li><li><a>关于调整互联网，电话订票起售时间的公告</a><span>2022-05-31</span></li><li><a>公告</a><span>2022-02-25</span></li><li><a>候补购票操作说明</a><span>2022-02-07</span></li><li><a>关于调整互联网，电话订票起售时间的公告</a><span>2021-02-5</span></li><li><a>关于调整互联网，电话订票起售时间的公告</a><span>2022-09-03</span></li></ul></div></div><div class="tl10"><div class="tl11"><div class="tl11-all"><p>友情链接</p><img src="./img/link02.png" alt="" width="200px" height="34px"><img src="./img/link03.png" alt="" width="200px" height="34px"><img src="./img/link04.png" alt="" width="200px" height="34px"><img src="./img/link05.png" alt="" width="200px" height="34px"></div><div class="tl11_right"><div class="erwm"><p>中国铁路官方微信</p><img src="./img/zgtlwx.png" alt="" width="80px" height="80px"></div><div class="erwm"><p>中国铁路官方微博</p><img src="./img/zgtlwb.png" alt="" width="80px" height="80px"></div><div class="erwm"><p>中国铁路官方微信</p><img src="./img/public.png" alt="" width="80px" height="80px"></div><div class="erwm"><p>中国铁路官方微信</p><img src="./img/download.png" alt="" width="80px" height="80px"></div></div></div></div><main><div class="tl12"><p>版权所有@2008-2022&nbsp;&nbsp;中国铁道科学研究院集团有限公司&nbsp;&nbsp;技术支持：铁旅科技有限公司</p><p>京公网安备 11010802038392号 |&nbsp;京ICP备0520493号-4&nbsp;ICP证：京B2-20202537 </p></div></main></body>
</html>

2.读入数据

css部分

* {margin: 0px;padding: 0px;text-decoration: none;list-style: none;
}/**顶部布局开始***/
.tl {width: 1190px;height: 80px;margin: 0 auto;
}.tl1 {width: 100%;height: 80px;border: 0px solid red;}.tl1_img {margin-top: 15px;}.tl1_sh {width: 890px;height: 70px;border: 0px solid red;float: right;margin-top: 10px;background-image: url(../img/train.png);background-repeat: no-repeat;background-position: left;background-size: 1130px 40px;line-height: 70px;
}.tl1_sh_inp {width: 420px;height: 24px;}.tl1_sh_img {position: relative;top:11px;left: -5px;width: 30px;height: 30px;border: #2676e3 1px solid;background-color: #2676e3;
}.tl1_sh_list {width: 328px;height: 40px;float: right;}.tl1_sh_list li {float: left;margin-left: 22px;
}.tl1_sh_list a {text-decoration: none;font-size: 12px;
}.tl1_sh_a {color: #3b99fc;
}.tl1_sh_a2 {color: #333333;
}.tl1_sh_list span {font-size: 12px;color: #ACD1F9;
}/*顶部导航的开始*/
.tl2_cen_first>li>img {margin-top: 5px;
}.tl2 {width: 100%;height: 40px;background-color: #3B99FC;
}a:hover {color: red;
}img:hover {box-shadow: 0px 0px 15px #888;
}.tl2_cen {width: 1200px;height: 40px;border: 0px solid red;margin: 0px auto;line-height: 40px;
}.tl2_cen li {list-style: none;float: left;height: 40px;width: 148px;border: 0px solid green;text-align: center;
}.tl2_cen a {color: #ffffff;font-size: 14px;text-decoration: none;
}.tl2_cen_first {background-color: #2676e3;}.tl2_cen li:hover {background-color: #2676e3;
}
/* 下拉开始*/
.xiala {width:100%;position: absolute;left: 0;top: 45px;visibility: hidden;transition: all .4s ease-out;box-shadow: 0px 0px 10px rgba(0, 0, 0, .1);
}
.xiala>a {display: inline-block;width: 83px;text-align: center;color: rgba(0, 0, 0, .85);font-size: 14px;
}/* 定位 */
.dingwei {width: 510px;height: 350px;position: absolute;left: 250px;top: 190px;background-color: white;cursor: pointer;
}.zuo {height: 350px;width: 110px;background-color: #3B99FC;color: white;float: left;
}.pup {border-bottom: 1px white solid;width: 100px;height: 116px;margin-left: 10px;text-align: center;line-height: 110px;}.pup:nth-child(1) {background-color: white;color: #3B99FC;
}.you {width: 410px;}.shang {padding: 32px 25px 0px 125px;width: 360px;height: 318px;
}.shang li {width: 90px;height: 32px;float: left;text-align: center;line-height: 32px;border-bottom: 2px gray solid;margin-bottom: 30px;
}.shang li:nth-child(1) {border-bottom: 2px #3B99FC solid;
}.xia {width: 360px;height: 197px;
}.chuf {width: 360px;height: 213px;line-height: 3;}.daoda {margin-left: 10px;
}input {width: 223px;height: 20px;padding: 4px 30px 4px 10px;border: 1px #DEDEDE solid;margin-left: 5px;
}.chaxun {width: 338px;height: 20px;padding: 4px 10px;margin-top: 40px;border: 1px orange solid;background-color: orange;border-radius: 15px;text-align: center;line-height: 20px;color: white;
}/*轮播图开始*/
.tl3 {width: 100%;height: 450px;border: 0px solid red;background-image: url("https://www.12306.cn/index/images/pic/banner20201223.jpg");animation: 15s lbt infinite;
}@keyframes lbt {0% {background-image: url("https://www.12306.cn/index/images/pic/banner12.jpg");}25% {background-image: url("https://www.12306.cn/index/images/pic/banner20200707.jpg");}50% {background-image: url("https://www.12306.cn/index/images/pic/banner0619.jpg");}75% {background-image: url("https://www.12306.cn/index/images/pic/banner20201223.jpg");}100% {background-image: url("https://www.12306.cn/index/images/pic/banner12.jpg");}
}/*铁路预约开始*/
.tl4 {width: 1200px;height: 140px;border: 0px solid red;margin: 0px auto;background-image: url(../img/bgline.png);
}.tl4 li {list-style: none;width: 169px;height: 140px;border: 0px solid red;float: left;text-align: center;
}.tl4 img {margin-top: 37px;
}.pic {width: 1200px;height: 400px;margin: 0 auto;
}.pic ul li {margin: 20px 10px;float: left;
}/*会员服务开始*/
.tl5 {width: 1200px;height: 340px;border: 0px solid red;margin: 0px auto;
}.tl5 div {width: 590px;height: 160px;border: 0px solid green;float: left;
}.tl5_fw {margin-left: 15px;
}.tl5_fw2 {margin-top: 15px;
}/*更多服务开始*/.tl6 {width: 1200px;height: 40px;/*border:  1px solid red;*/margin: 0px auto;line-height: 40px;border-bottom: 2px solid #DEDEDE;margin-top: 30px;
}.tl6 span {color: #3B99FC;font-size: 16px;
}.tl6 a {float: right;font-size: 14px;color: #999999;text-decoration: none;
}/**铁路旅游信息开始***/
.t {width: 1200px;height: 508px;margin: 0 auto;font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;font-size: 14px;line-height: 1.5;}.t17-float {width: 287.876px;height: 242px;border: 1px #888 solid;float: left;margin-left: 10px;margin-bottom: 10px;
}.t p {color: orange;
}/*铁路最新发布开始*/
.tl8 {height: 40px;width: 1200px;border: 0px solid red;margin: 0px auto;margin-top: 40px;
}.tl8 div {width: 390px;height: 40px;float: left;text-align: center;line-height: 40px;
}.tl8_div2 {background-color: #3B99FC;color: #FFFFFF;
}.tl8_div {margin-left: 15px;background-color: #EFEFF4;color: #333333;
}/*铁路最新发布结束*/
.tl9 {width: 1200px;height: 255px;border: 2px solid #DEDEDE;margin: 0px auto;
}.tl9 div {width: 525px;height: 195px;border: 0px solid red;float: left;margin-left: 60px;
}.tl9_msg1 li {margin-top: 20px;
}.tl9_msg1 span {float: right;font-size: 12px;color: #999999;
}.tl9_msg1 a {font-size: 14px;color: #333333;cursor: pointer;
}.tl9_msg1 a:hover {color: red;}/*底部开始*/.posab {width: 510px;height: 350px;
}.left {width: 100px;height: 350px;
}.left-1 {width: 100px;height: 118px;color: #2676e3;background-color: white;
}.left-2 {width: 100px;height: 112px;color: white;background-color: #2676e3;
}.aside {position: relative;}.aside ul {position: fixed;right: 0px;top: 100px;
}.tl10 {width: 100%;height: 195px;background-color: #f8f8f8;margin-top: 55px;}.tl11 {width: 1200px;height: 154px;margin: 100px auto;}.tl11-all {width: 420px;height: 100px;display: inline block;float: left;padding: 20px 80px;margin: 30px 0px 0px 0px;
}.tl11_right {width: 560px;height: 134px;float: left;display: inline block;margin: 50px 0px 0px 0px;text-align: center;line-height: 1;
}.erwm {width: 140px;height: 134px;float: left;display: inline block;
}.tl12 {text-align: center;display: inline block;width: 100%;height: 77px;background-color: #666666;line-height: 2;color: white;
}

总结

今天跟大家分享一下这几天写的一个12306的官网，多多指教呀~

仿12306官网（附源码）相关推荐

仿小米官网php源码,精仿小米官网商城整站完美运营版源码Laravel内核
源码预览源码介绍运行环境:WIN-LINUX+APACHE2.4+PHP7.0+MYSQL5.5+伪静态服务器要求: 本系统Laravel框架对PHP版本和扩展有一定要求,有必要了解下这些以便确 ...
最新多用途的APP软件业务介绍官网模板源码
正文: 最新多用途的APP软件业务介绍官网模板源码,一款蓝色渐变风格的app应用软件介绍,IT软件科技公司官网HTML模板. 它适用于所有创意的科技公司网站. 如Saas登陆.软件登陆.创意代理.企业 ...
网络工作室官网HTML源码
一个简单的企业网络工作室主页官网html网站源码开源无加密 ps文件,设计图纸均已开源,上传即用源码下载:网络工作室官网HTML源码-小程序文档类资源-CSDN下载
一品资源网自用官网模板源码下载站（带手机模板）
★模板介绍★ 一品资源网自用官网模板源码下载站(带手机模板)本套源码为dedecms二次开发而来,也是本站一品资源网自用的原版本打包,提供本套作品的初衷是为了能上更多想做下载站的站长朋友拥有一套更容易 ...
最新超炫酷的动态引导页官网HTML源码
正文: 最新超炫酷的动态引导页官网HTML源码,背景是动态的,非常炫酷,有兴趣的自行去体验吧,其它就没什么好介绍的了. 程序: wwxegu.lanzoui.com/iOt9B0h05iof 图片:
php企业官网源码响应式,基于ThinkPHP5框架开发的响应式企业官网PHP源码_PC端+WAP手机端自适应+TP企业官网建站系统...
源码介绍基于ThinkPHP5框架开发的响应式企业官网PHP源码,是一款基于ThinkPHP5.0.10内核开发的企业建站管理系统,非常适合企业拿来二次开发自己的企业官网系统.前端界面采用流行的bo ...
二次元影视解析官网html源码
二次元影视解析官网html源码,记事本修改,配合影视解析html源码,可以做一个很不错的影视解析网站,这个做引导页,那个做主页,很完美
2018全新无限流量卡充值官网PHP源码
源码介绍 2018全新无限流量卡充值官网PHP源码是一个简单的流量卡官网程序,适合卖流量的朋友使用,源码带后台,可以直接设置网站相关参数! 适用范围流量卡充值官网运行环境 PHP+MYSQL 亲测 ...
用Python自动刷新抢12306火车票（附源码）
專欄 ❈ 作者:marvin,互联网从业者,现居上海张江 ❈ 一年一度的春运又来了,今年我自己写了个抢票脚本.使用Python+Splinter自动刷新抢票,可以成功抢到.(依赖自己的网络环境太厉害 ...

仿12306官网（附源码）

文章目录

一、代码如下（示例）：

2.读入数据

总结

仿12306官网（附源码）相关推荐

最新文章

热门文章