HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现 (5个页面)

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

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

作品介绍

1.网页作品简介方面 ：黑色通用的IT程序员资讯交流个人博客网站模板。喜欢的可以下载，文章页支持手机PC响应式布局。主要有：首页 公园简介 新闻动态 图片墙 详细地址 图片展示 联系我们 学习资料 搞笑图片 等页面html下载。

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

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

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

文章目录

  • HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现 (5个页面)
  • 作品介绍
  • 一、作品演示
      • 1. 首页
      • 2. 公园简介
      • 3. 新闻动态
      • 4.图片墙
  • 二、代码目录
  • 三、代码实现
  • 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
  • 五、源码获取
  • 六、更多HTML期末大作业作品文章
  • 七、更多表白源码
  • 八、150套Echarts大数据可视化

1. 首页

HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现(5个页面)_旅游景点网站设计与实现HTML

2. 公园简介

HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现(5个页面)_个人学生网页制作成品HTML_02

3. 新闻动态

HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现(5个页面)_HTML网页设计期末课程大作业_03

4.图片墙

HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现(5个页面)_HTML网页设计期末课程大作业_04

二、代码目录

HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现(5个页面)_个人设计web前端大作业._05

三、代码实现 

<!DOCTYPE html>
<html><head><title>首页</title><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css/initi.css" /><link rel="stylesheet" type="text/css" href="css/index.css" /><!-- 图片浏览插件css --><link rel="stylesheet" type="text/css" href="css/show.css" /></head><body><div class="main"><div class="header"><div class="help"><a href="">联系我们</a> | <a href="">站点帮助</a> | <a href="">问题反馈</a> </div></div><div class="topbar"><ul><li><a href="index.html">首页</a></li><li><a href="about.html">公园简介</a></li><li><a href="news.html">新闻动态</a></li><li><a class="clicked" href="show.html">图片墙</a></li><li><a href="map.html">详细地址</a></li><li><a>图片展示</a></li><li><a>联系我们</a></li><li><a>学习资料</a></li><li><a>搞笑图片</a></li></ul></div><!-- 好像只有添加iframe才能使头部独立成一个文件来处理，而且使用js给导航栏添加单击样式<iframe name="contain" width="100%" height="100%"></iframe>--><div class="content"><div class="bar"><img src="images/bar3.jpg" /></div><div class="int"><div class="scrollbox"><div class="pic-list"><ul class="wrap"><li class="picture"><a href="#"><img alt="97站长网" src="img/T1z_LkXfdpXXaGP9rV-164-164.jpg" width="164" height="164" /><em>97站长网</em></a></li><li class="picture"><a href="#"><img alt="请叫我羊驼先生" src="img/T1NTfkXmdoXXaGP9rV-164-164.jpg" width="164" height="164" /><em>请叫我羊驼先生</em></a></li><li class="picture"><a href="#"><img alt="又到一年粽叶香" src="img/T18UnkXn4mXXaGP9rV-164-164.jpg" width="164" height="164" /><em>又到一年粽叶香</em></a></li><li class="picture"><a href="#"><img alt="一毕业就结婚" src="img/T1sUrlXkXhXXaGP9rV-164-164.jpg" width="164" height="164" /><em>一毕业就结婚</em></a></li><li class="picture"><a href="#"><img alt="小资最爱mini窝" src="img/T1jCLgXaBuXXaGP9rV-164-164.jpg" width="164" height="164" /><em>小资最爱mini窝</em></a></li><li class="picture"><a href="#"><img alt="人尽可帽相！" src="img/T1VQjmXjBcXXaGP9rV-164-164.jpg" width="164" height="164" /><em>人尽可帽相！</em></a></li><li class="picture"><a href="#"><img alt="除了二还有爱" src="img/T1HhjmXmJjXXaGP9rV-164-164.jpg" width="164" height="164" /><em>除了二还有爱</em></a></li><li class="picture"><a href="#"><img alt="锋芝恋被曝复合" src="img/T1Sh_mXi0eXXaGP9rV-164-164.jpg" width="164" height="164" /><em>锋芝恋被曝复合</em></a></li><li class="picture"><a href="#"><img alt="夏天别穿背背佳" src="img/T1MdLmXfFfXXaGP9rV-164-164.jpg" width="164" height="164" /><em>夏天别穿背背佳</em></a></li><li class="picture"><a href="#"><img alt="如果真有海角天涯" src="img/T1siLmXkJgXXaGP9rV-164-164.jpg" width="164" height="164" /><em>如果真有海角天涯</em></a></li>        </ul></div><div class="pic-list"><ul class="wrap"><li class="picture"><a href="#"><img alt="当时我就震惊了" src="img/T1BgYlXhFnXXaGP9rV-164-164.jpg" width="164" height="164" /><em>当时我就震惊了</em></a></li><li class="picture"><a href="#"><img alt="糖果色夏日美甲" src="img/T1XrDnXbVaXXaGP9rV-164-164.jpg" width="164" height="164" /><em>糖果色夏日美甲</em></a></li><li class="picture"><a href="#"><img alt="欧美夏日潮搭" src="img/T1sSPmXeJbXXaGP9rV-164-164.jpg" width="164" height="164" /><em>欧美夏日潮搭</em></a></li><li class="picture"><a href="#"><img alt="开心时记得笑" src="img/T1CN2lXcRnXXaGP9rV-164-164.jpg" width="164" height="164" /><em>开心时记得笑</em></a></li><li class="picture"><a href="#"><img alt="夏天最爱睡地毯" src="img/T1nffmXfBhXXaGP9rV-164-164.jpg" width="164" height="164" /><em>夏天最爱睡地毯</em></a></li><li class="picture"><a href="#"><img alt="007裸体冰激凌" src="img/T1t2jlXfVkXXaGP9rV-164-164.jpg" width="164" height="164" /><em>007裸体冰激凌</em></a></li><li class="picture"><a href="#"><img alt="世上最帅100张脸" src="img/T1UWHhXopuXXaGP9rV-164-164.jpg" width="164" height="164" /><em>世上最帅100张脸</em></a></li><li class="picture"><a href="#"><img alt="做没心没肺的一对" src="img/T1Dk2lXfXkXXaGP9rV-164-164.jpg" width="164" height="164" /><em>做没心没肺的一对</em></a></li><li class="picture"><a href="#"><img alt="我的宠物叫笑笑" src="img/T1UyrmXhxbXXaGP9rV-164-164.jpg" width="164" height="164" /><em>我的宠物叫笑笑</em></a></li><li class="picture"><a href="#"><img alt="烟雨江南几时休" src="img/T1DfzmXj4hXXaGP9rV-164-164.jpg" width="164" height="164" /><em>烟雨江南几时休</em></a></li>    </ul></div><div class="pic-list"><ul class="wrap"><li class="picture"><a href="#"><img alt="有处仙境叫希腊" src="img/T1vWLlXlRqXXaGP9rV-164-164.jpg" width="164" height="164" /><em>有处仙境叫希腊</em></a></li><li class="picture"><a href="#"><img alt="甜蜜情侣街头装" src="img/T1nyYlXflnXXaGP9rV-164-164.jpg" width="164" height="164" /><em>甜蜜情侣街头装</em></a></li><li class="picture"><a href="#"><img alt="晃晃悠悠梦一场" src="img/T1UOrlXg0nXXaGP9rV-164-164.jpg" width="164" height="164" /><em>晃晃悠悠梦一场</em></a></li><li class="picture"><a href="#"><img alt="我是水果店捡来的" src="img/T1x4TmXcxfXXaGP9rV-164-164.jpg" width="164" height="164" /><em>我是水果店捡来的</em></a></li><li class="picture"><a href="#"><img alt="贾斯汀携子走红毯" src="img/T1VFPlXXVrXXaGP9rV-164-164.jpg" width="164" height="164" /><em>贾斯汀携子走红毯</em></a></li><li class="picture"><a href="#"><img alt="花朵草编休闲包" src="img/T1Z0zmXnFeXXaGP9rV-164-164.jpg" width="164" height="164" /><em>花朵草编休闲包</em></a></li><li class="picture"><a href="#"><img alt="你是我的眼！" src="img/T1upLmXadiXXaGP9rV-164-164.jpg" width="164" height="164" /><em>你是我的眼！</em></a></li><li class="picture"><a href="#"><img alt="百变发型DIY" src="img/T1j2HlXkRkXXaGP9rV-164-164.jpg" width="164" height="164" /><em>百变发型DIY</em></a></li><li class="picture"><a href="#"><img alt="褪了色的一个梦" src="img/T1SmYgXeRwXXaGP9rV-164-164.jpg" width="164" height="164" /><em>褪了色的一个梦</em></a></li><li class="picture"><a href="#"><img alt="俏丽流行爆美鞋" src="img/T120_mXgdfXXaGP9rV-164-164.jpg" width="164" height="164" /><em>俏丽流行爆美鞋</em></a></li>       </ul></div></div> </div></div></div><div class="footer"><p class="address">地址：陕西省宝鸡市千阳县南寨镇闫家村五组27号</p><p>张旭超个人版权所有</p></div><p style="text-align: center">来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p></body>
</html>
四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现(5个页面)_HTML网页设计期末课程大作业_06

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !

HTML期末大作业~基于HTML+CSS+JavaScript千岛湖旅游景点网站设计与实现(5个页面)_个人设计web前端大作业._07