此项目分为了以下几个板块:
1.导航栏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
border: 0px;
margin: 0px;
padding:0px;
}
.navi{
height: 40px;
background-color: #3b99fc;
}
.navi .navi_item1, .navi_item{
width: 145px;
height: 40px;
float: left;
list-style: none;
text-align: center;
line-height: 40px;
color: white;
}
.navi ul{
width: 1160px;
height: 40px;
margin: 0px auto;
}
.navi .navi_item:hover{
background-color: #3685ec;
}
.navi .navi_item1{
background-color: #2676e3;
}
.navi ul li{
font-size: 14px;
}
</style>
</head>
<body>
<div class="navi">
<ul>
<li class="navi_item1"><span>首页</span></li>
<li class="navi_item"><span>车票 ∨</span></li>
<li class="navi_item"><span>团购服务 ∨</span></li>
<li class="navi_item"><span>会员服务 ∨</span></li>
<li class="navi_item"><span>站车服务 ∨</span></li>
<li class="navi_item"><span>商旅服务 ∨</span></li>
<li class="navi_item"><span>出行指南 ∨</span></li>
<li class="navi_item"><span>信息查询 ∨</span></li>
</ul>
</div>
</body>
</html>
2.服务栏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.service_item{
width: 170px;
height: 80px;
float: left;
}
.service_item dt{
text-align: center;
}
.service_item dd{
text-align: center;
}
.service_item a{
text-decoration: none;
}
.service_item font{
font-size: 14px;
color: black;
}
.service_item img{
width: 50px;
height: 50px;
}
#service{
width: 1190px;
height: 80px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="service">
<dl class="service_item">
<dd>
<a href="https://kyfw.12306.cn/otn/resources/login.html">
<img src="img/ico1.png"/>
</a>
</dd>
<dt>
<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/resources/login.html">
<img src="img/ico2.png"/>
</a>
</dd>
<dt>
<a href="https://kyfw.12306.cn/otn/resources/login.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/ico3.png"/>
</a>
</dd>
<dt>
<a href="https://www.12306.cn/index/view/station/shared_Car.html">
<font>约车服务</font>
</a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="hhttps://www.12306.cn/index/view/station/hand.html">
<img src="img/ico4.png"/>
</a>
</dd>
<dt>
<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/ico5.png"/>
</a>
</dd>
<dt>
<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/ico6.png"/>
</a>
</dd>
<dt>
<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/resources/login.html">
<img src="img/ico7.png"/>
</a>
</dd>
<dt>
<a href="https://kyfw.12306.cn/otn/resources/login.html">
<font>用户反馈</font>
</a>
</dt>
</dl>
</div>
</body>
</html>
3.广告栏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.ad_item{
width: 590px;
height: 160px;
float: left;
}
.ad_item img{
width: 590px;
height: 160px;
}
.ad{
width: 1190px;
height: 340px;
border: 1px solid white;
margin: 0px auto;
}
#ad1,#ad3{
margin-right: 10px;
}
#ad4,#ad3{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="ad">
<div id="ad1" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="img/截屏2022-08-27 14.41.30.png"/>
</a>
</div>
<div id="ad2" class="ad_item">
<a href="https://exservice.12306.cn/excater/index.html" target="_blank">
<img src="img/截屏2022-08-27 14.41.50.png"/>
</a>
</div>
<div id="ad3" class="ad_item">
<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank">
<img src="img/截屏2022-08-27 14.42.10.png"/>
</a>
</div>
<div id="ad4" class="ad_item">
<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank">
<img src="img/截屏2022-08-27 14.42.32.png"/>
</a>
</div>
</div>
</body>
</html>
4.旅游栏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
.travel_item{
width: 288px;
height: 368px;
float: left;
margin: 5px;
}
.travel_item a{
text-decoration: none;
}
.travel_item p{
color: black;
font-size: 14px;
line-height: 40px;
}
.travel_item p:hover{
color: #3b99fc;
}
.travel_item span{
color: #ff8201;
font-size: 20px;
}
.travel_item font{
font-size:14px;
}
.travel_item dt{
padding-left: 10px;
}
#travel{
width: 1200px;
height:508px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="travel">
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
</div>
</body>
</html>
5.介绍栏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*选中body中的所有标签*/
*{
/*border: 1px solid orange;*/
/*去掉所有留白*/
margin: 0px;
padding: 0px;
}
.introduce{
width:388px;
height:298px;
border: 1px solid #3b99fc;
float: left;
}
.introduce h3{
height: 40px;
background-color: #3b99fc;
color: white;
text-align: center;
line-height: 40px;
}
.introduce ul{
/*border: 1px solid red;*/
margin-left: 50px;
margin-top: 30px;
}
.introduce a{
text-decoration: none;
font-size: 15px;
color: darkslategray;
}
.introduce li{
height: 40px;
list-style: none;
/*
图片路径问题
*相对路径 相对于当前文件本身路径
*/
list-style-image: url(img/dot.png);
}
.introduce a:hover{
color: black;
}
.outerintroudce{
width: 74.375rem;
height: 18.75rem;
/*border: 0.0625rem solid green;*/
margin: 0rem auto;
}
#in1,#in2{
margin-right: 0.625rem;
}
</style>
</head>
<body>
<div class="outerintroudce">
<div id="in1" class="introduce">
<h3>最新发布</h3>
<ul>
<li><a href="http://www.12306.cn/mormhweb/zxdt/202206/t20220617_37625.html">铁路旅客禁止、限制携带和托运物品目录</a></li>
<li><a href="http://www.12306.cn/mormhweb/zxdt/202107/t20210731_34834.html">公告</a></li>
<li><a href="http://www.12306.cn/mormhweb/zxdt/201512/t20151201_3949.html">公告</a></li>
<li><a href="http://www.12306.cn/mormhweb/zxdt_news/202208/t20220826_38036.html">中国铁路上海局集团有限公司关于2022年8月31日-2022年9月2日增开部分旅客列车的公告</a></li>
<li><a href="http://www.12306.cn/mormhweb/zxdt_news/202208/t20220825_38031.html">中国铁路上海局集团有限公司关于2022年8月26日-2022年8月28日增开部分旅客列车的公告</a></li>
</ul>
</div>
<div id="in2" class="introduce">
<h3>常见问题</h3>
<ul>
<li><a href="https://kyfw.12306.cn/otn/gonggao/ticketWindow.html;">售票窗口购票</a></li>
<li><a href="https://kyfw.12306.cn/otn/gonggao/onlineEndorse.html;">互联网改签、变更到站</a></li>
<li><a href="https://kyfw.12306.cn/otn/gonggao/luggage.html">随身携带品</a></li>
<li><a href="https://kyfw.12306.cn/otn/gonggao/ticketLost.html">丢失购票时使用的有效身份证件</a></li>
<li><a href="https://kyfw.12306.cn/otn/gonggao/gsgcp.html">广深港跨境列车</a></li>
</ul>
</div>
<div class="introduce">
<h3>信用信息</h3>
<ul>
<li><a href="#">艾麦尔·奥斯曼</a></li>
<li><a href="#">曹俊静</a></li>
<li><a href="#">比包拉提.木沙尔汗</a></li>
<li><a href="#">马文德</a></li>
<li><a href="#">海依纳尔·努勒别克</a></li>
</ul>
</div>
</div>
</body>
</html>
6.提示栏:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.note_item1 .note_item2{
width: 50px;
height: 900px;
}
.note_item1{
width: 50px;
height: 88px;
margin-bottom: 1px;
}
.note_item2{
width: 50px;
height: 70px;
}
.note{
width: 300px;
height: 900px;
/*border: 1px solid red;*/
position: fixed;
right: 0px;
top: 100px;
}
</style>
</head>
<body>
<div class="note">
<div class="note_item1">
<img src="img/note1.png"/>
</div>
<div class="note_item1">
<img src="img/note2.png"/>
</div>
<div class="note_item1">
<img src="img/note3.png"/>
</div>
<div class="note_item2">
<img src="img/note4.png"/>
</div>
</div>
</div>
</body>
</html>
项目整合:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入css样式表-->
<link rel="stylesheet"href="css/12306.css"/>
</head>
<body>
<!--导航栏-->
<div class="navi">
<ul>
<li class="navi_item1"><span>首页</span></li>
<li class="navi_item"><span>车票 ∨</span></li>
<li class="navi_item"><span>团购服务 ∨</span></li>
<li class="navi_item"><span>会员服务 ∨</span></li>
<li class="navi_item"><span>站车服务 ∨</span></li>
<li class="navi_item"><span>商旅服务 ∨</span></li>
<li class="navi_item"><span>出行指南 ∨</span></li>
<li class="navi_item"><span>信息查询 ∨</span></li>
</ul>
</div>
<br />
<br />
<!--服务栏-->
<div id="service">
<dl class="service_item">
<dd>
<a href="https://kyfw.12306.cn/otn/resources/login.html">
<img src="img/ico1.png"/>
</a>
</dd>
<dt>
<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/resources/login.html">
<img src="img/ico2.png"/>
</a>
</dd>
<dt>
<a href="https://kyfw.12306.cn/otn/resources/login.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/ico3.png"/>
</a>
</dd>
<dt>
<a href="https://www.12306.cn/index/view/station/shared_Car.html">
<font>约车服务</font>
</a>
</dt>
</dl>
<dl class="service_item">
<dd>
<a href="hhttps://www.12306.cn/index/view/station/hand.html">
<img src="img/ico4.png"/>
</a>
</dd>
<dt>
<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/ico5.png"/>
</a>
</dd>
<dt>
<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/ico6.png"/>
</a>
</dd>
<dt>
<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/resources/login.html">
<img src="img/ico7.png"/>
</a>
</dd>
<dt>
<a href="https://kyfw.12306.cn/otn/resources/login.html">
<font>用户反馈</font>
</a>
</dt>
</dl>
</div>
<br />
<!--广告栏-->
<div class="ad">
<div id="ad1" class="ad_item">
<a href="https://cx.12306.cn/tlcx/index.html" target="_blank">
<img src="img/adv1.png"/>
</a>
</div>
<div id="ad2" class="ad_item">
<a href="https://exservice.12306.cn/excater/index.html" target="_blank">
<img src="img/adv2.png"/>
</a>
</div>
<div id="ad3" class="ad_item">
<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank">
<img src="img/adv3.png"/>
</a>
</div>
<div id="ad4" class="ad_item">
<a href="https://kyfw.12306.cn/otn/resources/login.html" target="_blank">
<img src="img/adv4.png"/>
</a>
</div>
</div>
<br />
<br />
<!--旅游栏-->
<div id="travel">
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
<dl class="travel_item">
<a href="https://travel.12306.cn/portal/travel/detail/ff80808157df83c2016446b4813013c0">
<dd>
<img src="img/travel.png" />
</dd>
<dt>
<p>环西部火车游”茶卡盐湖</p>
<span><font>¥</font> 880</span>
</dt>
</a>
</dl>
</div>
<br />
<br />
<!--介绍栏-->
<div class="outerintroudce">
<div id="in1" class="introduce">
<h3>最新发布</h3>
<ul>
<li><a href="http://www.12306.cn/mormhweb/zxdt/202206/t20220617_37625.html">铁路旅客禁止、限制携带和托运物品目录</a></li>
<li><a href="http://www.12306.cn/mormhweb/zxdt/202107/t20210731_34834.html">公告</a></li>
<li><a href="http://www.12306.cn/mormhweb/zxdt/201512/t20151201_3949.html">公告</a></li>
<li><a href="http://www.12306.cn/mormhweb/zxdt_news/202208/t20220826_38036.html">中国铁路上海局集团有限公司关于2022年8月31日-2022年9月2日增开部分旅客列车的公告</a></li>
<li><a href="http://www.12306.cn/mormhweb/zxdt_news/202208/t20220825_38031.html">中国铁路上海局集团有限公司关于2022年8月26日-2022年8月28日增开部分旅客列车的公告</a></li>
</ul>
</div>
<div id="in2" class="introduce">
<h3>常见问题</h3>
<ul>
<li><a href="https://kyfw.12306.cn/otn/gonggao/ticketWindow.html;">售票窗口购票</a></li>
<li><a href="https://kyfw.12306.cn/otn/gonggao/onlineEndorse.html;">互联网改签、变更到站</a></li>
<li><a href="https://kyfw.12306.cn/otn/gonggao/luggage.html">随身携带品</a></li>
<li><a href="https://kyfw.12306.cn/otn/gonggao/ticketLost.html">丢失购票时使用的有效身份证件</a></li>
<li><a href="https://kyfw.12306.cn/otn/gonggao/gsgcp.html">广深港跨境列车</a></li>
</ul>
</div>
<div class="introduce">
<h3>信用信息</h3>
<ul>
<li><a href="#">艾麦尔·奥斯曼</a></li>
<li><a href="#">曹俊静</a></li>
<li><a href="#">比包拉提.木沙尔汗</a></li>
<li><a href="#">马文德</a></li>
<li><a href="#">海依纳尔·努勒别克</a></li>
</ul>
</div>
</div>
<br />
<br />
<!--提示栏-->
<div class="note">
<div class="note_item1">
<img src="img/note1.png"/>
</div>
<div class="note_item1">
<img src="img/note2.png"/>
</div>
<div class="note_item1">
<img src="img/note3.png"/>
</div>
<div class="note_item2">
<img src="img/note4.png"/>
</div>
</div>
</body>
</html>
CSS整合:
/*------------------导航栏样式----------------------*/
*{
border: 0px;
margin: 0px;
padding:0px;
}
.navi{
height: 40px;
background-color: #3b99fc;
}
.navi .navi_item1, .navi_item{
width: 145px;
height: 40px;
float: left;
list-style: none;
text-align: center;
line-height: 40px;
color: white;
}
.navi ul{
width: 1160px;
height: 40px;
margin: 0px auto;
}
.navi .navi_item:hover{
background-color: #3685ec;
}
.navi .navi_item1{
background-color: #2676e3;
}
.navi ul li{
font-size: 14px;
}
/*-------------服务栏样式-------------*/
.service_item{
width: 170px;
height: 80px;
float: left;
}
.service_item dt{
text-align: center;
}
.service_item dd{
text-align: center;
}
.service_item a{
text-decoration: none;
}
.service_item font{
font-size: 14px;
color: black;
}
.service_item img{
width: 50px;
height: 50px;
}
#service{
width: 1190px;
height: 80px;
margin: 0px auto;
}
/*-------------介绍栏样式-------------*/
.introduce{
width:388px;
height:298px;
border: 1px solid #3b99fc;
float: left;
}
.introduce h3{
height: 40px;
background-color: #3b99fc;
color: white;
text-align: center;
line-height: 40px;
}
.introduce ul{
/*border: 1px solid red;*/
margin-left: 50px;
margin-top: 30px;
}
.introduce a{
text-decoration: none;
font-size: 15px;
color: darkslategray;
}
.introduce li{
height: 40px;
list-style: none;
/*向上寻找一层*/
list-style-image: url(../img/dot.png);
}
.introduce a:hover{
color: black;
}
.outerintroudce{
width: 74.375rem;
height: 18.75rem;
/*border: 0.0625rem solid green;*/
margin: 0rem auto;
}
#in1,#in2{
margin-right: 0.625rem;
}
/*-------------广告栏样式-------------*/
.ad_item{
width: 590px;
height: 160px;
float: left;
}
.ad_item img{
width: 590px;
height: 160px;
}
.ad{
width: 1190px;
height: 340px;
border: 1px solid white;
margin: 0px auto;
}
#ad1,#ad3{
margin-right: 10px;
}
#ad4,#ad3{
margin-top: 20px;
}
/*-------------旅游栏样式-------------*/
.travel_item{
width: 288px;
height: 368px;
float: left;
margin: 5px;
}
.travel_item a{
text-decoration: none;
}
.travel_item p{
color: black;
font-size: 14px;
line-height: 40px;
}
.travel_item p:hover{
color: #3b99fc;
}
.travel_item span{
color: #ff8201;
font-size: 20px;
}
.travel_item font{
font-size:14px;
}
.travel_item dt{
padding-left: 10px;
}
#travel{
width: 1200px;
height:508px;
margin: 0px auto;
}
/*-------------提示栏样式-------------*/
.note_item1,.note_item2{
width: 50px;
}
.note_item1{
height:188 px;
margin-bottom: 2px;
}
.note_item2{
height: 70px;
}
.note{
width: 50px;
height:355 ;
position: fixed;
right: 40px;
top: 100px;
}