HTML5实训大作业：html css javascript jquery bootstarp响应式成都家乡介绍网页

家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS的代码量也很足、很细致，使用hover来完成过渡效果、鼠标滑过效果等，使用表格、表单补充模块，为方便新手学习页面中没有使用js有需要的可以自行添加。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

--- @[TOC](文章目录🌰)

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!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>我的家乡首页</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="CSS/style.css">
    <link rel="stylesheet" href="css/animate.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="wrap">
      <!-- header部分 -->
      <div class="header">
        <div class="content">
          <div class="header-left">
            <h3>我的家乡</h3>
          </div>
          <div class="header-mid">
              <ul id="nav" class="animated fadeInLeft">
                  <li class="active"><a href="./index.html"><span>首页</span></a></li>
                  <li><a href="./food.html" title="html"><span>美食</span></a></li>
                  <li><a href="./scenery.html" title="html"><span>景点</span></a></li>
                  <li><a href="./custom.html" title="html"><span>民俗</span></a></li>
              </ul>
          </div>
          <div class="header-right">
            <a href="https://baike.baidu.com/item/成都/128473?fr=aladdin"><button>Welcome</button></a>
        </div>
      </div>
      </div>
      <!-- introduction部分 -->
     <div class="introduction">
       <div class="content">
         <div class="introduction-left">
           <h3>四川成都</h3>
           <h4>一座来了就不想走的城市</h4>
         </div>
         <div class="introduction-mid">
           <h3>名称由来</h3>
           <p>“成都”来历，据《太平寰宇记》记载，是借用西周建都的历史经过，取周王迁岐，一年而所居成聚，二年成邑，三年成都而得名蜀都。
             蜀语成都二字的读音就是蜀都。成者毕也、终也，成都的含义就是蜀国终了的都邑，或者说最后的都邑。</p>
             <img src="img/zi.jpg" alt="成都">
           <p>最早“成都”二字</p>
         </div>
         <div class="introduction-right">
           <h3>别名</h3>
           <h5>蓉城、锦城、芙蓉城、锦官城、天府之国</h5>
         </div>
       </div>
     </div>
     <!-- plant部分 -->
     <div class="plant">
       <div class="content">
      <div class="container">
        <div class="page-header">
          <h1>市花与市树</h1>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-3 animated slideInLeft">
            <div class="thumbnail">
              <img src="img/hua.jpg" alt="">
              <div class="caption">
                <h2>市花-由来</h2>
                <p>五代后蜀皇帝孟昶在成都城头种满了芙蓉花，成都自此也就有了“芙蓉城”的美称。
                  而在1983年5月26日，成都市第九届人民代表大会常务委员会决定，正式命名芙蓉花为成都市市花。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 animated slideInLeft">
            <div class="thumbnail">
              <img src="img/hua2.jpg" alt="">
              <div class="caption">
                <h2>市花-典故</h2>
                <p>五代后蜀皇帝孟昶，有妃子名“花蕊夫人”，她不但妩媚娇艳，还特爱花。有一年她去逛花市，在百花中她看到一丛丛一树树的芙蓉花如天上彩云滚滚而来，尤其喜欢。
                  孟昶为讨爱妃欢心，还颁发诏令：在成都城头尽种芙蓉。广政十二年十月，孟昶的绿化城市工程大功告成，携花蕊夫人一同登上城楼，相依相隈观赏红艳数十里，
                  灿若朝霞的成都木芙蓉花，成都自此也就有了“芙蓉城”的美称。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 animated slideInLeft">
            <div class="thumbnail">
              <img src="img/shu2.jpg" alt="">
              <div class="caption">
                <h2>市树-介绍</h2>
                <p>成都主城区最古老的银杏位于百花潭公园内，树龄为1700年。长于唐代，明末遭了火焚，清朝又被雷击，命运多舛，如今却还是枝繁叶茂。
                  这棵编号为0371号的古银杏树，是1983年从阿坝州汶川县漩口镇的观音寺附近挖掘移植入园的。1983年5月26日，成都市第九届人民代表大会常务委员会决定，
                  正式命名芙蓉花为成都市市花、银杏树为成都市市树。</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 animated slideInLeft">
            <div class="thumbnail">
              <img src="img/shu.png" alt="">
              <div class="caption">
                <h2>市树-介绍</h2>
                <p>成都最古老的银杏位于青城山天师洞，树龄达到2500年。天师洞的张信和师父介绍，据传这棵古银杏是2000年前张天师传道路过时亲手种下的。
                  这棵古银杏有20多米高，要8个大人手拉手才能圈住树干。这棵“神树”，早在2006年成都市古树名木普查时，就被评为“成都市十大古树名木”之首,
                  2011年又被评定为“成都市一级古树”。确定每年农历九月初九为成都市的“市花市树日”。四川省林学会专家认为，如果银杏“升级”为国树，将是成都的又一张名片。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
     </div>
     <!-- place部分 -->
     <div class="place">
       <div class="content">
         <div class="place-left">
           <h2>地理环境>></h2>
           <p>成都市地处四川盆地西部，青藏高原东缘，东北与德阳市、东南与资阳市毗邻，南面与眉山市相连，西南与雅安市、西北与阿坝藏族羌族自治州接壤；
             地理位置介于东经102°54′~104°53′、北纬30°05′~31°26′之间。2016年，全市土地面积为14335平方千米，市区面积为4241.81平方千米，其中建成区面积931.58平方公里。</p>
         </div>
         <div class="place-right">
           <h3>行政区划>></h3>
           <img src="img/qu.jpg" alt="">
           <p>成都市辖20个县级行政区划单位（市辖区12，县级市5，县3），261个乡级行政区划单位（街道161，镇100）。面积14335平方千米，人口1633万人。</p>
         </div>
       </div>
     </div><br>
     <!-- poetry部分 -->
     <div class="poetry">
       <div class="content">
          <div class="container">
            <div class="page-header">
              <h1>邂逅成都</h1>
            </div>
          </div>
            <div class="container">
              <div class="row">
                <div class="col-md-4">
                    <div class="caption">
                      <h3>唐张籍《成都曲》</h3>
                      <p>锦江近百烟水绿，新雨山头荔枝熟。</p>
                      <p>万里桥边多酒家，游人爱向谁家宿？</p>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="caption">
                      <h3>杜甫《春夜喜雨》</h3>
                      <p>好雨知时节，当春乃发生。</p>
                      <p>随风潜入夜，润物细无声。</p>
                      <p>野径云俱黑，江船火独明。</p>
                      <p>晓看红湿处，花重锦官城。</p>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="caption">
                      <h3>岑参《万里桥》</h3>
                      <p>成都与维扬，相去万里地。</p>
                      <p>沧江东流疾，帆去如鸟翅。</p>
                      <p>楚客过此桥，东看尽垂泪。</p>
                    </div>
                  </div>
                </div>
         </div>
    </div>
  </div>
  </div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./js/bootstrap.min.js"></script>
  </body>
