html网页设计（旅游网站）

html 部分

	
		
		
		
	

	

	获取时间hhh 
	
	

		

			
			

				

					
TRAVEL DESTINATION
					
当季热门
					
旅行目的地
旅行嘉年华 走进华夏 叫醒耳朵
					

						

						

						

						

					
				
			
			
			
			

				

					
探索未知，让每一步都成为生活的风景

					

						

							
							
							
						
					
					
给自己一个假期，给心情一片蓝天
你的行走，世界的精彩。

						漫步云端，遇见最美的风景。
一路向阳，向着自由的梦想出发.
旅行可以更加了解不同地方的经济发展。
旅行更加感受到了世界的多样性.。
旅行可以更加快乐，更加充满激情地面对生活。
					
					
						登录
					
						注册
					
						资讯
					
						其它
				
				
			
		
		
世界旅行社
		

			

				

					
国内旅行
					
国际出游
					
旅游资讯
					
特别定制
					
自然悦途
				
			
			

				

					
城市介绍
					
南宁，简称“邕”，是广西壮族自治区首府，全区政治、经济、交通、科教文卫、金融和信息中心，是中国面向东盟开放合作的前沿城市、中国—东盟博览会永久举办地、北部湾经济区核心城市、国家“一带一路”有机衔接的重要门户城市。
					
					
					
					
				
				

					
畅游欧洲
					
					
					
					
					
					
					
					
					
				
				

					
盘点全球要早起欣赏的四大景点
					
					
					
					
				
				

					

						b
						o
						o
						k
						
						n
						o
						w
					
					
旅游规划方向：从宏观框架向操作性的实践转变；旅游规划方法：从感性向科学转变；旅游规划形态：从单一向多元转变；
					
					
					
				
				

					
拾味昆明 跟着味道走一座城
					
久居于此的人喜欢柔软这个词汇，连那些随着时光消失的地标和味道记忆也慢慢变得柔软。

						探访西沙那片美得癫狂的梦境
						享极致体验 乐和乐都主题公园
						花香弥漫丹霞山 最美人间四月天
					
					
					
					
					
					
				
			
		

		
	
	

		
据说，每个旅游城市都有一条专门用来骗游客的街
鲁朗旅游小镇，一个全新的西藏旅行目的地
		
去过很多城市的你们，很多人都有同样的疑问：为什么有些地方的热门景点大同小异 金秋十月，硕果累累。西藏旅游界发生了一件大事——历时4年精心打造的鲁朗国际旅游小镇正式接待游客啦！
			为推进全区新型城镇化健康发展，按照以人为本、注重生态、和谐发展的原则，遴选了20个沿路...
	
	

		
风光照片
		
		
		
		
		
		
		
		
	
	

		

			©版权所有：xxx 旅游地址：xxxxxxxxxxxx 邮编：050091
			

			联系方式：0311-85239666 旅游热线：0311-85239777
		
	
	

css部分：

body {
	width: 100%;
	height: 100%;
	font-family: "微软雅黑";
	font-size: 12px;
	columns: #fff;
	background-image: url(../images/背景照片.jpg);

}


body,
p,
ul,
li,
h4,
img {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.banner {
	width: 1000px;
	height: 285px;
	margin: 13px auto 15px auto;
	overflow: hidden;
}

.left {
	width: 640px;
	height: 285px;
	font-weight: bold;
	position: relative;
	float: left;
	background-image: url(../images/湖.gif);
}

.content_left {
	position: absolute;
	top: 75px;
	right: 45px;
	text-align: right;
}

.school_en {
	font-size: 16px;
}

.school_ch {
	font-size: 36px;
	font-family: "华文行楷";
	border-right: 5px solid #f90;
	padding-right: 10px;
}

.advertise {
	margin-top: 20px;
	font-size: 16px;
}

ul.style_a {
	margin-top: 25px;
	margin-left: 120px;
	list-style: none;
	overflow: hidden;
}

ul.style_a li {
	float: left;
	margin-left: 10px;
}

ul.style_a li a {
	background: #fff;
	width: 46px;
	height: 3px;
	text-align: center;
	line-height: 22px;
	display: block;
	font-size: 18px;
	opacity: 0.3;
}

.ul.style_a li.current a {
	opacity: 0.8;
}

.right {
	width: 360px;
	height: 285px;
	background: rgba(255, 255, 255, 0.2);
	float: right;
	position: relative;
}

.content_right {
	position: absolute;
	top: 30px;
	left: 20px;
	bottom: 30px;
	background: rgba(255, 255, 255, 0.2);
}

ul.style_icon {
	margin-top: 10px;
	margin-left: 25px;
}

div {
	width: 980px;
	margin: 5px auto;
}

#top {
	height: 40px;
	font-size: 30px;
	font-family: "宋体";
	font-style: oblique;
	font-weight: bold;
	text-shadow: 10px 10px 10px blue;
	text-align: center;
}

.tab {
	height: 300px;
	width: 980px;
	text-align: center;
	background-color: rgb(199, 190, 219);
}

.tab_list {
	height: 39px;
	border: 1px solid #ff5500;
	background-color: #f1f1f1;
}

.tab_list li {
	float: left;
	height: 39px;
	width: 156px;
	line-height: 39px;
	padding: 0 20px;
	text-align: center;
	cursor: pointer;
}

.tab_list .current {
	background-color: palevioletred;
	color: black;
}

.item_info {
	padding: 20px 0 0 20px;
}

.item {
	display: none;
}

#banner {
	height: 200px;
	background: rgba(255, 255, 255, 0.2);
}

#banner h1 {
	font-size: 30px;
	font-family: "华文新魏";
	text-align: center;
}

#banner p {
	font-size: 18px;
	font-size: "微软雅黑";
	font-style: oblique;
	color: aqua;
	letter-spacing: 5px;
	text-indent: 2em;
}


#content {
	width: 100%;
	height: 480px;
}
#content h1{
	font-size: 30px;
	font-family: "微软雅黑";
	text-align: center;
}

.inner {
	height: 30px;
	background-color: lavender;
}
#footer {
	width: 100%;
	height: 30px;
	background-color:rgba(255,255,255,0.3);
	text-align: center;
}

h1 {
	font-family: 宋体;
	border-bottom-style: solid;
}

运行效果如下：