Web前端期末大作业--响应式风景旅游网页设计(国庆旅游主题-HTML+CSS+JavaScript)实现(二)

 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在专栏👇🏻👇🏻👇🏻👇🏻

java项目精品实战分享案例《100套》

web前端期末大作业网页实战《100套》

 Html+Css+JavaScript期末大作业《100套》 

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

网页实现截图:文末获取源码

网站首页 

关于我们

上海珍岛商业管理有限公司位于国家级经济技术开发区,是首批专注于精品民宿的新型创业连锁平台。
公司成立于2016年2月,注册资金1000万元。珍岛使命在于构筑“万众创新、大众创业”的新型平台,建立一个为历史和未来负责的、“留得住浓浓的乡愁”的城镇化村落服务体系,
为中国城镇化进程中的美丽乡村建设贡献一份力量。

文苑之旅

热门目的地

新闻资讯动态

留言中心

项目组织结构:

主要源码展示:

index.html、

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title>珍岛集团</title><meta name="keywords" content="珍岛集团"><meta name="description" content="珍岛集团"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="shortcut icon" href="images/favicon.ico"><!-- include main css --><link rel="stylesheet" type="text/css" href="css/slick.css" /><link rel="stylesheet" type="text/css" href="css/bootstrap.css" /><link rel="stylesheet" type="text/css" href="css/jquery.mmenu.all.css" /><link rel="stylesheet" type="text/css" href="css/style.css" /><link href="font-awesome-4.5.0/css/font-awesome.min.css" rel='stylesheet' type='text/css' media="all" /><link rel="stylesheet" type="text/css" href="css/animate.css" /></head><body><div><!--header--><header class="header home_p"><div class="container"><div class="logo"><a href="index.html"><img src="images/logo.png" alt="" /></a></div><a href="#mmenu" class="phone-nav"><i class="fa fa-list"></i></a><div class="logo_right"><nav class="nav"><ul><li><a href="index.html" class="active">首页</a></li><li><a href="scenic_overview.html">景区概况</a></li><li><a href="court_travel.html">文苑之旅</a><ul><li><a href="court_travel.html">茶艺中心</a></li><li><a href="court_travel.html">万竹林海</a></li><li><a href="court_travel.html">创意中心</a></li><li><a href="court_travel.html">花草园艺</a></li></ul></li><li><a href="comfortable.html">舒雅住宅</a></li><li><a href="news.html">新闻动态</a><ul><li><a href="news.html">公司新闻</a></li><li><a href="news.html">行业新闻</a></li></ul></li><li><a href="feedback.html">留言中心</a></li><li><a href="contact.html">联系我们</a></li></ul></nav><div class="search"><span class="sea_x"><input type="" name="" id="" placeholder="请输入关键词"><i class="fa fa-search"></i>		  	</span><span class="y_z"><a href="" class="zh active">中</a><a href="" class="en">En</a></span></div></div></div></header><!--banner  start--><section class="banner"><div><a href="index.html"><img src="images/banner1.jpg" alt=""></a></div><div><a href="index.html"><img src="images/banner1.jpg" alt=""></a></div><div><a href="index.html"><img src="images/banner1.jpg" alt=""></a></div></section><!--banner end--><div class="jqgk"><div class="contai"><div class="top_tit"><span class="span1"><a href="scenic_overview.html">景区概况</a></span><br /><span class="span2">SCENIC OVERVIEW</span></div><p class="wow bounceIn">上海珍岛商业管理有限公司位于国家级经济技术开发区,是首批专注于精品民宿的新型创业连锁平台。<br /> 公司成立于2016年2月,注册资金1000万元。珍岛使命在于构筑“万众创新、大众创业”的新型平台,建立一个为历史和未来负责的、“留得住浓浓的乡愁”的城镇化村落服务体系,<br /> 为中国城镇化进程中的美丽乡村建设贡献一份力量。</p><div class="xia_x"><span class="img"></span></div></div></div><div class="wyzl"><div class="top_tit"><span class="span1"><a href="court_travel.html">文苑之旅</a></span><br /><span class="span2">COURT TRAVEL</span></div><ul class="clearfix"><li class="wow bounceIn"><a href="court_travel.html"><img src="images/home_1.png" alt="" class="vcenter" /><i></i></a><a href="court_travel.html">万竹林海(一)</a></li><li class="wow bounceIn"><a href="court_travel.html"><img src="images/home_2.png" alt="" class="vcenter" /><i></i></a><a href="court_travel.html">万竹林海(二)</a></li><li class="wow bounceIn"><a href="court_travel.html"><img src="images/home_3.png" alt="" class="vcenter" /><i></i></a><a href="court_travel.html">万竹林海(三)</a></li></ul></div><!--wyzl end--><div class="syzz"><div class="top_tit"><span class="span1"><a href="scenic_overview.html">舒雅住宅</a></span><br /><span class="span2">COMFORTABLE RESIDENTIAL</span></div><div class="syzz_con  clearfix"><div class="left"><div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" / class="vcenter"> <i></i></a></div><div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" /  class="vcenter"> <i></i></a></div><div><a href="comfortable.html"><img src="images/syzz_1.png" alt="" /  class="vcenter"> <i></i></a></div></div><div class="right"><img src="images/fang.png" alt="" /><div class="fang_t"><span>客 |</span><span>房 |</span><span>介 |</span><span>绍</span></div><div class="fang_c">桃花林苑中有各式客房100套,房型分为中式、现代两个类型,以满足客人的不同需求…</div><div class="pr_ne clearfix"><span class="pr">上一个</span><span class="ne">下一个</span></div></div></div><div class="xia_x"><span class="img"></span></div></div><!--syzz end--><div class="home_news"><div class="news_con"><div class="top_tit"><span class="span1"><a href="news.html">新闻动态</a></span><br /><span class="span2">NEWS</span></div><ul><li class="clearfix wow bounceIn"><div class="news_left"><a href="news.html">暑假去哪玩?桃花苑天地避暑甚好!</a><p>暑期近在眼前,还在犹豫带孩子去哪儿玩吗?炎热的夏天,一颗躁动的心,背上收拾好的背包,走遍大好河山 ,感受大千世界,还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣,回归大自然的清新脱俗,来一场说走就走的夏日之旅吧。</p></div><div class="news_right"><span>07.21</span><time>2020</time></div></li><li class="clearfix wow bounceIn"><div class="news_left"><a href="news.html">花落流水春又去</a><p>春暖花开,桃花苑天地精品大咖云集,活动丰富。不仅有适合小朋友们的春游活动,有适合老年朋友的喝茶加棋牌, 还有书法大咖们的加盟,乃至电视真人秀节目的拍摄。这可把桃花宝宝们忙坏了,不过没关系,累并快乐着,桃花宝宝非常欢迎大家的到来……</p></div><div class="news_right"><span>05.25</span><time>2020</time></div></li><li class="clearfix"><div class="news_left"><a href="news.html">蝴蝶摘花来</a><p>清朝末年,先生在宁波开了一家面店,生意不错。一天,一位即将回国的美国华侨 ,登船前来到卜先生的店里吃面,离店时竟把一只皮箱落下了。 先生打烊时才发现这只皮箱,但已无法找到失主,只好把皮箱小心收藏,等待着失主前来认领。</p></div><div class="news_right"><span>05.25</span><time>2020</time></div></li><li class="clearfix"><div class="news_left"><a href="news.html">这是我们想去的地方</a><p>春暖花开,桃花苑天地精品大咖云集,活动丰富。不仅 有适合小朋友们的春游活动,有适合老年朋友的喝茶加棋牌, 还有书法大咖们的加盟,乃至电视真人秀节目的拍摄。 这可把桃花宝宝们忙坏了,不过没关系,累并快乐着,桃花宝宝非常欢迎大家的到来……</p></div><div class="news_right"><span>05.25</span><time>2020</time></div></li></ul><a href="news.html" class="more">MORE</a></div></div><!--footer  start--><footer class="footer"><div class="footer_con"><div class="con"><div class="nei"><div class=""><ul class="di_nav clearfix"><li><a href="scenic_overview.html">景区概况</a></li><li><a href="court_travel.html">文苑之旅</a></li><li><a href="comfortable.html">舒雅住宅</a></li><li><a href="news.html">新闻动态</a></li><li><a href="feedback.html">留言中心</a></li><li><a href="contact.html">联系我们</a></li></ul><div class="links">友情链接<ul><li><a href="">百度文化</a></li><li><a href="">新浪微博</a></li><li><a href="">百度知道</a></li></ul></div></div><div class="clear"></div><div class="lian">电话:<a href="tel:XXX">XXX</a><br /> 邮箱:<a href="mailto:XXX">XXX</a><br /> 手机:<a href="tel:XXX">XXX</a><br /> 地址:XXX<br /><a href="map.html">网站地图</a><br /><span> <a href="http://www.71360.com/" target="_blank"><img src="images/yu.png" alt="" /></a><span class="er_a"><img src="images/er.png" alt="" class="one_img"/> 珍岛公众号<img src="images/erwei.png" alt="" class="er_img"/></span></span></div></div></div></div><div class="copy">Copyright© 2020 版权所有:XXX</div></footer><!--footer  end--><!--移动端  Mmenu--><nav id="mmenu"><ul><li><a href="index.html" class="active">首页</a></li><li><a href="scenic_overview.html">景区概况</a></li><li><a href="court_travel.html">文苑之旅</a><ul><li><a href="court_travel.html">茶艺中心</a></li><li><a href="court_travel.html">万竹林海</a></li><li><a href="court_travel.html">创意中心</a></li><li><a href="court_travel.html">花草园艺</a></li></ul></li><li><a href="comfortable.html">舒雅住宅</a></li><li><a href="news.html">新闻动态</a><ul><li><a href="news.html">公司新闻</a></li><li><a href="news.html">行业新闻</a></li></ul></li><li><a href="feedback.html">留言中心</a></li><li><a href="contact.html">联系我们</a></li></ul></nav></div><!--Include Js--><script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script><!--移动端导航--><script src="js/jquery.mmenu.all.min.js" type="text/javascript" charset="utf-8"></script><!--slick--><script src="js/slick.min.js" type="text/javascript" charset="utf-8"></script><script src="js/wow.js" type="text/javascript" charset="utf-8"></script><!--placeholder--><script src="js/jquery.placeholder.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$('input, textarea').placeholder();});</script><script src="js/public.js" type="text/javascript" charset="utf-8"></script><!--<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>--></body></html>