</html>

2.CSS样式代码 🏠

*{
    margin: 0;
    padding: 0;
  }
  .header{
    background-color: black;
    color: white;
    height: 80px;
  } 
  .content{
    width: 90%;
    margin: 0 auto;
    overflow: hidden; 
  }
  .header-left{
    width: 30%;
    float: left;
  }
  .header-left h3{
    color: gray;
  }
  .header-mid{
    width: 40%;
    float: left;
    font-size: large;
  }
  .header-mid ul{
    list-style: none;
    overflow: hidden;
  }
  .header-mid ul li{
    float: left;
    width: 25%;
    text-align: center;
  }
  .header-mid ul li.active a{
    color: red;
  }
  .header-mid a{
    color: white;
    text-decoration: none;
    line-height: 80px;
  }
  .header-right{
    width: 30%;
    float: left;
  }
  .header-right button{
    width: 100px;
    height: 40px;
    margin-top: 20px;
    border-radius: 10px;
    background-color: transparent;
    color: white;
    cursor: pointer;
    float: right;
  }
  .header-right button:hover{
    background-color: #c85353;
    color: black;  
  }
  .introduction{
    background-color: grey;
    color: white;
  }
  .introduction-left{
    width: 30%;
    float: left;
  }
  .introduction-left h3{
    margin: 100px 0 30px;
    font-weight: 300; 
    font-size: 30px;
  }
  .introduction-mid{
    width: 30%;
    float: left;
  }
  .introduction-right{
    width: 40%;
    float: right; 
  }
  .introduction-right h3{
    margin: 100px 0 30px;
    font-weight: 300; 
    font-size: 30px;
    margin-left: 250px;
  }
  .introduction-right h5{
    font-weight: 300; 
    font-size: 20px;
    margin-left: 220px;
  }
  .place-left{
    width: 40%;
    float: left;
  }
  .place-left h2{
    font-size: 30px;
    font-weight: 400;
    margin-right: 20px;
  }
  .place-left p{
    font-size: 20px;
    margin-right: 10px;
  }
  .place-right{
    width: 50%;
    float: right;
  }
  .place-right p{
    font-size: 20px;
  }
  .place-right img{
    width: 50%;
  }
  .poetry{
    background-color: #333435;
    color: white;
    padding: 40px 0 0;
  }
  .poetry p{
    font-size: 20px;
  }
  .food-one {
    background-color: white;
    padding: 40px 0;
  }
  .food-one-left{
    float: left;
    width: 40%;
    margin-top: 50px;
  }
  .food-one-left p {
    text-align: center;
    font-size: 20px;
    margin: 5px;
  }
  .food-one-left img {
  width: 80%;
  }
  .food-one-right {
    float: right;
    width: 60%;
  }
  .food-one-right h1 {
    font-size: 40px;
    font-weight: 200;
    margin-bottom: 20px;
  }
  .food-one-right hr {
    border: 1px solid red;
    width: 80px;
    margin-bottom: 20px;
  }
  .food-one-right p {
    line-height: 28px;
    font-size: 14px;
    text-indent: 28px;
    margin-bottom: 20px;
  }
 .food-two {
  background-color: white;
  padding: 40px 0;
 }
 .food-two-left{
  float: left;
  width: 40%;
  margin-top: 50px;
 }
 .food-two-left p {
  text-align: center;
  font-size: 20px;
  margin: 5px;
 }
 .food-two-left img {
width: 80%;
 }
 .food-two-right {
  float: right;
  width: 60%;
 } 
 .food-two-right h1 {
  font-size: 40px;
  font-weight: 200;
  margin-bottom: 20px;
 }
 .food-two-right hr {
  border: 1px solid red;
  width: 80px;
  margin-bottom: 20px;
 }
 .food-two-right p {
  line-height: 28px;
  font-size: 14px;
  text-indent: 28px;
  margin-bottom: 20px;
 }
 .food-three {
  background-color: white;
  padding: 40px 0;
 }
 .food-three-left{
  float: left;
  width: 40%;
  margin-top: 50px;
 }
 .food-three-left p {
  text-align: center;
  font-size: 20px;
  margin: 5px;
 }
 .food-three-left img {
width: 80%;
 }
 .food-three-right {
  float: right;
  width: 60%;
 }
 .food-three-right h1 {
  font-size: 40px;
  font-weight: 200;
  margin-bottom: 20px;
 }
 .food-three-right hr {
  border: 1px solid red;
  width: 80px;
  margin-bottom: 20px;
 }
 .food-three-right p {
  line-height: 28px;
  font-size: 14px;
  text-indent: 28px;
  margin-bottom: 20px;
 }

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥 獀索公粽Hao名称：👉 html网页设计成品
3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

