HTML期末大作业~基于HTML+CSS+JavaScript旅游网站设计与实现(6个页面)

Lmmso-Loser · 发表于 2023-1-19 08:07:29

HTML期末大作业~HTML+CSS+JavaScript旅游网站设计与实现->绿色古典的旅游度假景区(6个页面)    临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从动手？网页要求的总数目太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
   原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面夺目，非常适合初学者学习利用。
   作品先容    1.网页作品简介方面 ：绿色古典的旅游度假景区，观光社服务公司，旅游景区规划项目管理公司网站html模板下载。包含：景区概况、文苑之旅、舒雅住宅、新闻动态、联系我们等6个页面
   2.网页作品编辑方面：此作品为学生个人主页网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可利用恣意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可利用)
   3.网页作品布局方面：网页布局团体为LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容利用图片列表布局，结果页面插入了表格，联系我们利用图片对齐方式设置了左对齐。
   4.网页作品技能方面：利用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单，同时简单利用JavaScript制作了表单判断(提交时表单不能为空)
         文章目录

HTML期末大作业~HTML+CSS+JavaScript旅游网站设计与实现->绿色古典的旅游度假景区(6个页面)
作品先容
一、作品演示
- - 1.首页
  - 2.景区概况
  - 3.文苑之旅
  - 4.联系我们
  - 5. 新闻动态
二、代码目录
三、代码实现
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
五、源码获取
六、更多HTML期末大作业作品文章
七、更多表白源码

一、作品演示 1.首页

2.景区概况

3.文苑之旅

4.联系我们

5. 新闻动态

二、代码目录

三、代码实现

<!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" />
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/animate.css" />
<script></script>
<script></script>
<script>
$(document).ready(function () {
$("ul.nav li").hover(function () {
$(this).find(".navtwo").toggle();
})
})
</script>
</head>
<body>
<ul class="nav">
<li>
首页
</li>
<li>
景区概况
</li>
<li>
文苑之旅
文苑之旅
文苑之旅
文苑之旅
</li>
<li>
舒雅住宅
</li>
<li>
新闻动态
公司新闻
行业新闻
</li>
<li>
联系我们
</li>
</ul>
<img src="https://blog.csdn.net/images/banner1.jpg" width="100%"/>
<img src="https://blog.csdn.net/images/banner1.jpg" width="100%" />
景区概况
SCENIC OVERVIEW
石家庄飞天益游天下旅行社有限公司是首批专注于精品民宿的新型创业连锁平台。 公司成立于2017年2月，注册资金1000万元。益游使命在于构筑"万众创新、大众创业"的新型平台，建立一个为历史和未来负责的、"留得住浓浓的乡愁"的城镇化村落服务体系， 为中国城镇化进程中的美丽乡村建设贡献一份力量。
文苑之旅
COURT TRAVEL
<ul>
<li>
<img src="https://blog.csdn.net/images/1.png" />
万竹林海(一)
</li>
<li>
<img src="https://blog.csdn.net/images/1.png" />
万竹林海(一)
</li>
<li>
<img src="https://blog.csdn.net/images/1.png" />
万竹林海(一)
</li>
</ul>
舒雅住宅
COURT TRAVEL
<ul style="margin-left: 0px; overflow: hidden">
<li><img src="https://blog.csdn.net/images/2.png" /></li>
<li><img src="https://blog.csdn.net/images/2.png" /></li>
<li><img src="https://blog.csdn.net/images/2.png" /></li>
</ul>
<img src="https://blog.csdn.net/images/3.png" />
客 | 房 | 介 | 绍
桃花林苑中有各式客房100套,房型分为中式、现代两个类型,以满足客人的不同需求…
上一个
下一个
<script>
$(function () {
var left = $(".up");
var right = $(".down");
var obj = $(".subBox0 ul");
var w = obj.find("li").innerWidth();
left.click(function () {
obj.find("li:last").prependTo(obj);
obj.css("margin-left", -w);
obj.animate({ "margin-left": 0 });
});
right.click(function () {
obj.animate({ "margin-left": -w }, function () {
obj.find("li:first").appendTo(obj);
obj.css("margin-left", "0");
});
});
var moving = setInterval(function () { right.click() }, 3000);
obj.hover(function () {
clearInterval(moving);
}, function () {
moving = setInterval(function () { right.click() }, 3000);
})
});
</script>
新闻动态
NEWS
<ul>
<li>
暑假去哪玩？桃花苑天地避暑甚好！
暑期近在眼前，还在犹豫带孩子去哪儿玩吗？炎热的夏天，一颗躁动的心，背上收拾好的背包，走遍大好河山感受大千世界，还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣，回归大自然的清新脱俗，来一场说走就走的夏日之旅吧。
07.21
<time>2016</time>
</li>
<li>
暑假去哪玩？桃花苑天地避暑甚好！
暑期近在眼前，还在犹豫带孩子去哪儿玩吗？炎热的夏天，一颗躁动的心，背上收拾好的背包，走遍大好河山感受大千世界，还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣，回归大自然的清新脱俗，来一场说走就走的夏日之旅吧。
07.21
<time>2016</time>
</li>
<li>
暑假去哪玩？桃花苑天地避暑甚好！
暑期近在眼前，还在犹豫带孩子去哪儿玩吗？炎热的夏天，一颗躁动的心，背上收拾好的背包，走遍大好河山感受大千世界，还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣，回归大自然的清新脱俗，来一场说走就走的夏日之旅吧。
07.21
<time>2016</time>
</li>
<li>
暑假去哪玩？桃花苑天地避暑甚好！
暑期近在眼前，还在犹豫带孩子去哪儿玩吗？炎热的夏天，一颗躁动的心，背上收拾好的背包，走遍大好河山感受大千世界，还不如隐居室外桃源桃花苑天地精品。少一些城市的喧嚣，回归大自然的清新脱俗，来一场说走就走的夏日之旅吧。
07.21
<time>2016</time>
</li>
</ul>
MORE
首页
景区概况
文苑之旅
舒雅住宅
新闻动态
联系我们
电话：0311-12345678 邮箱：123.sjz@456.com 手机：123 4560 7890 地址：河北省石家庄市裕华区西湾子镇旅游商贸新区胜利大街香雪A区11号
</body>
</html>

复制代码

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程) web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

免责声明：部分资源来源于如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册