style.css

img {max-width: 100%;outline: none;
}.vcenter {position: absolute;top: 0;right: 0;bottom: 0;left: 0;max-width: 100%;max-height: 100%;display: block;vertical-align: middle;margin: auto;
}.tHide {text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
}input[type="button"],
input[type="submit"],
input[type="reset"] {-webkit-appearance: none;
}textarea {-webkit-appearance: none;
}.blockFull {display: block;width: 100%;height: 100%;position: relative;
}.relative {position: relative;
}a:hover {color: #8c673e;text-decoration: none;
}* {transition: All 0.2s ease-in-out;-webkit-transition: All 0.2s ease-in-out;-moz-transition: All 0.2s ease-in-out;-o-transition: All 0.2s ease-in-out;
}.left {float: left;
}

大家点赞、收藏、关注、评论啦 、

 专栏推荐阅读:

Java毕设项目精品实战案例《100套》

HTML5大作业实战案例《100套》

Web大作业前端网页实战《100套》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/561866.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++语言 tcp例子,C++中TCP通信实现文件传输

作为Computer networks课程的一个project&#xff0c;我们需要实现用TCP在mininet中client和server的相互通信&#xff0c;需要能够传输文本文件&#xff0c;binary file 和image file。整个project的目的还是比较明确的。我主要列出了一下几个问题&#xff0c;需要在代码中实现…

