HTML5期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
@码出未来-web网页设计
已于 2022-02-16 17:17:01 修改
阅读量1.9k
收藏
40
点赞数
4
已于 2022-02-16 17:17:01 修改
阅读量1.9k
收藏
40
点赞数
4
于 2021-10-29 11:08:38 首次发布
这是一个HTML5期末大作业，设计了一个关于三亚旅游的响应式网页。网页包含丰富的旅游攻略信息，如海南三亚的旅游景点、自助游建议等，并运用了Div+CSS、JavaScript技术实现交互效果，如导航栏、搜索功能和响应式布局。此外，网页还提供了社交媒体分享功能，方便用户分享内容。
HTML5期末大作业：旅游网站设计——三亚旅游 (6页) 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期末大作业：旅游网站设计——三亚旅游 (6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、学习资料
- 五、👇🏻👇🏻👇🏻更多源码👇🏻👇🏻👇🏻
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE HTML>
<html>
<head>
<title>旅游景点|境内旅游-旅游景点旅行社网站</title>
<meta name="renderer" content="webkit">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="applicable-device" content="pc,mobile">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="" />
<meta name="keywords" content="旅游景点|境内旅游" />
<link rel='stylesheet' href='./static/css/style.css'>
</head>
<body>
<div class="load-box"></div>
<header>
<div class="head-box">
<div class="width-box">
<div class="logo-box">
<a href="" title="旅游景点旅行社网站">
<img src="./static/image/1506052119.png" alt="旅游景点旅行社网站">
<h2>旅游</h2>
<h4>400 000 0000</h4>
</a>
</div>
<div class="login-box">
<a href="login.html">登录</a>
<a href="register.html">注册</a>
</div>
</div>
</div>
</header>
<nav>
<div class="nav-box">
<div class="width-box">
<div class="nav-cut">
<ul class="nav-ul">
<li class="nav-li "><a href="index.html" title="旅游景点旅行社网站">首页</a></li>
<li class="nav-li active navs margin-left-"><a href="you.html" title="跟团游" >跟团游</a></li>
<li class="nav-li navs margin-left-"><a href="you.html" title="自助游" >自助游</a></li>
<li class="nav-li navs margin-left-"><a href="you.html" title="自驾游" >自驾游</a></li>
<li class="nav-li navs margin-left-"><a href="you.html" title="酒店" >酒店</a></li>
<li class="nav-li margin-left-"><a href="you.html" title="景点" >景点</a></li>
<li class="nav-li margin-left-"><a href="gonglue.html" title="攻略" >攻略</a></li>
<li class="nav-li margin-left-"><a href="gonglue.html" title="交通" >交通</a></li>
</ul>
</div>
<div class="search-cut">
<div class="search-button"></div>
<div class="search-box">
<form method="get" action="gonglue.html">
<input type="hidden" name="lang" value="cn">
<input type="hidden" name="class1" value="10001">
<input type="text" placeholder="请输入搜索关键词！" name="searchword" value="">
<button type="submit"></button>
</form>
</div>
</div>
</div>
</div>
</nav>
<section>
<div class="width-box">
<div class="banner-box transform-box">
<div class="met-banner banner-ny-h" data-height='' style=''>
<div class="slick-slide">
<img class="cover-image" data-size="1170_100" src="./static/image/1506069811.jpg" srcset='' sizes="(max-width: 767px) 767px" alt="">
</div>
</div>
</div>
</div>
</section>
<section class="main">
<div class="width-box">
<div class="main-left ">
<div class="card-list">
<div class="met-page-ajax" data-scale='0.5'>
<div class="card-li">
<div class="card-description">
<a class="card-title" href="shownews.php?lang=cn&id=54" title="2017海南三亚旅游攻略实用版" target='_self'><h3>2017海南三亚旅游攻略实用版</h3></a>
<img class="card-image lazyloadx" data-original='./static/image/1506334085.jpg'>
<p> 人的一生中至少要有两次冲动，一次为奋不顾身的爱情，一次为说走就走的旅行。旅行，一直是我的最爱，所以，我愿意“冒险”一次，约上闺蜜一起开始一段旅行。 这个春季，我选择三亚。（什么季节去海南最好呢，有人担心夏天会不会太热，其实夏天在海边凉风习习，水温正适合体质较弱的人群）。 ..</p>
</div>
<div class="card-operation">
<div class="card-author">
<img class="lazyloadx" data-original="./static/image/user.jpg">
<font>admin</font>
</div>
<div class="card-time">发布于 2017-09-26</div>
<div class="card-geek">
<font class="eye">376</font>
<font class="share">
<span>
<a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=2017海南三亚旅游攻略实用版&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pic=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506334085.jpg"></a>
<a class="weixin" data-href="http://show.metinfo.cn/muban/M1156012/359/strategy/shownews.php?lang=cn&id=54"></a>
<a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=2017海南三亚旅游攻略实用版&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D54&pics=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506334085.jpg"></a>
</span>
</font>
</div>
</div>
</div>
<div class="card-li">
<div class="card-description">
<a class="card-title" href="shownews.php?lang=cn&id=57" title="与海浪共舞，享垂钓乐趣！一起去三亚海钓！" target='_self'><h3>与海浪共舞，享垂钓乐趣！一起去三亚海钓！</h3></a>
<img class="card-image lazyloadx" data-original='./static/image/1506335872.jpg'>
<p>作为中国最南部的一座滨海城市，三亚拥有得天独厚的旅游资源：阳光、沙滩、海风、椰林、新鲜空气……而这一切仿佛都在诉说着：到三亚不去海钓是一种遗憾。海钓在欧美发达国家已经有了上百年的历史，是一种既刺激有充满着无限乐趣的休闲玩乐方式，海钓爱好者们若是到了三亚，可以去哪些地方进行海钓活动呢?以下这..</p>
</div>
<div class="card-operation">
<div class="card-author">
<img class="lazyloadx" data-original="./static/image/user.jpg">
<font>admin</font>
</div>
<div class="card-time">发布于 2017-09-25</div>
<div class="card-geek">
<font class="eye">46</font>
<font class="share">
<span>
<a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=与海浪共舞，享垂钓乐趣！一起去三亚海钓！&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pic=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335872.jpg"></a>
<a class="weixin" data-href="http://show.metinfo.cn/muban/M1156012/359/strategy/shownews.php?lang=cn&id=57"></a>
<a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=与海浪共舞，享垂钓乐趣！一起去三亚海钓！&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D57&pics=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335872.jpg"></a>
</span>
</font>
</div>
</div>
</div>
<div class="card-li">
<div class="card-description">
<a class="card-title" href="shownews.php?lang=cn&id=56" title="海南旅游自由行攻略" target='_self'><h3>海南旅游自由行攻略</h3></a>
<img class="card-image lazyloadx" data-original='./static/image/1506335186.jpg'>
<p>一、出发前的准备 到了三亚肯定是要下海的，泳衣、游泳眼镜、耳塞都要准备好。替换衣物、太阳伞、太阳帽、太阳眼镜、沙滩拖鞋也要带上。三亚的阳光狠，所以就得使用护肤品。防晒霜是必须配备的，晒后镇定修护露、保湿喷雾、白面膜等都可以带上。洗发液、护发素也是必备的。海水很伤头发的，酒店提供..</p>
</div>
<div class="card-operation">
<div class="card-author">
<img class="lazyloadx" data-original="./static/image/user.jpg">
<font>admin</font>
</div>
<div class="card-time">发布于 2017-09-25</div>
<div class="card-geek">
<font class="eye">28</font>
<font class="share">
<span>
<a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=海南旅游自由行攻略&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pic=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335186.jpg"></a>
<a class="weixin" data-href="http://show.metinfo.cn/muban/M1156012/359/strategy/shownews.php?lang=cn&id=56"></a>
<a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=海南旅游自由行攻略&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D56&pics=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335186.jpg"></a>
</span>
</font>
</div>
</div>
</div>
<div class="card-li">
<div class="card-description">
<a class="card-title" href="shownews.php?lang=cn&id=55" title="海南三亚旅游攻略实用版－五天四晚游" target='_self'><h3>海南三亚旅游攻略实用版－五天四晚游</h3></a>
<img class="card-image lazyloadx" data-original='./static/image/1506335126.jpg'>
<p>7.27 厦门——三亚 20:55~23:05 首都航空 JD5736 白天可以上班不请假交通花费：520*2=1040RMB住宿花费：330RMB，住凤凰机场酒店，候机楼斜对面30 m。7.28 南山寺and大小洞天交通花费：8路到国光豪生酒店4 RMB；过马路转25/57路到南山寺10..</p>
</div>
<div class="card-operation">
<div class="card-author">
<img class="lazyloadx" data-original="./static/image/user.jpg">
<font>admin</font>
</div>
<div class="card-time">发布于 2017-09-25</div>
<div class="card-geek">
<font class="eye">26</font>
<font class="share">
<span>
<a class="weibo" target="_blank" href="http://service.weibo.com/share/share.php?title=海南三亚旅游攻略实用版－五天四晚游&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pic=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335126.jpg"></a>
<a class="weixin" data-href="http://show.metinfo.cn/muban/M1156012/359/strategy/shownews.php?lang=cn&id=55"></a>
<a class="qzone" target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=海南三亚旅游攻略实用版－五天四晚游&url=http%3A%2F%2Fshow.metinfo.cn%2Fmuban%2FM1156012%2F359%2Fstrategy%2Fshownews.php%3Flang%3Dcn%26id%3D55&pics=http%3A%2F%2Fshow.metinfo.cn%2Fupload%2F201709%2F1506335126.jpg"></a>
</span>
</font>
</div>
</div>
</div>
</div>
<div class="hidden-xs">
<div class="card-page" data-pages=1>
<p>
<a ><</a>
<a class="active" >1</a>
<a >></a>
</p>
</div>
</div>
<div class="met-page-ajax-body visible-xs-block invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<button type="button" class="btn btn-default btn-block btn-squared ladda-button" id="met-page-btn" data-style="slide-left" data-url="/muban/M1156012/359/strategy/?lang=cn&class1=108&class2=0&class3=0&mbpagelist=1" data-page="1"><i class="icon wb-chevron-down margin-right-5" aria-hidden="true"></i>加载更多</button>
</div>
</div>
</div>
<div class="main-right">
<div class="card-tags">
<h4>热搜标签</h4>
<ul>
<li><a href="../search/?lang=cn&searchword=亚龙湾热带森林公园" title="亚龙湾热带森林公园">亚龙湾热带森林公园</a></li>
<li><a href="../search/?lang=cn&searchword=西沙群岛" title="西沙群岛">西沙群岛</a></li>
<li><a href="../search/?lang=cn&searchword=蜈支洲岛" title="蜈支洲岛">蜈支洲岛</a></li>
<li><a href="../search/?lang=cn&searchword=三天两夜" title="三天两夜">三天两夜</a></li>
<li><a href="../search/?lang=cn&searchword=西沙群岛" title="西沙群岛">西沙群岛</a></li>
<li><a href="../search/?lang=cn&searchword=西岛" title="西岛">西岛</a></li>
</ul>
</div>
<div class="card-active">
<h4>自助游攻略</h4>
<ul>
<li>
<a href="../zizhu/showproduct.php?lang=cn&id=55" title="海南-三亚三天三夜自助游">
<img class="lazyloads" data-original='./static/image/1506311787.jpg' alt="海南-三亚三天三夜自助游">
<span>海南-三亚三天三夜自助游</span>
</a>
</li>
<li>
<a href="../zizhu/showproduct.php?lang=cn&id=79" title="三亚一地5天4晚“岛人行岛”豪华游">
<img class="lazyloads" data-original='./static/image/1506321153.jpg' alt="三亚一地5天4晚“岛人行岛”豪华游">
<span>三亚一地5天4晚“岛人行岛”豪华游</span>
</a>
</li>
<li>
<a href="../zizhu/showproduct.php?lang=cn&id=57" title="三亚到西沙群岛4天3晚自助游">
<img class="lazyloads" data-original='./static/image/1506320253.jpg' alt="三亚到西沙群岛4天3晚自助游">
<span>三亚到西沙群岛4天3晚自助游</span>
</a>
</li>
</ul>
</div>
<div class="card-hots">
<h4>为您推荐</h4>
<ul>
<li><a href="../strategy/shownews.php?lang=cn&id=54" title="2017海南三亚旅游攻略实用版" target='_self'>2017海南三亚旅游攻略实用版</a></li>
<li><a href="../strategy/shownews.php?lang=cn&id=57" title="与海浪共舞，享垂钓乐趣！一起去三亚海钓！" target='_self'>与海浪共舞，享垂钓乐趣！一起去三亚海钓！</a></li>
<li><a href="../strategy/shownews.php?lang=cn&id=56" title="海南旅游自由行攻略" target='_self'>海南旅游自由行攻略</a></li>
<li><a href="../strategy/shownews.php?lang=cn&id=55" title="海南三亚旅游攻略实用版－五天四晚游" target='_self'>海南三亚旅游攻略实用版－五天四晚游</a></li>
</ul>
</div>
</div>
</div>
</section>
<footer>
<div class="foot-box">
<div class="width-box">
<div class="foot-left">
<div class="met-links">
<ol class="breadcrumb">
<li>友情链接 :</li>
<li>
<a href="http://www.baidu.com/" title="" target="_blank">
去哪儿网
</a>
</li>
<li>
<a href="http://www.baidu.com/" title="" target="_blank">
旅游网
</a>
</li>
<li>
<a href="http://www.baidu.com/" title="" target="_blank">
海南旅游网
</a>
</li>
<li>
<a href="http://www.baidu.com/" title="" target="_blank">
三亚旅游
</a>
</li>
</ol>
</div>
<p>企业网站管理系统</p>
</div>
<div class="foot-right">
<div class="foot-lang">
</div>
<div class="powered_by_metinfo">Powered by <a href="" target="_blank" title="企业网站管理系统">breeze</a> </div>
</div>
</div>
</div>
</footer>
<div class="weixin-box">
<b><em>X</em>分享到微信朋友圈</b>
<i></i>
<p>打开微信，使用“扫一扫”，点击右上角“分享到朋友圈”。</p>
</div>
<button type="button" class="btn btn-icon btn-primary btn-squared met-scroll-top hide"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
<script src="./static/js/shop_lang_cn.js"></script>
<script src="./static/js/style.js"></script>
<script src="./static/js/shop_v3.js"></script>
</body>
</html>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
扫一扫
2463
优质web前端领域创作者
到【灌水乐园】发言
mamamammamama: 用什么软件比较好呢？
冷静608: 这个图片素材怎么拿呢
我没钱360: 求项目包
进击的小黑子: 大佬有没有这个的源码
m0_71027497: 演示地址没一个打得开