326.旅游住宿农家乐网页大学生期末大作业 Web前端网页制作 html5+css+js

仙女网页制作

于 2024-06-28 22:35:15 发布

阅读量635

点赞数 15

CC 4.0 BY-SA版权

分类专栏： Web网页设计实例旅游文章标签：前端 html html5 css javascript 正则表达式 jquery

本文链接：https://blog.csdn.net/A240307/article/details/140054144

Web网页设计实例同时被 2 个专栏收录

826 篇文章

订阅专栏

旅游

99 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html5+css+js：导航菜单、三级页面、二级菜单、选项卡、下拉菜单、无缝滚动插件、文字滚动、悬浮图标、留言表单、搜索等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含14个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.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="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>

...

2.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
}
/* top */
body {
   background: #390007
}
.top_bg {
   width: 100%;
   height: 106px;
   border-bottom: 1px solid #b72e22;
   background: url(../images/topbg.jpg) 0 0 repeat;
}
.top {
   width: 980px;
   height: 106px;
   margin: 0 auto;
   overflow: hidden
}
.logo {
   float: left;
   margin-top: 33px
}
.toptel {
   width: 210px;
   height: 56px;
   float: right;
   margin-top: 28px;
}
.toptel .tel {
   width: 190px;
   height: 56px;
   background: url(../images/top_tel.png) left 5px no-repeat;
   color: #fcdd62;
   text-align: left;
   padding-left: 33px;
   font: 15px/24px "microsoft yahei";
}
.toptel .tel span {
   display: block;
   font-family: impact;
   font-size: 28px;
   vertical-align: middle;
   color: #fcdd62;
   background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgb(252, 215, 132)), to(rgb(252, 204, 16)));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}