H5+echarts模拟全国程序员可视化大数据【附完整源码】

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &#x1f345;文末免费获取源码&#x1f345; 临近学期结束&#xff…

android创建构建方法,Android 应用程序构建实战+原理精讲

转载来自51cto:https://blog.51cto.com/15091291/2629464new Vue({el: #app,data () {return {info: null}},mounted () {axios.get(https://www.runoob.com/try/ajax/json_demo.json).then(response > (this.info response)).catch(function (error) { // 请求失败处理con…

Java期末大作业基础项目--在线学生选课系统

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库【关注我&#xff0c;都给你】 &#x1f345;文末获取源码联系&#x1f345; 临近学期结束&#xff…

Web前端期末大作业--响应式网络科技公司网页设计(IT网络主题-HTML+CSS+JavaScript)实现

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、【java奥斯卡】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &…

android mp4语音识别,怎样用语音识别将一段视频转化为文字, 比如:百度的语音识别api...

import java.util.ArrayList;import com.iflytek.speech.RecognizerListener;import com.iflytek.speech.RecognizerResult;import com.iflytek.speech.SpeechError;import com.iflytek.speech.SpeechRecognizer;public classTestXF {/**** 这里需要改成你自己的实际appid*/pri…

Web前端期末大作业--响应式电竞博客网页设计(HTML+CSS+JavaScript)实现

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大&#xff1f;HTML网页作业无从下手&#xff1f;网页要求的总数量太多&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c;在专栏&#x1f447;&#x1f3fb;&#x1f447;&…

android 对话框 重复,如何在Android上重复使用AlertDialog for Yes / No?

我正在尝试找到重用显示自定义标题的Dialog的方法,然后将Yes / No click发送到已启动Dialog的功能.我有两个按钮,保存和解除,并且都调用是/否对话,一个显示“你想保存”,另一个显示“关闭更改&#xff1f;”.我认为我的程序非常“脏”但我想它可以工作,但我的问题是“查看视图”…

web前端期末大作业--响应式汽车租赁网页设计--(HTML+CSS+JavaScript)实现

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大&#xff1f;网页要求的总数量太多&#xff1f;HTML网页作业无从下手&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c;在专栏&#x1f447;&#x1f3fb;&#x1f447;&…

android启动页面显示空白,android – 启动时的空白页面

在获取启动画面之前,当我启动应用程序时,我会得到一个空白页面(< 1s).我甚至试过几乎空的泼水活动,但我仍然得到它&#xff01; 怎么了&#xff1f; 清单文件package"com.mypackage"android:versionCode"1"android:versionName"1.0" >andr…

Web前端期末大作业--响应式个人日志博客网页设计(HTML+CSS+JavaScript)实现

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大&#xff1f;网页要求的总数量太多&#xff1f;HTML网页作业无从下手&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c;在专栏&#x1f447;&#x1f3fb;&#x1f447;&…

HTML+CSS+JS实现canvas仿ps橡皮擦刮卡效果

效果演示&#xff1a; 文末获取源码 主要JS代码实现 <div class"box" id"bb"><canvas id"cas" width"1366" height"651"></canvas></div><script type"text/javascript" charset&quo…

android寻找手机,寻找那些“干净”的Android手机

非原生Android系统、预装的各种第三方APP&#xff0c;都是拖慢手机运行效率和速度的“罪魁祸首”。那么&#xff0c;现在还有没有“干净”Android手机值得我们选择呢&#xff1f;为了体现“差异化”&#xff0c;绝大多数手机厂商都有自己的“OS”&#xff0c;比如MIUI、Sense等…

人人开源 VUE项目报错./src/assets/scss/index.scssModule build failed: Error: ENOENT: no such file or direct

Module build failed: Error: ENOENT: no such file or directory, scandir ‘C:\Users\administrator\Desktop\renren-fast-vue\node_modules\node-sass\vendor’ at Object.fs.readdirSync (fs.js:861:3) at Object.getInstalledBinaries (C:\Users\xyy’s\Desktop\renren-fa…

android 控件 margin,Android MarginDesign控件TabLayout导航栏使用详解

TabLayout的使用简单介绍比如在平常的项目中实现这样的效果&#xff0c;一般都是都会使用viewPageIndicate等几个开源框架直接实现&#xff0c;或者使用自定义的HorizontalScroll再配合ViewPageFragment实现。在谷歌推出marginDesign之后&#xff0c;实现这种效果可以直接使用T…

Web前端期末大作业--响应式有氧健身休闲会所网页设计(HTML+CSS+JavaScript)

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大&#xff1f;网页要求的总数量太多&#xff1f;HTML网页作业无从下手&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c;在专栏&#x1f447;&#x1f3fb;&#x1f447;&…

android 工厂模式创建,7、Android设计模式---(创建型设计模式)抽象工厂模式

一、介绍&#xff0c;定义抽象工厂模式也是创建型模式之一&#xff0c;抽象工厂模式起源于对不同操作系统的图形化解决方案&#xff0c;如不同操作系统的按钮和文本框控件及其实现。为创建一组相关或者相互依赖的对象提供接口&#xff0c;而不需要具体指定他们的具体类。二、使…

Web前端期末大作业--响应式健身会所网页设计(HTML+CSS+JS)实现

临近期末, 你还在为HTML网页设计结课作业,HTML网页作业无从下手&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c;在专栏&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; java项目精品实战分享案例《100套…

Web前端期末大作业-响应式室内家具网页设计(HTML+CSS+JS)实现

作者主页&#xff1a;Java李杨勇 文末获取源码联系 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大&#xff1f;网页要求的总数量太多&#xff1f;HTML网页作业无从下手&#xff1f;没有合适的模板&#xff1f;等等一系列问题。你想要解决的问题&#xff0c…