当前位置：网站首页>旅游住宿酒店14页
旅游住宿酒店14页
2022-08-11 05:16:00 【HTML网页设计】
学生HTML静态网页基础水平制作，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
精彩专栏推荐
【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】
一、网站题目
旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用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代码）。
四、网站效果
网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。
五、网站代码制作部分
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。
HTML结构代码🧱
<html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>旅游住宿农家乐类()</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="order by dede58.com" />
<link href="style/style.css" rel="stylesheet">
<script src="js/jquery.js" ></script>
<script src="js/jquery.superslide.2.1.1.js" ></script>
<script src="js/search.js" ></script>
<script src="js/nav.js" ></script>
<script src="js/jqselect.js" ></script>
<script src="js/jquery.validator.js" ></script>
<script src="js/zh_cn.js" ></script>
<script src="js/mobile.js" ></script>
<meta http-equiv="mobile-agent" content="format=xhtml;url=index.php.htm" >
<script type="text/javascript">if(window.location.toString().indexOf('pref=padindex') != -1){
}else{
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href="index.php.htm"/*tpa=http://demo3805.zancms.com/m/index.php*/;}else if(/iPad/i.test(navigator.userAgent)){
}else{
}}catch(e){
}}}}</script>
</head>
<body>
<!--顶部开始-->
<div class="top_bg">
<div class="top"> <a href="index.htm" title="旅游住宿农家乐类()" class="logo"> <img src="images/logo.png" alt="旅游住宿农家乐类()"></a>
<div class="toptel">
<div class="tel">服务热线：<span>+86-0000-96877</span></div>
</div>
</div>
</div>
<!--顶部结束-->
<!--导航开始-->
<div class="nav_bg">
<ul class="nav">
<li><a title="网站首页" href="index.htm" >网站首页</a> </li>
<li><a title="景点介绍" href="index-1.htm" >景点介绍</a>
<dl>
</dl>
</li><li><a title="客房展示" href="index-2.htm" >客房展示</a>
<dl>
<dd><a title="标准间" href="index-3.htm" >标准间</a></dd>
<dd><a title="多人间" href="index-4.htm" >多人间</a></dd>
<dd><a title="双人间" href="index-5.htm" >双人间</a></dd>
<dd><a title="商务间" href="index-6.htm" >商务间</a></dd>
</dl>
</li><li><a title="景点新闻" href="index-7.htm" >景点新闻</a>
<dl>
</dl>
</li><li><a title="路线推荐" href="index-8.htm" >路线推荐</a>
<dl>
</dl>
</li><li><a title="农家大院" href="index-9.htm" >农家大院</a>
<dl>
</dl>
</li><li><a title="特色美食" href="index-10.htm" >特色美食</a>
<dl>
</dl>
</li><li><a title="活动专题" href="index-11.htm" >活动专题</a>
<dl>
</dl>
</li><li><a title="在线留言" href="index-12.htm" >在线留言</a>
<dl>
</dl>
</li><li><a title="联系我们" href="index-13.htm" >联系我们</a>
<dl>
</dl>
</li>
</ul>
</div>
<!--导航结束-->
<div class="banner">
<div class="banner_top"></div>
<!--幻灯片大图开始-->
<div id="slideBox" class="slideBox">
<div class="bd">
<ul>
<li style="background: url(images/banner1.jpg) center center no-repeat;"><a href="#"><img src="images/no.gif" /></a></li>
<li style="background: url(images/banner1.jpg) center center no-repeat;"><a href="#"><img src="images/no.gif" /></a></li>
</ul>
</div>
<div class="hd">
<ul>
<li></li>
<li></li>
</ul>
</div>
<a href="javascript:void(0)" class="prev"></a> <a href="javascript:void(0)" class="next"></a> </div>
<script src="js/banner.js" ></script>
<!--幻灯片大图结束-->
</div>
<div class="marquee_box">
<div class="marquee_bg">
<div class="marquee_center">
<!--网站公告开始-->
<div class="mar_left">
<p>站内公告：</p>
<marquee scrollamount="3">
诚信为本：市场永远在变，诚信永远不变。
</marquee>
</div>
<!--网站公告结束-->
<!--搜索栏开始-->
<div class="search">
<form name="formsearch" action="http://demo3805.zancms.com/plus/search.php" method="get" onsubmit="return checksearch(this)">
<input type="hidden" name="kwtype" value="0" />
<input class="text" type="text" name="q" value="请输入关键字" onfocus="if(this.value==defaultValue)this.value=''" onblur="if(this.value=='')this.value=defaultValue">
<input type="submit" title="搜索" class="btn pngFix" value=""/>
</form>
<script type=text/javascript> jQuery(document).ready(function() {
jQuery("#rid").selectbox(); }); </script>
</div>
<!--搜索栏结束-->
</div>
</div>
</div>
<div class="con_bg">
<!--客房展示开始-->
<div class="title1"><span>客</span>
<p>客房展示 GUEST ROOM</p>
<a href="index-2.htm" title="更多" class="more">更多</a> </div>
<div class="con1">
<div class="con1_left"> <img src="images/kfzs.jpg" width="225" height="280" alt="" />
<div class="con1_left_font">
<p>客房展示图</p>
<div>225x280 [不可删除]，这里是客房展示介绍这里是客房展示介绍这里是客房展示介绍...</div>
</div>
</div>
<ul class="con1_list">
<li>
<div class="con1_img"><img src="images/1-160Q113202Q14.jpg" alt="产品展示标题" width="222" height="167"/><span class="zoom"></span></div>
<p><a href="22.html" title="产品展示标题">产品展示标题</a></p>
<div>家住杭州采荷小区的市民李先生日前碰上了一件烦心事：一个星期连丢了两辆自...</div>
</li>
<li>
<div class="con1_img"><img src="images/1-160Q1132012V4.jpg" alt="产品展示标题" width="222" height="167"/><span class="zoom"></span></div>
<p><a href="23.html" title="产品展示标题">产品展示标题</a></p>
<div>家住杭州采荷小区的市民李先生日前碰上了一件烦心事：一个星期连丢了两辆自...</div>
</li>
<li>
<div class="con1_img"><img src="images/1-160Q1131950391.jpg" alt="产品展示标题" width="222" height="167"/><span class="zoom"></span></div>
<p><a href="29.html" title="产品展示标题">产品展示标题</a></p>
<div>家住杭州采荷小区的市民李先生日前碰上了一件烦心事：一个星期连丢了两辆自...</div>
</li>
</ul>
</div>
<!--客房展示结束-->
<!--特色美食开始-->
<div class="title1"><span>特</span>
<p>特色美食 SPECIALTIES</p>
<a href="index-10.htm" title="更多" class="more">更多</a></div>
<div class="con2">
<!--幻灯广告开始-->
<div class="s_banner">
<ul class="s_banner_pic">
<li><a href="#"><img src="images/ad1.jpg" width="314" height="276" /></a></li>
<li><a href="#"><img src="images/ad2.jpg" width="314" height="276" /></a></li>
</ul>
<div class="s_btns">
<div> <a class="prev" href="javascript:void(0)"></a> <a class="next" href="javascript:void(0)"></a> </div>
</div>
</div>
<!--幻灯广告结束-->
<div class="con2_right"> <div class="con2_top"><a href="19.html" title="成功案例" class="specialties_img"><img src="images/1-160FQ64HQ36.jpg" alt="成功案例" width="177" height="133"/></a>
<p><a href="19.html" title="成功案例">成功案例</a><span>2016-07-13</span></p>
<div>汽车防盗报警器是伴随汽车业的崛起而诞生的，为了应付汽车被盗或车零部件如：汽车音响抡胎、蓄电池等及车内物品的被盗，人们最初普遏使用的是机械...</div>
</div>
<ul class="con2_ul">
<li><a href="17.html" title="成功案例"><img src="images/1-160FQ64P02X.jpg" alt="成功案例" width="141" height="106"/></a></li>
<li><a href="18.html" title="成功案例"><img src="images/1-160FQ64J5109.jpg" alt="成功案例" width="141" height="106"/></a></li>
<li><a href="20.html" title="成功案例"><img src="images/1-160FQ64AT58.jpg" alt="成功案例" width="141" height="106"/></a></li>
<li><a href="21.html" title="成功案例"><img src="images/1-160FQ6463Y40.jpg" alt="成功案例" width="141" height="106"/></a></li>
</ul>
</div>
</div>
<!--特色美食结束-->
<!--农家院开始-->
<div class="title1"><span>农</span>
<p>农家大院 FARMHOUSE</p>
<a href="index-9.htm" title="更多" class="more">更多</a></div>
<div class="con1">
<div class="con1_left"> <img src="images/njy.jpg" width="225" height="280" alt="" />
<div class="con1_left_font">
<p>农家院图</p>
<div>225x280 [不可删除]，这里是农家大院介绍这里是农家大院介绍这里是农家大院介绍...</div>
</div>
</div>
<ul class="con1_list">
<li>
<div class="con1_img"><img src="images/1-1611262339250-L.jpg" alt="农家院标题" width="222" height="167"/><span class="zoom"></span></div>
<p><a href="45.html" title="农家院标题">农家院标题</a></p>
<div>长岛大钦岛海天渔家乐座落于大钦岛北村西海口码头，是一家集住宿，餐饮，旅...</div>
</li>
<li>
<div class="con1_img"><img src="images/1-1611262339110-L.jpg" alt="农家院标题" width="222" height="167"/><span class="zoom"></span></div>
<p><a href="44.html" title="农家院标题">农家院标题</a></p>
<div>长岛大钦岛海天渔家乐座落于大钦岛北村西海口码头，是一家集住宿，餐饮，旅...</div>
</li>
<li>
<div class="con1_img"><img src="images/1-161126233U80-L.jpg" alt="农家院标题" width="222" height="167"/><span class="zoom"></span></div>
<p><a href="43.html" title="农家院标题">农家院标题</a></p>
<div>长岛大钦岛海天渔家乐座落于大钦岛北村西海口码头，是一家集住宿，餐饮，旅...</div>
</li>
</ul>
</div>
<!--农家院结束-->
<div class="con4">
<!--景点介绍开始-->
<div class="con4_left">
<div class="con4_title"><span>景</span>
<p>景点介绍 ATTRACTIONS</p>
<a href="index-1.htm" title="更多" class="more">更多</a></div>
<div class="con4_about"> <img src="images/ad2.jpg" width="235" height="196" alt=""/>
<p style="text-indent: 2em;">四川省茶业集团股份有限公司(以下简称川茶集团)于2013年10月成立，是以原四川省叙府茶业有限公司为主体联合省内多家茶叶企业共同发起组建的四川首家集茶树良种繁育、种植示范、茶叶初精深加工、品牌营销、科技研发与推广、茶文化应用与茶旅游发展以及其他茶叶关联产业等为一体的现代茶产业集群。 川茶集团是省、市、区各级党委政府重点扶持打造的农业... </p>
</div>
</div>
<!--景点介绍结束-->
<!--景点新闻开始-->
<div class="con4_right">
<div class="con4_title2"><span>景</span>
<p>景点新闻</p>
<a href="index-7.htm" title="更多" class="more">更多</a></div>
<ul class="con4_ul">
<li><a href="15.html" title="怎么更换C级防盗门锁芯" >怎么更换C级防盗门锁芯</a></li>
<li><a href="14.html" title="开锁需要什么证件" >开锁需要什么证件</a></li>
<li><a href="13.html" title="汽车防盗报警器" >汽车防盗报警器</a></li>
<li><a href="12.html" title="防盗门开锁后必须换锁吗?" >防盗门开锁后必须换锁吗?</a></li>
<li><a href="11.html" title="中国锁具业该如何应对国际竞争" >中国锁具业该如何应对国际竞争</a></li>
</ul>
</div>
<!--景点新闻结束-->
</div>
<!--友情链接开始-->
<div class="links">
<!--友情链接结束-->
<img src="images/con_bottom.jpg" class="con_bottom" /> </div>
<!--底部导航开始-->
<div class="foot_nav"> <a href="index.htm" title="首页">首页</a> <span>|</span> <a title="景点介绍" href="index-1.htm" >景点介绍</a>
</li>
<span>|</span> <a title="客房展示" href="index-2.htm" >客房展示</a>
</li>
<span>|</span> <a title="景点新闻" href="index-7.htm" >景点新闻</a>
</li>
<span>|</span> <a title="路线推荐" href="index-8.htm" >路线推荐</a>
</li>
<span>|</span> <a title="农家大院" href="index-9.htm" >农家大院</a>
</li>
<span>|</span> <a title="特色美食" href="index-10.htm" >特色美食</a>
</li>
<span>|</span> <a title="活动专题" href="index-11.htm" >活动专题</a>
</li>
<span>|</span> <a title="在线留言" href="index-12.htm" >在线留言</a>
</li>
<span>|</span> <a title="联系我们" href="index-13.htm" >联系我们</a>
</li>
<span>|</span> </div>
<!--底部导航结束-->
<!--页尾开始-->
<div class="foot_bg">
<div class="foot">
<div class="foot_left">
<div class="foot-left-top">
<h1>+86-0000-96877</h1>
<!--分享代码开始-->
<div id="pgshare1">
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare"> <a class="bds_tsina"></a> <a class="bds_tqq"></a> <a class="bds_qzone"></a> <a class="bds_bdhome"></a> </div>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript"> document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) </script>
<!--分享代码结束-->
</div>
<div class="foot-fonts">
<p>2002-2011 某某旅馆住宿有限公司 版权所有</p>
<p><span>地址：这里是您的公司地址</span><span>电话：+86-0000-96877</span><span>手机：+86-0000-96877</span></p>
<p><span>技术支持：<a href="#" target="_blank" title="织梦58" >网络公司</a></span><span>ICP备案编号：<a window.location='http://www.miitbeian.gov.cn/'" target="_blank" title="ICP备********号">ICP备********号</a></span>统计代码放置</p>
</div>
</div>
<div class="foot_code"><img src="images/erweima.png" width="101" height="101" alt="微信扫一扫"/>
<p>微信扫一扫</p>
</div>
</div>
</div>
<!--页尾结束-->
<!--返回顶部开始-->
<div id="common-tool" >
<ul>
<li><a id="common-sweep-ico" href="javascript:void(0);"><img src="images/sweep-ico.png" alt="二维码" title="二维码"></a>
<div class="common-sweep-box"> <img src="images/erweima.png" alt="这里是您的网站名称"/></div>
</li>
<li><a href="index-12.htm" ><img src="images/book-ico.png" alt="在线留言" title="在线留言"></a></li>
src="images/qq-ico.png" alt="在线QQ" title="在线QQ"></a></li>
<li id="common-top-ico"><a class="common-top" href="javascript:void(0);"><img src="images/top-ico.png" alt="返回顶部" title="返回顶部"></a></li>
</ul>
</div>
<!--返回顶部结束-->
<!--弹窗插件开始-->
<link rel="stylesheet" type="text/css" href="jquery.dialogbox.css" >
<div id="type-dialogBox"></div>
<script src="js/jquery.dialogbox.js" ></script>
<!--弹窗插件结束-->
<script type="text/javascript" src="su.js" ></script>
</body>
</html>
CSS样式代码
@charset "utf-8";
/* 全局 */
* {
transition: background-color ease .3s;
-moz-transition: background-color ease .3s;
-webkit-transition: background-color ease .3s;
-o-transition: background-color ease .3s;
}
html {
webkit-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-justify: inter-ideograph;
}
/* Style Reset*/
body, div, dl, dt, dd, ul, ol, li, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, h1, h2, h3, h4 {
margin: 0;
padding: 0;
_background-image: url(about:blank);
_background-attachment: fixed;
}
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
}
ul, li, dl, dt, dd, ol {
display: block;
list-style: none;
}
img {
border: 0;
display: block
}
.clear {
clear: both;
}
a {
text-decoration: none;
outline: 0;
}
center {
padding: 20px 0;
}
/* banner */
.banner {
width: 100%;
height: 549px;
position: relative;
overflow: hidden;
z-index: 1
}
.banner img {
display: block;
margin: 0 auto;
}
.btns {
width: 91px;
position: absolute;
height: 41px;
left: 50%;
bottom: 18px;
margin-left: -45px;
}
.banner_top {
position: absolute;
width: 100%;
background: url(../images/banner_top.png) 0 0 repeat-x;
height: 41px;
top: 0;
left: 0;
z-index: 2
}
/*
六、遇到问题及如何解决
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “️评论” “收藏” 一键三连哦！
2.️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题欢迎一起交流学习
边栏推荐
猜你喜欢
随机推荐
UML基本概念——动态视图
postman脚本的应用
C语言之EOF、feof函数、ferror函数
吃瓜教程task01 第2章 模型评估与选择
【备忘】于仕琪的libfacedetection相关
DS220702-0707作业
一张图带你解读--如何从零开始学习接口自动化
搭建PX4开发环境
第8章 函数探幽 -1
pip 国内源下载
Flask框架学习：模板继承
[Verilog] I2S Master Test Bench
RK3399上的Tengine实践笔记
【win10+cuda7.5+cudnn6.0安装caffe⑥】报错及处理方式
Django--20实现Redis支持、上下文以及上下文和接口的交互
task02 fashion-mnist分类实战
Flask框架学习：路由的尾部斜杠
（二）Docker安装Redis实战（持久化AOF和RDB快照）
C语言学习记录--变量基本类型和内存大小
课堂练习--0708