0
点赞
收藏
分享

微信扫一扫

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript


HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 大学生毕设网页设计源码HTML


常见网页设计作业题材有 ​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​ 等网页设计题目, ​​A+水平作业​​, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!


作品介绍

​1.网页作品简介​ :学生HTML个人网页作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。

​2.网页作品编辑​:此作品为学生期末大作业网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

​3.网页作品布局​:网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

​4.网页作品技术​:使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言,并使用JavaScript制作了表单判断(提交时表单不能为空)。


文章目录


  • ​​HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 大学生毕设网页设计源码HTML​​
  • ​​作品介绍​​
  • ​​一、作品展示​​
  • ​​二、文件目录​​
  • ​​三、代码实现​​
  • ​​四、web前端(学习资料)​​
  • ​​五、源码获取​​


一、作品展示

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_javascript

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_html_02

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_旅游网页HTML_03

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_css_04

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_旅游网页HTML_05

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_css_06

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_html_07

二、文件目录

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_javascript_08

三、代码实现

<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="keywords" content="" />
<meta name="description" content="" />
<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>
</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="subpage"> <div class="left">
<!--客房分类开始-->

<div class="left_title"><span>客房展示</span>
<p>GUEST ROOM</p>
</div>
<ul class="left-nav">

<li>
<p><a href="index-3.htm" title="标准间">标准间</a></p>
</li>

<li>
<p><a href="index-4.htm" title="多人间">多人间</a></p>
</li>

<li>
<p><a href="index-5.htm" title="双人间">双人间</a></p>
</li>

<li>
<p><a href="index-6.htm" title="商务间">商务间</a></p>
</li>

</ul>
<!--客房分类结束-->

<!--联系我们开始-->
<div class="left-contact"> <img src="images/leftcontact.jpg" width="226" height="170" alt="">
<div class="left-contact-con">
<p>欢迎您的到来!</p>
<div>+86-0000-96877</div>
</div>
</div>
<!--联系我们结束-->

<!--景点新闻开始-->

<div class="left_title2"><span>景点新闻</span><a href="index-7.htm" title="更多">>更多</a> </div>
<ul class="left-line">
<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 class="right">
<div class="right-title">
<div class="right-name"><span>景</span><font>联系我们</font></div>
<p>当前位置:<a href="index.htm" >主页</a> > <a href="index-13.htm" >联系我们</a></p>
</div>
<!--单页内容开始-->
<div class="right_con">
<div class="pb">
<div class="pagebox">
<p style="text-indent: 2em;"><p>
地址:这里是您的公司地址<br />
电话:+86-0000-96877<br />
传真:+86-0000-96877<br />
邮编:000000<br />
邮箱:这里是您公司的邮箱地址 &nbsp;</p>
</p>
<div align="center"></div>
</div>
</div>
</div>
<!--单页内容结束-->
</div>
</div>
<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 href="javascript:if(confirm('http://www.miitbeian.gov.cn/ \n\n�ļ���δ�� Teleport Pro ȡ�أ���Ϊ �������·��������ʼ��ַ�����õķ�Χ�� \n\n��Ҫ�ӷ������ϴ�����'))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>
<li><a href="javascript:if(confirm('http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes \n\n�ļ���δ�� Teleport Pro ȡ�أ���Ϊ �������·��������ʼ��ַ�����õķ�Χ�� \n\n��Ҫ�ӷ������ϴ�����'))window.location='http://wpa.qq.com/msgrd?v=3&uin=12345678&site=qq&menu=yes'" ><img 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>

四、web前端(学习资料)

​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​

适合入门到高级的童鞋们入手~​​送1000套HTML+CSS+JavaScript模板网站​

HTML5期末大作业:旅游网页设计——旅游住宿酒店(14页) HTML+CSS+JavaScript_html5_09

五、源码获取

❉1.看到这里了就 ​[点赞+好评+收藏] 三连​ 支持下吧,你的 ​​「点赞,好评,收藏」​​是我创作的动力。

❉ 2.​关注我​ ~ 每天带你学习 :各种前端插件、七夕表白网页制作、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、web期末大作业模板 、等! 「 前后开发者,一起探讨 前端,JAVA ,Node 知识,互相学习」!



举报

相关推荐

0 条评论