HTML5实训大作业：html css javascript jquery bootstarp响应式成都家乡介绍网页

一、网页介绍📖

一、网页效果🌌

二、代码展示😈

1.HTML结构代码 🧱

2.CSS样式代码 🏠

三、个人总结😊

四、更多干货🚀

jQuery 下载与安装教程

web前端期末大作业——基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)

详细搞懂vue2.0 3.0区别-summernote富文本使用

【JavaWeb】1.JQuery

表单中通过单选框或复选框控制输入框的显示和隐藏

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘type‘)

echarts地图禁止点击事件以及鼠标默认事件

Echarts渲染行政区划，实现聚焦高亮交互

Echarts 无数据时显示“暂无数据”

小程序 echarts制作雷达图

前端哥

jQuery 下载与安装教程

【jQuery】jQuery 全套入门笔记

web前端期末大作业——基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)

若依中jquey相关问题

基于javaweb mysql的ssm maven知识库管理系统(java ssm bootstrap jquery mysql jsp)

详细搞懂vue2.0 3.0区别-summernote富文本使用

【JavaWeb】1.JQuery

jQuery日历签到插件下载

表单中通过单选框或复选框控制输入框的显示和隐藏

【Java 进阶篇】JQuery 遍历 —— `each()` 方法的奇妙之旅

1
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

2
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

3
移动端css布局大全

2024-02-06 15:02:421000

4
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

5
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

6
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

7
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

8
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

9
尚硅谷css3笔记

2024-02-13 10:02:44998

10
如何利用浏览器测试跨域

2024-02-11 10:02:28998