html+css制作简易12306页面
生活随笔
收集整理的這篇文章主要介紹了
html+css制作简易12306页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
制作匆忙很多代碼細節沒注意? 圖片都是官網扒的
源文件見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页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过淘宝API接口获取SKU标题、SKU
- 下一篇： sping cloud 搭建 微服务