同程旅游 html

最新推荐文章于 2024-06-24 14:10:01 发布

原创最新推荐文章于 2024-06-24 14:10:01 发布 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

html 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了同程旅游网站在HTML结构和CSS样式设计方面的实践，揭示了如何通过有效的HTML标记来组织内容，并利用CSS实现响应式布局和视觉效果，提升用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>
	</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			margin: 0;
		}
		.div1{
			border-style: none;
			display: block;
			height: 80px;
		}
		.img1{
			margin-top: 15px;
		}
		.div11{
			float: left;
			padding-left: 242px;
			padding-right: 190px;
		}
		.div12{
			float: left;
		}
		ul{
			list-style-type: none;
			margin: 0;
			width: 800px;
		}
		li{
			display: inline-block;
			text-align: center;
			border: none;
			float: left;
			font-size: 20px;
			width: 160px;
			height: 72px;
			line-height: 80px;
		}
		a:hover{
        	color:orange;
        	border-bottom: 3px solid orange;
		}
		a{
			color: #333;
			text-decoration: none;
		}
		.div2{
			background: #ddd;
			height:560px;
        	width:1200px;
        	padding:20px 242px 20px 242px;
        	display:block;
        	margin-bottom:0;
		}
		.div21{
			width:398px;
       		height:560px;
        	float:left;
        	margin-right:2px;
        	background:url(images/visa1.jpg);
		}
		.div211{
			margin-top:487px;
        	height:73px;
        	background-color:rgba(0,0,0,0.4);
        	text-align: center;
		}
		.div2111{
			font-size:20px;
        	color:white;
        	padding-left:38px;
        	float:left;
        	line-height:73px;
		}
		.div2112{
			font-size:30px;
        	color:white;
        	line-height:73px;
        	margin-right: 95px;
		}
		.div22{
			width:398px;
			height: 280px;
        	float:left;
        	margin-right:4px;
        	margin-bottom:4px;
        	background:url(images/visa2.jpg);
		}
		.div221{
			margin-top:231px;
        	height:47px;
        	background-color:rgba(0,0,0,0.4);
        	text-align: center;
		}
		.div2211{
			font-size:18px;
        	color:white;
        	padding-left:38px;
        	float:left;
        	line-height:47px;
		}
		.div2212{
			font-size:26px;
        	color:white;
        	margin-right:100px;
        	line-height:47px;
		}
		.div23{
			width:398px;
			height: 280px;
        	float:left;
        	margin-bottom:4px;
        	margin-bottom:4px;
        	background:url(images/visa3.jpg);
		}
		.div24{
			width:398px;
			height: 280px;
        	float:left;
        	margin-right:4px;
        	background:url(images/visa4.jpg);
		}
		.div25{
        	width:398px;
        	height: 280px;
        	float:left;
        	background:url(images/visa5.jpg);			
		}
		.div3{
		   	height:120px;
        	background-color:#000;
        	text-align: center;
		}
		.div31{
			color:#fff;
        	line-height:120px;
		}
	</style>
</head>
<body>
	<div class="div1">
		<div class="div11">
			<img class="img1" src="images/logotc.png">
		</div>
		<div class="div12">
			<ul>
				<li><a href="https://www.ly.com/?refid=4140683">首页</a></li>
				<li><a href="https://so.ly.com/hot?q=%E7%83%AD%E9%97%A8%E8%B7%AF%E7%BA%BF">热门路线</a></li>
				<li><a href="https://so.ly.com/hot?q=%E7%AD%BE%E8%AF%81%E6%8E%A8%E8%8D%90">签证推荐</a></li>
				<li><a href="https://so.ly.com/hot?q=%E9%85%92%E5%BA%97%E9%A2%84%E8%AE%A2">酒店预订</a></li>
				<li><a href="https://so.ly.com/hot?q=%E4%BD%BF%E5%91%BD%E6%84%BF%E6%99%AF">使命愿景</a></li>
			</ul>
		</div>
	</div>
	<div class="div2">
		<div class="div21">
			<div class="div211">
				<div class="div2111">日本旅游签证</div>
				<div class="div2112">¥420/人</div>
			</div>
		</div>
		<div class="div22">
			<div class="div221">
				<div class="div2111">新加坡旅游签证</div>
				<div class="div2112">¥370/人</div>
			</div>
		</div>
		<div class="div23">
			<div class="div221">
				<div class="div2111">马来西亚旅游签证</div>
				<div class="div2112">¥450/人</div>
			</div>
		</div>
		<div class="div24">
			<div class="div221"> 
				<div class="div2111">申根旅游签证</div>
				<div class="div2112">¥999/人</div>
			</div>
		</div>
		<div class="div25">
			<div class="div221">
				<div class="div2111">美国旅游签证</div>
				<div class="div2112">¥1380/人</div>
			</div>
		</div>
	</div>
	<div class="div3">
		<div class="div31">苏ICP备000号、2014-2017 版权所有</div>
	</div>	
</body>
</html>