div css旅游网站模板-基于HTML的旅游网站项目设计与实现——千岛湖旅游景区网站模板（6页）HTM

bendan520 2023年8月23日网站模板 0

【作者主页-获取更多优质源码】

【Web后端期末作业-优质项目完成项目实战案例（1000套）】

文章目录

1. 网站标题

旅游景点介绍、旅游风情园、家乡介绍等网站设计制作。

2. 网站说明✍️

旅游景点介绍，旅游公园简介，行政区划、地理环境、自然环境、教育、体育、旅游景点、城市荣誉等。网站聚焦当地风土人情，通过宾客留言增强旅客的互动体验。同时，地方旅游网站各网页均采用统一的设计风格，强化统一城市整体面貌的宣传效果。最重要的是让旅游网站独特的风格更能吸引浏览者。

3.网站介绍

网站布局方面：拟采用目前主流的浮动网页布局结构，兼容各大主流浏览器，效果稳定。

网站程序：拟采用最新的网页编程语言HTML5+CSS3+JS编程语言来完成网站的功能设计。并保证网站代码兼容目前市面上所有主流浏览器，达到了打开后立即看到网站的效果。

网站素材方面：计划从各个平台收集好看的图片素材，精心挑选适合网页风格的图片div css旅游网站模板，然后用PS制作出适合网页规格的图片。

网站文件方面：网站系统文件的类型包括：html网页结构文件、css网页样式文件、js网页特效文件、images网页图像文件；

网页编辑：网页作品的代码简单，可以使用任何HTML编辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等html编辑软件来运行、修改和编辑等） .)。

在：

（1）html文件包含：index.html为首页，其他html为二级页面；

（2）css文件包括：所有css页面样式、文字滚动、图片缩放等；

（3）js文件包括：实现动态轮播效果、点击风暴等的js（部分网页使用了js代码）。

4. 网站的有效性

网站设计制作的重点是网页整体设计的布局和网页整体内容的主题选择。

网站设计方面：计划达到网页设计简洁、大方的效果。

网站功能方面：计划实现各页面之间的链接跳转功能、鼠标悬停在文字上时变色功能、首页简单的动态图片切换功能、简单的表单提交功能。

五、网站代码制作部分

（1）网站首页的布局确定了每只蓝筹股的内容，采用DIV+CSS布局。另外，首页用到的知识主要有图片插入、图片动态切换、导航栏、使用CSS固定字体、文字大小、文字颜色、背景颜色等。

（2）页面采用DIV+CSS布局，用到的知识主要包括图片插入、导航栏、CSS固定字体、文字大小、文字颜色、背景颜色。

(3)页面的表单部分采用DIV+CSS布局。用到的知识主要包括使用表单表单、输入文本框和输入提交按钮来完成表单信息收集。使用 CSS 设置输入按钮的文本大小和颜色。

HTML结构代码

