制作匆忙很多代码细节没注意 图片都是官网扒的
源文件见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;
}
2274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
