Article directory
1. The code is as follows (example):
The photo is not uploaded, you can replace it yourself
<!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=" 简拼/全拼/汉字" /><br>
到达地 <input type="" name="" id="" value=" 简拼/全拼/汉字" />
</div>
出发日期<input type="" name="" id="" value=" 2022-09-18" /><br>
<div class="chaxun">
查 询
</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>更多></a>
</div>
<!--铁路旅游信息展示-->
<div class="t">
<ul>
<li class="t17-float">
<img src="./img/001.jpg" width="288px" height="160px" />
<p>“环西部火车游” 高品质旅游版专线列车</p>
<p>¥ 2590</p>
</li>
<li class="t17-float">
<img src="./img/002.jpg" width="288px" height="160px" />
<p>“环西部火车游” 高品质旅游版专线列车</p>
<p>¥ 2590</p>
</li>
<li class="t17-float">
<img src="./img/003.jpg" width="288px" height="160px" />
<p>“环西部火车游” 高品质旅游版专线列车</p>
<p>¥ 2590</p>
</li>
<li class="t17-float">
<img src="./img/004.jpg" width="288px" height="160px" />
<p>“环西部火车游” 高品质旅游版专线列车</p>
<p>¥ 2590</p>
</li>
<li class="t17-float">
<img src="./img/005.jpg" width="288px " height="160px" />
<p>“环西部火车游” 高品质旅游版专线列车</p>
<p>yen; 2590</p>
</li>
<li class="t17-float">
<img src="./img/006.jpg" width="288px" height="160px" />
<p>“环西部火车游” 高品质旅游版专线列车</p>
<p>¥ 2590</p>
</li>
<li class="t17-float">
<img src="./img/007.jpg" width="288px" height="160px" />
<p>“环西部火车游” 高品质旅游版专线列车</p>
<p>¥ 2590</p>
</li>
<li class="t17-float">
<img src="./img/008.jpg" width="288px" height="160px" />
<p>“环西部火车游” 高品质旅游版专线列车</p>
<p>¥ 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 中国铁道科学研究院集团有限公司 技术支持：铁旅科技有限公司</p>
<p>京公网安备 11010802038392号 | 京ICP备0520493号-4 ICP证：京B2-20202537 </p>
</div>
</main>
</body>
</html>
2. Read data
css part
* {
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;
}
Summarize
Today I would like to share with you an official website of 12306 that I wrote in the past few days, please give me a lot of advice~