<!DOCTYPE html>
<html>
	<head>
		<title>首页</title>
		<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> 
		<link rel="stylesheet" type="text/css" href="css/initi.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		
		<link rel="stylesheet" type="text/css" href="css/plus1.css" />
		
		
		<link type="text/css" href="css/style.css" rel="stylesheet"/>
		
		<script type="text/javascript" src="js/jquery.js"></script>
		
		<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
		<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
		
		<script type="text/javascript">
			$(function() {
				//焦点图插件代码开始
				$(".main_visual").hover(
					function(){
						$("#btn_prev,#btn_next").fadeIn()
					},
					function(){
						$("#btn_prev,#btn_next").fadeOut()
					}
				);
				$dragBln = false;
				$(".main_image").touchSlider({
					flexible : true,
					speed : 200,
					btn_prev : $("#btn_prev"),
					btn_next : $("#btn_next"),
					paging : $(".flicking_con a"),
					counter : function (e){
						$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
					}
				});
				$(".main_image").bind("mousedown", function() {
					$dragBln = false;
				});
				
				$(".main_image").bind("dragstart", function() {
					$dragBln = true;
				});
				
				$(".main_image a").click(function(){
					if($dragBln) {
						return false;
					}
				});
				timer = setInterval(function(){
					$("#btn_next").click();
				}, 5000);
				$(".main_visual").hover(
					function(){
						clearInterval(timer);
					},
					function(){
						timer = setInterval(
							function(){
								$("#btn_next").click();
							},5000
						);
					}
				);
				
				$(".main_image").bind("touchstart",function(){
					clearInterval(timer);
				}).bind("touchend", function(){
					timer = setInterval(function(){
						$("#btn_next").click();
					}, 5000);
				});
				//焦点图插件代码结束
				
				//topbar 单击样式
				$(".topbar li a").click(function(){
					$(this).css("color", "#0153a5");
					$(this).parent().siblings().find("a").css("color", "#666");
				});
				
				//鼠标经过列表样式
				$(".left_ul li").hover (
					function(){
						$(this).addClass("li_click_b");
					},
					function(){
						$(this).removeClass("li_click_b");
					}
				);
				
				<!-- 下面滚动图插件开始 -->
				$li1 = $(".apply_nav .apply_array");
				$window1 = $(".apply .apply_w");
				$left1 = $(".apply .img_l");
				$right1 = $(".apply .img_r");
				$window1.css("width", $li1.length*176);
				var lc1 = 0;
				var rc1 = $li1.length-5;
				$left1.click(function(){
					if (lc1 < 1) {
						
						return;
					}
					lc1--;
					rc1++;
					$window1.animate({left:'+=176px'}, 1000);
				});
				$right1.click(function(){
					if (rc1 < 1){
						
						return;
					}
					lc1++;
					rc1--;
					$window1.animate({left:'-=176px'}, 1000);
				});
				<!-- 下面滚动图插件结束 -->
			});
		</script>
	</head>
	<body>
		<div class="main">
			<div class="header">
				<div class="help">
					<a href="">联系我们</a> | 
					<a href="">站点帮助</a> | 
					<a href="">问题反馈</a> 
				</div>
			</div>
			<div class="topbar">
				<ul>
					<li><a class="clicked" href="index.html">首页</a></li>
					<li><a href="about.html">公园简介</a></li>
					<li><a href="news.html">新闻动态</a></li>
					<li><a href="show.html">图片墙</a></li>
					<li><a href="map.html">详细地址</a></li>
					<li><a>图片展示</a></li>
							<ul class="left_ul">
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li ><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
								<li><a href="">今天是阳光明媚，是打球的好日子。</a><span class="right_time">[2014-12-19]</span></li>
							</ul>
							<div class="clear: both"></div>
						</div>
						<div class="shadow">
							<img src="images/shadow.jpg" />
						</div>
					</div>
					<div class="clear"></div>
				</div>
				
				
				
				
				<div class="apply">
					<div class="img_l"><img src="images/left.gif" /></div>
					<div class="apply_nav">
						<div class="apply_w">
							<div class="apply_array">
								<div class="apply_img"><img src="images/sinaminiblog.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/kaixin001.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/renren.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/sinaminiblog.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/kaixin001.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/renren.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/sinaminiblog.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">新浪微博</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/kaixin001.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">开心001</a></div>
							</div>
							<div class="apply_array">
								<div class="apply_img"><img src="images/renren.gif" /></div>
								<div class="apply_info"><a href="http://www.17sucai.com/" target="_blank">人人网</a></div>
							</div>
							
						</div>
					</div>
					<div class="img_r"><img src="images/right.gif" /></div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="footer">
			<p class="address">地址：陕西省宝鸡市千阳县南寨镇闫家村五组27号</p>
			<p>张旭超个人版权所有</p>
		</div>
		<p style="text-align: center">
			来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a>
		</p>
	</body>
</html>

CSS样式代码


.apply{width:950px;margin:0px 0px 10px 0px; _position: relative;}
.apply_array{border:#cdcdcd 1px solid;padding:16px;width:110px;float:left;height:140px;margin-right:32px;}
.apply_array .vote{position:absolute;line-height:26px;margin-top:10px;padding-left:29px;width:83px;display:block;background:url(../images/vote.gif) no-repeat 0px 0px;height:26px;color:#282828;margin-left:-6px;text-decoration:none;}
.apply_last{margin-right:0px}
.apply_img{text-align:center;width:110px;display:table-cell;background:#e2e2e2;height:100px;font-size:95px;vertical-align:middle}
.apply_array a{text-decoration:underline}
.apply_array a:hover{color:#e01111}
.apply_info{text-align:center;padding:15px;}
.apply_comment{text-align:center}
.apply_info a{line-height:17px;font-weight:700}
.apply_nav{position:relative;width:850px;float:left;height:195px;overflow:hidden}
.apply_w{position:absolute;margin-top:0px;width:1000px;float:left;left:0px}
.apply .img_l{padding:70px 12px 0 12px;float:left;cursor:pointer;}
.apply .img_r{padding:70px 12px 0 12px;float:left;cursor:pointer; _position: absolute; _right: -10px; _top: 0px;}

6.遇到的问题以及如何解决

在培训过程中，我遇到了很多困难，比如如何为网页收集合适的图片素材，如何让网页的配色看起来更加自然舒适，如何使用PS剪切合适大小的图片，以及制作时如何设计表格等等，最后通过网上搜索和请教别人得到了一个很好的解决方案。

七、培训总结

通过本次网页设计与制作培训，您可以灵活运用所学的知识和方法制作简单的网页，掌握个人网站建设的方法和基本网站建设的流程。用Dreamweaver、vscode、hbuider等制作网页更加得心应手。在培训过程中，我努力充分利用老师所教授的知识来巩固所学的知识。为了取得更好的疗效，我还阅读和参考了其他资料，学习了更多的网页处理方法。在制作网页的过程中遇到了很多问题，通过查找资料或者询问朋友都解决了。通过这次综合培训，我收获很多div css旅游网站模板，学以致用。在实践的过程中，我可以学习和巩固知识，有更深的记忆。网页制作是一门实践性很强的学科，值得以后进一步研究。在这次培训中，我也感觉自己的方法太少，以至于很多想法没有实现。在接下来的学习过程中，我会对网页制作有更深入的了解，做出更成熟的网页。

div css旅游网站模板-基于HTML的旅游网站项目设计与实现——千岛湖旅游景区网站模板（6页）HTM

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复