大家好呀！我是小笙，本期内容是关于用html和css简单做一个网页，练习为主
技术：HTML + CSS
页面展示
导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>锐刃集团</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.guide_item a{
text-decoration:none;
color: white;
}
.navi{
height: 40px;
background-color: #E2422B;
}
.navi .guide_item{
float: left;
width: 145px;
height: 40px;
list-style: none;
text-align: center;
line-height: 40px;
color: white;
}
.navi ul{
width: 1160px;
margin: 0px auto;
}
</style>
</head>
<body>
<div class="navi">
<ul class="guide_all">
<li class="guide_item"><a href="https://www.12306.cn/index/index.html" target="_blank"><span >首页</span></li></a>
<li class="guide_item"><span">车票 ∨</span></li>
<li class="guide_item"><span>团购服务 ∨</span></li>
<li class="guide_item"><span>会员服务 ∨</span></li>
<li class="guide_item"><span>站车服务 ∨</span></li>
<li class="guide_item"><span>商旅服务 ∨</span></li>
<li class="guide_item"><span>出行指南 ∨</span></li>
<li class="guide_item"><span>信息查询 ∨</span></li>
</ul>
</div>
</body>
</html>
服务栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>_12306服务栏设计</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#service_item{
width: 1200px;
margin: 0px auto;
}
.service_item{
width: 170px;
float: left;
margin: 0px auto;
}
.service_item dd ,.service_item dt{
text-align: center;
}
.service_item a{
/* 取消下划线 */
text-decoration: none;
color: black;
font-size: 14px;
}
</style>
</head>
<body>
<div id="service_item">
<dl class="service_item">
<dd>
<a href="https://kyfw.12306.cn/otn/resources/login.html"><img src="../img/1.png"/></a>
</dd>
<dt class="item1">
<a href="https://kyfw.12306.cn/otn/resources/login.html"><font>重点旅客预约</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://kyfw.12306.cn/otn/view/icentre_lostInfo.html"><img src="../img/2.png"/></a>
</dd>
<dt class="item1">
<a href="https://kyfw.12306.cn/otn/view/icentre_lostInfo.html"><font>遗失物品查询</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://www.12306.cn/index/view/station/shared_Car.html"><img src="../img/3.png"/></a>
</dd>
<dt class="item1">
<a href="https://www.12306.cn/index/view/station/shared_Car.html"><font>共享汽车</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://www.12306.cn/index/view/station/hand.html"><img src="../img/4.png"/></a>
</dd>
<dt class="item1">
<a href="https://www.12306.cn/index/view/station/hand.html"><font>便民托运</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://www.12306.cn/mormhweb/czyd_2143/"><img src="../img/5.png"/></a>
</dd>
<dt class="item1">
<a href="https://www.12306.cn/mormhweb/czyd_2143/"><font>车站引导</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://www.12306.cn/mormhweb/zcfc_2548/"><img src="../img/6.png"/></a>
</dd>
<dt class="item1">
<a href="https://www.12306.cn/mormhweb/zcfc_2548/"><font>站车风采</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://kyfw.12306.cn/otn/view/advice_adviceInfo.html"><img src="../img/7.png"/></a>
</dd>
<dt class="item1">
<a href="https://kyfw.12306.cn/otn/view/advice_adviceInfo.html"><font>用户反馈</font></a>
</dt>
</dl>
</div>
</body>
</html>
提示栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#img1{
width: 55px;
height: 125px;
position: fixed;
right: 0px;
bottom: 532px;
}
#img2{
width: 55px;
height: 88px;
position: fixed;
right: 0px;
bottom: 444px;
}
#img3{
width: 55px;
height: 88px;
position: fixed;
right: 0px;
bottom: 356px;
}
#img4{
width: 55px;
height: 151px;
position: fixed;
right: 0px;
bottom: 205px;
}
</style>
</head>
<body>
<div>
<a href="#last"><img id="img1" src="../img/note1.png"/></a>
<a href="https://www.12306.cn/index/view/infos/service_number.html" target="_blank"><img id="img2" src="../img/note2.png"/></a>
<a ><img id="img3" src="../img/note3.png"/></a>
<a href="https://www.12306.cn/index/view/infos/safetyTips.html" target="_blank"><img id="img4" src="../img/note4.png"/></a>
</div>
</body>
</html>
介绍栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锐刃集团</title>
<style>
/* 选中body标签中所有标签 */
*{
/* border: 1px solid orangered; */
margin: 0px;
padding: 0px;
}
.introduce{
width: 600px;
height: 350px;
border: 1px solid orangered;
float: left;
}
.introduce a{
text-decoration: none;
font-size: 15px;
color: #000000;
}
.introduce h3{
height: 40px;
background-color: red
}
.introduce ul{
margin-left: 40px;
margin-top: 30px;
color: red;
}
.introduce a:hover{
color: blue;
}
.all_introdce{
width: 1830px;
height: 350px;
margin: 0px auto;
}
#in2,#in1{
margin-right: 10px;
}
</style>
</head>
<body>
<div class="all_introdce">
<div id="in1" class="introduce">
<h3 style="color: white; text-align: center;line-height: 40px;">最新发布</h3>
<ul type="square">
<li><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210113_32704.html" target="_blank">关于铁路部门调整预售期及退票费率规则的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210106_32657.html" target="_blank">铁路部门推出免费退票措施</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201905/t20190521_22980.html" target="_blank">候补购票操作说明</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201411/t20141126_2316.html" target="_blank">关于调整互联网、电话订票起售时间的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt_news/202102/t20210219_32984.html" target="_blank">中国铁路上海局集团有限公司关于2021年2月20日-2021年2</a></li>
</ul>
</div>
<div id="in2" class="introduce">
<h3 style="color: white; text-align: center;line-height: 40px;">常见问题</h3>
<ul type="square">
<li><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210113_32704.html" target="_blank">关于铁路部门调整预售期及退票费率规则的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210106_32657.html" target="_blank">铁路部门推出免费退票措施</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201905/t20190521_22980.html" target="_blank">候补购票操作说明</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201411/t20141126_2316.html" target="_blank">关于调整互联网、电话订票起售时间的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt_news/202102/t20210219_32984.html" target="_blank">中国铁路上海局集团有限公司关于2021年2月20日-2021年2</a></li>
</ul>
</div>
<div id="in3" class="introduce">
<h3 style="color: white; text-align: center;line-height: 40px;">信用信息</h3>
<ul type="square">
<li><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210113_32704.html" target="_blank">关于铁路部门调整预售期及退票费率规则的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210106_32657.html" target="_blank">铁路部门推出免费退票措施</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201905/t20190521_22980.html" target="_blank">候补购票操作说明</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201411/t20141126_2316.html" target="_blank">关于调整互联网、电话订票起售时间的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt_news/202102/t20210219_32984.html" target="_blank">中国铁路上海局集团有限公司关于2021年2月20日-2021年2</a></li>
</ul>
</div>
</div>
</body>
</html>
浮动设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>锐刃集团</title>
<style>
#div9{
width: 1190px;
height:360px;
border: 1px solid white;
margin: 0px auto;
}
#div10{
height="160px"
width="590px"
border: 1px solid white;
float: left;
}
#div11{
height="160px"
width="590px"
border: 1px solid white;
float: right;
}
#div12{
height="160px"
width="590px"
border: 1px solid white;
float: left;
}
#div13{
height="160px"
width="590px"
border: 1px solid white;
float: right;
}
</style>
</head>
<body>
<div id="div9">
<div id="div10">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank"><img src="../img/01.png"/></a>
</div>
<div id="div11">
<a href="https://exservice.12306.cn/excater/index.html" target="_blank"><img src="../img/02.png"/></a>
</div>
<div id="div12">
<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank"><img src="../img/03.png"/></a>
</div>
<div id="div13">
<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank"><img src="../img/04.png"/></a>
</div>
</div>
</body>
</html>
旅游栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
#travel_item{
width: 268px;
height: 220px;
float: left;
}
#travel_item a{
text-decoration: none;
color: black;
}
#travel_item p:hover{
color: #3B99FC;
}
#travel_item p{
line-height: 36px;
padding-left: 10px;
}
#travel_item span{
color: #FF8201;
}
#travel_item #item1{
padding-left: 10px;
}
#travel_all{
width: 1080px;
height: 440px;
margin: 0px auto;
}
#word{
font-size: 13px;
color: red;
line-height: 30px;
width:60px;
}
</style>
</head>
<body>
<div id="travel_all">
<div id="word">铁路旅游</div>
<hr style="width: 50px;color: red;"/><hr color="aliceblue"/><br>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c201644427880112ae">
<dd>
<img src="../img/11.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”高品质旅游版专线列车</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">2560</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c20164457aed6012db">
<dd>
<img src="../img/12.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”陇上江南·行摄山>水陇南</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">930</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016445b0fd5f1304">
<dd>
<img src="../img/13.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”华夏寻根·人文始祖天水</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">980</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446996d9813a9">
<dd>
<img src="../img/14.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”精品旅游线路</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">3380</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c201644684cc7c1388">
<dd>
<img src="../img/16.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”美丽甘南三日游</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">880</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="../img/17.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”青海湖、茶卡2日>游</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">880</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446ba8bc313cd">
<dd>
<img src="../img/15.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”敦煌一地三日游</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">2260</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446d31e1113e5">
<dd>
<img src="../img/18.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”嘉敦5日游</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">1380</span>
</dt>
</a>
</dl>
</div>
</body>
</html>
整合代码
css文件
/************ 导航栏 ************/
*{
margin: 0px;
padding: 0px;
}
.guide_item a{
text-decoration:none;
color: white;
}
.navi{
height: 40px;
background-color: #E2422B;
}
.navi .guide_item{
float: left;
width: 145px;
height: 40px;
list-style: none;
text-align: center;
line-height: 40px;
color: white;
}
.navi ul{
width: 1160px;
margin: 0px auto;
}
/************ 服务栏 ************/
#service_item{
width: 1080px;
margin: 0px auto;
}
.service_item{
width: 150px;
float: left;
margin: 0px auto;
}
.service_item dd ,.service_item dt{
text-align: center;
}
.service_item a{
/* 取消下划线 */
text-decoration: none;
color: black;
font-size: 14px;
}
/************ 介绍栏 ************/
.introduce{
width: 360px;
height: 300px;
border: 1px solid orangered;
float: left;
}
.introduce a{
text-decoration: none;
font-size: 15px;
color: #000000;
}
.introduce h3{
height: 40px;
background-color: red
}
.introduce ul{
margin-left: 40px;
margin-top: 20px;
color: red;
}
.introduce a:hover{
color: blue;
}
.all_introdce{
width: 1140px;
height: 320px;
margin: 0px auto;
}
#in2,#in1{
margin-right: 10px;
}
/************ 提示栏 ************/
#img1{
width: 55px;
height: 125px;
position: fixed;
right: 0px;
bottom: 532px;
}
#img2{
width: 55px;
height: 88px;
position: fixed;
right: 0px;
bottom: 444px;
}
#img3{
width: 55px;
height: 88px;
position: fixed;
right: 0px;
bottom: 356px;
}
#img4{
width: 55px;
height: 151px;
position: fixed;
right: 0px;
bottom: 205px;
}
/************ 图片 ************/
#image1{
width:1850px;
margin: 0px auto;
}
#image2{
width:1950px;
margin: 0px auto;
}
#image3{
width:1850px;
margin: 0px auto;
}
/************ 服务栏方块 ************/
#div9{
width: 1080px;
height:310px;
margin: 0px auto;
}
#div10{
height:150px;
width:538px;
float: left;
}
#div11{
height:150px;
width: 538px;
float: left;
}
#div12{
height:150px;
width:538px;
float: left;
}
#div13{
height:150px;
width:538px;
float: left;
}
#div9 img{
height:140px;
width:530px;
}
/************ 旅游栏 ************/
#travel_item{
width: 268px;
height: 220px;
float: left;
}
#travel_item a{
text-decoration: none;
color: black;
}
#travel_item p:hover{
color: #3B99FC;
}
#travel_item p{
line-height: 36px;
padding-left: 10px;
}
#travel_item span{
color: #FF8201;
}
#travel_item #item1{
padding-left: 10px;
}
#travel_all{
width: 1080px;
height: 440px;
margin: 0px auto;
}
#word{
font-size: 15px;
color: red;
line-height: 30px;
width:60px;
}
图片集合
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蕊仁12306</title>
<!-- 引入CSS样式表 -->
<link rel="stylesheet" href="../css/12306.css">
</head>
<body>
<div id="image2"><img src="../img/000.png"/></div>
<!-- 导航栏 -->
<div class="navi">
<ul class="guide_all">
<li class="guide_item"><a href="https://www.12306.cn/index/index.html" target="_blank"><span >首页</span></li></a>
<li class="guide_item"><span">车票 ∨</span></li>
<li class="guide_item"><span>团购服务 ∨</span></li>
<li class="guide_item"><span>会员服务 ∨</span></li>
<li class="guide_item"><span>站车服务 ∨</span></li>
<li class="guide_item"><span>商旅服务 ∨</span></li>
<li class="guide_item"><span>出行指南 ∨</span></li>
<li class="guide_item"><span>信息查询 ∨</span></li>
</ul>
</div>
<div id="image1"><img src="../img/001.png"/></div>
<br>
<!-- 服务栏 -->
<div id="service_item">
<dl class="service_item">
<dd>
<a href="https://kyfw.12306.cn/otn/resources/login.html"><img src="../img/1.png"/></a>
</dd>
<dt class="item1">
<a href="https://kyfw.12306.cn/otn/resources/login.html"><font>重点旅客预约</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://kyfw.12306.cn/otn/view/icentre_lostInfo.html"><img src="../img/2.png"/></a>
</dd>
<dt class="item1">
<a href="https://kyfw.12306.cn/otn/view/icentre_lostInfo.html"><font>遗失物品查询</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://www.12306.cn/index/view/station/shared_Car.html"><img src="../img/3.png"/></a>
</dd>
<dt class="item1">
<a href="https://www.12306.cn/index/view/station/shared_Car.html"><font>共享汽车</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://www.12306.cn/index/view/station/hand.html"><img src="../img/4.png"/></a>
</dd>
<dt class="item1">
<a href="https://www.12306.cn/index/view/station/hand.html"><font>便民托运</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://www.12306.cn/mormhweb/czyd_2143/"><img src="../img/5.png"/></a>
</dd>
<dt class="item1">
<a href="https://www.12306.cn/mormhweb/czyd_2143/"><font>车站引导</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://www.12306.cn/mormhweb/zcfc_2548/"><img src="../img/6.png"/></a>
</dd>
<dt class="item1">
<a href="https://www.12306.cn/mormhweb/zcfc_2548/"><font>站车风采</font></a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="https://kyfw.12306.cn/otn/view/advice_adviceInfo.html"><img src="../img/7.png"/></a>
</dd>
<dt class="item1">
<a href="https://kyfw.12306.cn/otn/view/advice_adviceInfo.html"><font>用户反馈</font></a>
</dt>
</dl>
</div>
<br>
<br>
<br>
<br>
<br>
<!-- 服务栏方块 -->
<div id="div9">
<div id="div10">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank"><img src="../img/01.png"/></a>
</div>
<div id="div11">
<a href="https://exservice.12306.cn/excater/index.html" target="_blank"><img src="../img/02.png"/></a>
</div>
<div id="div12">
<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank"><img src="../img/03.png"/></a>
</div>
<div id="div13">
<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank"><img src="../img/04.png"/></a>
</div>
</div>
<!-- 提示栏 -->
<div>
<a href="#last"><img id="img1" src="../img/note1.png"/></a>
<a href="https://www.12306.cn/index/view/infos/service_number.html" target="_blank"><img id="img2" src="../img/note2.png"/></a>
<a ><img id="img3" src="../img/note3.png"/></a>
<a href="https://www.12306.cn/index/view/infos/safetyTips.html" target="_blank"><img id="img4" src="../img/note4.png"/></a>
</div>
<!-- 旅游栏 -->
<div id="travel_all">
<div id="word">铁路旅游</div>
<hr style="width: 50px;color: red;"/><hr color="aliceblue"/><br>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c201644427880112ae">
<dd>
<img src="../img/11.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”高品质旅游版专线列车</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">2560</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c20164457aed6012db">
<dd>
<img src="../img/12.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”陇上江南·行摄山>水陇南</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">930</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016445b0fd5f1304">
<dd>
<img src="../img/13.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”华夏寻根·人文始祖天水</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">980</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446996d9813a9">
<dd>
<img src="../img/14.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”精品旅游线路</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">3380</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c201644684cc7c1388">
<dd>
<img src="../img/16.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”美丽甘南三日游</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">880</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="../img/17.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”青海湖、茶卡2日>游</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">880</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446ba8bc313cd">
<dd>
<img src="../img/15.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”敦煌一地三日游</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">2260</span>
</dt>
</a>
</dl>
<dl id="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446d31e1113e5">
<dd>
<img src="../img/18.png">
</dd>
<dt>
<p style="font-size: 13px;">"环西部火车游”嘉敦5日游</p>
<span id="item1" style="font-size: 14px;">¥</span>
<span id="item2" style="font-size: 18px;">1380</span>
</dt>
</a>
</dl>
</div>
<!-- 介绍栏 -->
<div class="all_introdce">
<div id="in1" class="introduce">
<h3 style="color: white; text-align: center;line-height: 40px;" id="last">最新发布</h3>
<ul type="square">
<li><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210113_32704.html" target="_blank">关于铁路部门调整预售期及退票费率规则的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210106_32657.html" target="_blank">铁路部门推出免费退票措施</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201905/t20190521_22980.html" target="_blank">候补购票操作说明</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201411/t20141126_2316.html" target="_blank">关于调整互联网、电话订票起售时间的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt_news/202102/t20210219_32984.html" target="_blank">中国铁路上海局集团有限公司关于2021年2月20日-2021年2</a></li>
</ul>
</div>
<div id="in2" class="introduce">
<h3 style="color: white; text-align: center;line-height: 40px;">常见问题</h3>
<ul type="square">
<li><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210113_32704.html" target="_blank">关于铁路部门调整预售期及退票费率规则的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210106_32657.html" target="_blank">铁路部门推出免费退票措施</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201905/t20190521_22980.html" target="_blank">候补购票操作说明</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201411/t20141126_2316.html" target="_blank">关于调整互联网、电话订票起售时间的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt_news/202102/t20210219_32984.html" target="_blank">中国铁路上海局集团有限公司关于2021年2月20日-2021年2</a></li>
</ul>
</div>
<div id="in3" class="introduce">
<h3 style="color: white; text-align: center;line-height: 40px;">信用信息</h3>
<ul type="square">
<li><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210113_32704.html" target="_blank">关于铁路部门调整预售期及退票费率规则的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/202101/t20210106_32657.html" target="_blank">铁路部门推出免费退票措施</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201905/t20190521_22980.html" target="_blank">候补购票操作说明</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt/201411/t20141126_2316.html" target="_blank">关于调整互联网、电话订票起售时间的公告</a></li>
<li style="margin-top: 26px;"><a href="https://www.12306.cn/mormhweb/zxdt_news/202102/t20210219_32984.html" target="_blank">中国铁路上海局集团有限公司关于2021年2月20日-2021年2</a></li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br>
<div id="image3"><img src="../img/002.png"/></div>
</body>
</html>
