HTML5期末大作业：网站设计——简洁的旅游酒店公寓(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
作品介绍
1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。
2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。
3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
文章目录
- HTML5期末大作业：网站设计——简洁的旅游酒店公寓(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、学习资料
- 五、完整源码
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!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>
<link href="css/Home.css" rel="stylesheet" type="text/css" />
<link href="css/common/head.css" rel="stylesheet" type="text/css" />
<link href="css/common/foot.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="Js/head.js"></script>
<script type="text/javascript" src="Js/ThemeFocus/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Js/ThemeFocus/jquery.nav.js"></script>
<script type="text/javascript" src="Js/DestinationSearch/citySelector.js"></script>
<script type="text/javascript" src="Js/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<div id="container">
<!--top 整个头部-->
<div id="nav">
<!--logo-->
<div class="logo"> <img src="Common/images/logo.png" width="120" height="80" border="0"/> </div>
<!--导航-->
<ul id="navMenu">
<li><a href="#" rel='dropmenu1'>国内目的地</a></li>
<li><a href="#" rel='dropmenu2'>主题推荐</a></li>
<li><a href="#" rel='dropmenu3'>出游类型</a></li>
<li><a href="Theme/TravelGuide.html" rel='dropmenu4'>旅游指南</a></li>
</ul>
<div class="attention">
<a href="#" class="atnimg"><img src="Common/images/attention.jpg" width="70" height="25" border="0"/></a>
</div>
<!--手动搜索-->
<div class="search" valign="middle">
<!--下拉框-->
<div class="selectBox">
<input type="text" class="cityinput" id="citySelect" value="城市名" style="border:0;background: none transparent scroll repeat 0% 0%;width:95px;height:20px;">
</div>
<input name="text" type="text" class="searcText" style="border:0;background: none transparent scroll repeat 0% 0%;width:130px;height:20px;margin:10px 0 0 2px;float:left;"/>
<div class="searcher">
<a href="#"><img src="Common/images/searcher.jpg" width="20" height="20" border="0"/></a>
</div>
</div>
</div>
<li><a href="#">婺源</a></li>
</ul>
</td>
</tr>
<tr>
<td class="tdborder">
<span class="province">湖南湖北</span>
</td>
<td class="tdborder">
<ul>
<li><a href="#">武汉</a></li>
<li><a href="#">长沙</a></li>
</ul>
</td>
</tr>
<tr>
<td class="tdborder">
<span class="province">河南</span>
</td>
<td class="tdborder">
<ul>
<li><a href="#">郑州汉</a></li>
<li><a href="#">洛阳</a></li>
</ul>
</td>
</tr>
<tr>
<td class="tdborder">
<span class="province">河北</span>
</td>
<td class="tdborder">
<ul>
<li><a href="#">承德</a></li>
<li><a href="#">秦皇岛</a></li>
<li><a href="#">张家口</a></li>
</ul>
</td>
</tr>
<tr>
<td class="tdborder">
<span class="province">西北</span>
</td>
<td class="tdborder">
<ul>
<li><a href="#">兰州</a></li>
</ul>
</td>
</tr>
<tr>
<td class="tdborder">
<span class="province">内蒙古</span>
</td>
<td class="tdborder">
<ul>
<li><a href="#">呼伦贝尔</a></li>
<li><a href="#">满洲里</a></li>
</ul>
</td>
</tr>
</table>
</div>
<ul id="dropmenu2" class="dropMenu">
<li><a href="#">相约海岛</a></li>
<li><a href="Theme/SpecialTopic.html" target="_blank">海滨漫步</a></li>
<li><a href="#">休闲时光</a></li>
<li><a href="#">极致体验</a></li>
<li><a href="#">赏花踏青</a></li>
</ul>
<ul id="dropmenu3" class="dropMenu">
<li><a href="#">浪漫之旅</a></li>
<li><a href="#">家庭出游</a></li>
<li><a href="#">朋友聚会</a></li>
</ul>
<script type="text/javascript">cssdropdown.startchrome("navMenu")</script>
<!--top 头部结束-->
<!--banner焦点图内部-->
<div id="focus">
<div id="inner">
<div class="hot-event">
<!--登录注册行-->
<div class="link">
<a href="#">手机客户端</a>
<a href="#">在线客服</a>
<!-- <a href="UserInfo/OrderList.html">我的天堂鸟</a>-->
<a href="Account/Register.html" target="_blank">注册</a>
<a href="Account/Login.html" target="_blank">登录</a>
<!--<a href="../index.html">退出</a>
<div class="username">
<a href="UserInfo/OrderList.html">187****9013</a>
<span>您好，</span>
</div>-->
</div>
<!--浮动在焦点图上的搜索-->
<div class="searching">
<table>
<tr height="40">
<td align="right" width="100">
<span class="q1">目的地</span> </td>
<td width="20"> </td>
<td width="258" align="left">
<!--下拉框-->
<div class="selectBox2">
<div class="textbg"><!--加一个背景图片-->
<input type="text" class="cityinput" id="citySelect1" value="城市名" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;">
</div>
</div> </td>
</tr>
<tr height="40">
<td align="right">
<span class="q1">入住日期</span> </td>
<td width="20"> </td>
<td valign="middle">
<div class="textbg">
<input name="text2" type="text" class="Wdate" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;" onclick="WdatePicker()" /></div>
</td>
</tr>
<tr height="40">
<td align="right">
<span class="q1">退房日期</span> </td>
<td width="20"> </td>
<td>
<div class="textbg">
<input name="text2" type="text" class="Wdate" style="border:0;background: none transparent scroll repeat 0% 0%;width:180px;height:20px;margin-top:5px;" onclick="WdatePicker()" /></div> </td>
</tr>
<tr height="40">
<td align="right">
<span class="q1">卧室数</span> </td>
<td width="20"> </td>
<td class="nubroom">
<a href="#" class="nubroom1">一室</a>
<a href="#" class="nubroom2">二室</a>
<a href="#" class="nubroom3">三室</a>
<a href="#" class="nubroom4">不限</a> </td>
</tr>
<tr align="center" height="50">
<td colspan="3">
<input type="submit" value="搜索" id="btn" />
</td>
</tr>
</table>
</div>
<div class="switch-nav"><a href="#" onclick="return false;" class="prev"><i class="ico i-prev"></i><span class="hide-clip">上一个</span></a><a href="#" onclick="return false;" class="next"><i class="ico i-next"></i><span class="hide-clip">下一个</span></a></div>
<div class="event-item" style="display: block;"><span class="event-item" style="display: block;"><a href="#" class="banner"><img src="Images/focus/banner01.jpg" class="photo" style="width: 960px; height: 350px;" /></a></span></div>
<div class="event-item" style="display: none;">
<a href="#" class="banner">
<img src="Images/focus/banner02.jpg" class="photo" style="width: 960px; height: 350px;"/>
</a>
</div>
<div class="event-item" style="display: none;">
<a href="#" class="banner">
<img src="Images/focus/banner03.jpg" class="photo" style="width: 960px; height: 350px;" />
</a>
</div>
<div class="event-item" style="display: none;">
<a href="#" class="banner">
<img src="Images/focus/banner04.jpg" class="photo" style="width: 960px; height: 350px;" />
</a>
</div>
<div class="event-item" style="display: none;">
<a href="#" class="banner">
<img src="Images/focus/banner05.jpg" class="photo" style="width: 960px; height: 350px;" />
</a>
</div>
<div class="switch-tab">
<a href="#" onclick="return false;" class="current">1</a>
<a href="#" onclick="return false;">2</a>
<a href="#" onclick="return false;">3</a>
<a href="#" onclick="return false;">4</a>
<a href="#" onclick="return false;">5</a>
</div>
</div>
</div>
<script type="text/javascript">
$('#inner').nav({ t: 3000, a: 1000 });
</script>
</div>
<!--banner焦点图内部结束-->
<!--热门城市-->
<div id="hotcity">
<!--标题栏-->
<div class="title">
<span class="titlename1">热门城市</span>
</div>
<!--热门城市左侧-->
<div class="hotcityleft">
<!--map地图-->
<div class="map">
<img src="Images/map.jpg" width="470" height="380" border="0"/>
</div>
<!--top城市-->
<div class="Topcity">
<span class="topct">Top城市：</span>
1.<a href="#">青岛 </a>
2.<a href="#">北京 </a>
4.<a href="#">上海 </a>
5.<a href="#">成都 </a>
6.<a href="#">杭州 </a>
7.<a href="#">大连 </a>
8.<a href="#">广州 </a>
9.<a href="#">深圳 </a>
10.<a href="#">南京 </a>
</div>
</div>
<!--map地图右侧-->
<div class="citydetial">
<!--城市图片-->
<div class="citydetialimg">
<a href="#"><img src="Images/citydetial/citydetial01.jpg" width="150" height="100" border="0"/></a>
</div>
<!--城市简介-->
<div class="textdetail">
<p><a href="#" class="cityname">上海</a>,是在中国江南传统文化（吴文化）的基础上，与开埠后传入的对上海影响深远的欧美文化等融合而逐步形成，既古老又现代，既传统又时尚，区别于中国文化，具有开放而又自成一体的独特风格。<a href="#" class="readdetail">查看更多>></a></p>
</div>
<!--城市著名景点-->
<div class="attraction">
<a href="#">徐家汇</a>
<a href="#">陆家嘴</a>
<a href="#">中山公园</a>
<a href="#">人民广场</a>
</div>
<div class="clear"></div>
<!--房屋关注率排行-->
<div class="attentionrate">
<span class="textatnrate">房屋关注率排行：</span>
<table>
<tr height="30">
<td width="20">
1.
</td>
<td>
<a href="#">都是家园圣天地 标准大...</a>
</td>
<td width="120">
<span class="city-nubroom">1室1厅</span>
</td>
<td width="30">
<a href="#">评论</a>
</td>
</tr>
<tr height="30">
<td width="20">
2.
</td>
<td width="160">
<a href="#">徽苑酒店公寓外滩店家...</a>
</td>
<td width="120">
<span class="city-nubroom">1室1厅1卫</span>
</td>
<td>
<a href="#">评论</a>
</td>
</tr>
<tr height="30">
<td width="20">
3.
</td>
<td>
<a href="#">品尊名致豪华复式房</a>
</td>
<td width="120">
<span class="city-nubroom">3室1厅1卫1厨</span>
</td>
<td>
<a href="#">评论</a>
</td>
</tr>
<tr height="30">
<td width="20">
4.
</td>
<td>
<a href="#">新港湾酒店公寓普通大...</a>
</td>
<td width="120">
<span class="city-nubroom">2室1厅1卫</span>
</td>
<td>
<a href="#">评论</a>
</td>
</tr>
<tr height="30">
<td width="20">
5.
</td>
<td>
<a href="#">新港湾酒店公寓普通标...</a>
</td>
<td width="120">
<span class="city-nubroom">1室1厅1卫</span>
</td>
<td>
<a href="#">评论</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<!--热门城市结束-->
<!--特色推荐-->
<div id="recommend">
<!--标题栏-->
<div class="title">
<span class="titlename2">特色推荐</span>
</div>
<!--推荐地点-->
<div class="rmdcity">
<a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity01.jpg" width="234" height="160" border="0"/></a>
<a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity03.jpg" width="234" height="160" border="0"/></a>
<a href="#" class="rightpitch"><img src="Images/rmdcity/rmdcity02.jpg" width="234" height="160" border="0"/></a>
<a href="#"><img src="Images/rmdcity/rmdcity04.jpg" width="234" height="160" border="0"/></a>
</div>
</div>
<!--特色推荐结束-->
<!--广告语-->
<div id="slogan">
<div id="slogan1">
<div class="sloganimg">
<a href="#"><img src="Images/sloganimg1.jpg" width="40" height="40" border="0"/></a>
</div>
<div class="textslogan">
<a href="#">100%真实房源</a>
<p>专业验证员实地验真，确保每一套房屋真实有效。</p>
</div>
</div>
<div id="slogan1">
<div class="sloganimg">
<a href="#"><img src="Images/sloganimg2.jpg" width="40" height="40" border="0"/></a>
</div>
<div class="textslogan">
<a href="#">特色房屋，性价比高</a>
<p>配备家电，可洗衣做饭的一居、多居房全面满足各种需求。</p>
</div>
</div>
<div id="slogan1">
<div class="sloganimg">
<a href="#"><img src="Images/sloganimg3.jpg" width="40" height="40" border="0" /></a>
</div>
<div class="textslogan">
<a href="#">到店无房，赔付首晚</a>
<p>预订成功到店无房赔付首晚房费，1000万保障基金先行赔付。</p>
</div>
</div>
<div id="slogan2">
<div class="sloganimg">
<a href="#"><img src="Images/sloganimg4.jpg" width="40" height="40" border="0"/></a>
</div>
<div class="textslogan">
<a href="#">7×24小时服务专线</a>
<p>400客服专线随时解答处理任何问题。</p>
</div>
</div>
</div>
<!--广告语结束-->
<!--foot-->
<div id="foot">
<a href="#">关于我们 |</a>
<a href="#">业务介绍 |</a>
<a href="#">加入天堂鸟 |</a>
<a href="#">帮助中心 |</a>
<a href="#">网站地图</a>
<p>@ Copyright 2013 tiantangniao.com 天堂鸟 版权所有 不得转载</p>
<p>京ICP备11043397号</p>
</div>
<!--foot结束-->
</div>
<script type="text/javascript">
var test=new Vcity.CitySelector({input:'citySelect'});
var test2=new Vcity.CitySelector({input:'citySelect1'});
</script>
</body>
</html>四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、完整源码
【百度网盘-源码下载地址】
链接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888
六、更多源码
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
