模拟中国铁路12306网页
Posted Al_tair
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模拟中国铁路12306网页相关的知识，希望对你有一定的参考价值。
模拟中国铁路12306网页
大家好呀！我是小笙，本期内容是关于用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>
以上是关于模拟中国铁路12306网页的主要内容，如果未能解决你的问题，请参考以下文章