前端HTML12306

此项目分为了以下几个板块:

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>车票&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>团购服务&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>会员服务&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>站车服务&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>商旅服务&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>出行指南&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>信息查询&nbsp;&nbsp;&or;</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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>车票&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>团购服务&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>会员服务&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>站车服务&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>商旅服务&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>出行指南&nbsp;&nbsp;&or;</span></li>
				<li class="navi_item"><span>信息查询&nbsp;&nbsp;&or;</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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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>&yen;</font>&nbsp;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;
				
			}
					

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值