HTML网页设计期末课程大作业~旅游住宿酒店的HTML网页设计(14页) ~学生网页设计作业源码旅游网页代码学生网页设计与制作期末作业下载 DW旅游网页作业代码下载

旅游住宿酒店的HTML网页设计14页 ~ 学生网页设计与制作期末作业下载~ 大学生网页设计与制作成品下载 ~DW旅游网页作业代码下载临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~原始HTML+CSS+JS页面设计, web大学生网页设计作业源码

@码出未来-web网页设计

14138人浏览 · 2021-07-09 14:23:43

@码出未来-web网页设计 · 2021-07-09 14:23:43 发布

旅游住宿酒店的HTML网页设计14页 ~ 学生网页设计与制作期末作业下载~ 大学生网页设计与制作成品下载 ~DW旅游网页作业代码下载

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介方面 ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：网站首页，景点介绍，客房展示，景点新闻，路线推荐，农家大院，特色美食，活动专题，在线留言，联系我们 等总共 14 个页面html下载。

2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

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

4.网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

文章目录

旅游住宿酒店的HTML网页设计14页 ~ 学生网页设计与制作期末作业下载~ 大学生网页设计与制作成品下载 ~DW旅游网页作业代码下载
作品介绍
一、作品演示
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码
八、150套Echarts 大数据可视化

一、作品演示

1.首页

在这里插入图片描述

2.景点介绍

在这里插入图片描述

3.客房展示

在这里插入图片描述

4.景点新闻

在这里插入图片描述

5. 特色美食

在这里插入图片描述

6.联系我们

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现


<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>
<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>
  </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">
    <p>友情链接</p>
    <div class="links_right">   <a href="javascript:if(confirm('http://www.baidu.com/  \n\n�ļ���δ�� Teleport Pro ȡ�أ���Ϊ �������·��������ʼ��ַ�����õķ�Χ��  \n\n��Ҫ�ӷ������ϴ�����'))window.location='http://www.baidu.com/'"  target='_blank'>百度一下</a>     <a href="javascript:if(confirm('http://www.taobao.com/  \n\n�ļ���δ�� Teleport Pro ȡ�أ���Ϊ �������·��������ʼ��ַ�����õķ�Χ��  \n\n��Ҫ�ӷ������ϴ�����'))window.location='http://www.taobao.com/'"  target='_blank'>淘宝</a>    </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>