HTML5景点介绍网页设计：我的家乡金堂(9页) 实战案例-CSDN博客

这是一份HTML5期末大作业，介绍家乡金堂的景点，包括首页、特产、旅游、景点介绍和历史等内容。网页采用HTML+CSS+JavaScript实现，设计精美，适合作为初学者的学习资源。网页响应式布局，包含多媒体元素如背景图、音乐、视频等，还有JavaScript实现的表单交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5期末大作业：关于家乡景点介绍网页设计-------我的家乡金堂(9页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品

1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？
2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

1.网页作品简介 ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。包含：总共9个页面。

2.网页作品编辑：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ 等任意HTML软件编辑修改网页）。

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

4.网页作品技术：使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线、等。表单提交、评论留言，并使用JavaScript制作了表单判断（提交时表单不能为空）。

文章目录

HTML5期末大作业：关于家乡景点介绍网页设计-------我的家乡金堂(9页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品
作品介绍
一、作品展示
二、文件目录
三、代码实现
四、web前端(学习资料)
五、源码获取
六、更多源码

一、作品展示

1.首页

在这里插入图片描述

2.特产

在这里插入图片描述

3.旅游

在这里插入图片描述

4.景点介绍

在这里插入图片描述

5. 历史

在这里插入图片描述

二、文件目录

在这里插入图片描述

三、代码实现

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="index.html" target="_black">Jingtang