1. Johngo学长首页
  2. 技术点详细复盘专题
  3. 人工智能

web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript

• 人工智能 • 阅读 84

👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。

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

💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰

一、网站题目👨‍🎓

🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍📖

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如： Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。

四、网站效果🌐

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript
web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript
web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript
web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript
web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript
web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript
web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript

; 五、网站代码制作部分 📕

（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码🧱


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" />
    <title>重庆旅游title>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/swiper.css" />
    <link rel="stylesheet" href="css/font/iconfont.css" />
  head>

  <body>
    <div id="page">

      <div class="swipe" id="swipe">

        <div class="bg" id="swipe_bg">div>

        <section>

          <div class="img-box" id="swipe_img_box">
            <a href="#" class="link" id="swipe_link">
              <img src="images/banner.jpg" alt="" class="img" id="swipe_img" />
            a>
          div>

          <div class="select" id="swipe_select">div>

          <div class="btn left" id="swipe_btn_left">

            <i class="iconfont icon-zuojiantou" aria-hidden="true">i>
          div>

          <div class="btn right" id="swipe_btn_right">

            <i class="iconfont icon-youjiantou" aria-hidden="true">i>
          div>
        section>
      div>
      <div class="nav">
        <ul>
          <li><a href="index.html">首页a>li>
          <li><a href="index_1.html">美食a>li>
          <li><a href="index_2.html">景点a>li>
          <li><a href="index_3.html">酒店a>li>
          <li><a href="index_1.1.html">攻略a>li>
        ul>
      div>

      <div class="tuce">
        <h1>重庆h1>
        <h2>
          美食　 景点 特产 民族 <span class="yq">友情链接:<a href="http://www.cqta.gov.cn/" target="_blank">重庆市旅游政务网a>span>
        h2>
        <div class="left_in"><img src="images/d1.png" width="410" /><img src="images/d2.jpg" width="410" height="310" />div>
        <div class="right_in">
          <h3>院校h3>
          <ul>
            <li>
              <a href="#"><img src="images/cp_1.jpg" />a>
              <p>
                重庆大学<br />
                创办于1929年 <br />
                学校占地面积5212亩
              p>
            li>
            <li>
              <a href="#"><img src="images/cp_2.jpg" />a>
              <p>
                重庆医科大学 <br />
                创建于1956年 <br />
                "211"院校
              p>
            li>

            <li>
              <img src="images/cp_3.jpg" border="0" usemap="#Map" />
              <map name="Map" id="Map">
                <area shape="poly" coords="65,134,124,75,178,52,222,130,136,192,53,181" href="#" />
              map>
              <p>
                重庆邮电大学 <br />
                创办于1950年3月 <br />
                开设有53个本科专业
              p>
            li>

            <li>
              <img src="images/cp_4.jpg" border="0" usemap="#Map2" />
              <map name="Map2" id="Map2"><area shape="circle" coords="159,148,96" href="#" />map>
              <p>
                重庆工商大学 <br />
                始创于1952年 <br />
                是入选"小211工程"的高校之一
              p>
            li>
          ul>
        div>
      div>

      <div class="footer">
        <p>重庆旅游p>
      div>
    div>
  body>
  <script>

    let current_index = -1

    let swipe_timer = null

    let links = [
      { image: 'images/banner.jpg', target: '#1' },
      { image: 'images/d2.jpg', target: '#2' },
      { image: 'images/s.jpg', target: '#3' }
    ]

    let swipe = document.getElementById('swipe')
    let swipe_bg = document.getElementById('swipe_bg')
    let swipe_img_box = document.getElementById('swipe_img_box')
    let swipe_link = document.getElementById('swipe_link')
    let swipe_img = document.getElementById('swipe_img')
    let swipe_select = document.getElementById('swipe_select')
    let swipe_btn_left = document.getElementById('swipe_btn_left')
    let swipe_btn_right = document.getElementById('swipe_btn_right')

    let select = (index) => {

      stop()

      index = Number(index)

      if (index >= links.length) {
        return
      }

      if (current_index == index) {
        return
      }

      if (current_index > -1) {
        swipe_select.children[current_index].classList.remove('checked')
      }

      current_index = index

      let current_link = links[current_index]

      swipe_bg.style.backgroundImage = 'url(' + current_link.image + ')'

      swipe_img.setAttribute('src', current_link.image)

      swipe_link.setAttribute('href', current_link.target)

      swipe_select.children[current_index].classList.add('checked')
    }

    let autoSelect = (index) => {

      index = Number(index)

      if (index >= links.length) {
        return
      }

      if (current_index == index) {
        return
      }

      swipe_select.children[current_index].classList.remove('checked')

      current_index = index

      let current_link = links[current_index]

      swipe_img.style.transition = 'opacity 0.5s ease-in 0s'

      swipe_img.style.opacity = 0.2

      setTimeout(() => {

        swipe_bg.style.backgroundImage = 'url(' + current_link.image + ')'

        swipe_img.setAttribute('src', current_link.image)

        swipe_link.setAttribute('href', current_link.target)

        swipe_img.style.transition = 'opacity 0.7s ease-out 0s'
        swipe_img.style.opacity = 1

        if (!document.querySelector('.swipe .checked')) {
          swipe_select.children[current_index].style.transition = 'background-color 0.5s'
          swipe_select.children[current_index].classList.add('checked')
        }
      }, 500)
    }

    let play = () => {

      swipe_timer = setInterval(() => {

        let index = current_index + 1

        if (index >= links.length) {
          index = 0
        }

        autoSelect(index)
      }, 3000)
    }

    let stop = () => {
      if (swipe_timer) {
        clearInterval(swipe_timer)
        swipe_timer = null
      }
    }

    let init = () => {
      for (let i = 0; i < links.length; i++) {

        let item = document.createElement('a')

        item.setAttribute('class', 'item')
        item.setAttribute('href', '#')
        item.setAttribute('data-index', i)

        swipe_select.appendChild(item)
      }

      select(0)

      bind()
      play()
    }

    let bind = () => {

      swipe_btn_left.addEventListener('click', () => {

        let index = current_index - 1

        if (index < 0) {
          index = links.length - 1
        }

        select(index)
        play()
      })

      swipe_btn_right.addEventListener('click', () => {

        let index = current_index + 1

        if (index >= links.length) {
          index = 0
        }

        select(index)
        play()
      })

      for (const key in swipe_select.children) {
        if (swipe_select.children.hasOwnProperty(key)) {
          const element = swipe_select.children[key]
          element.addEventListener('click', (e) => {

            e.preventDefault()

            select(e.target.dataset.index)
          })
        }
      }
    }

    window.addEventListener('load', () => {
      init()
    })
  script>
html>

CSS样式代码🏡

@charset "utf-8";

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body {  font-family: "微软雅黑";font-size: 14px;color:#000000;line-height: 20px;text-align:left; background:url(../images/bej.jpg);}
td,th {font-family: "微软雅黑";font-size: 12px;color: #000000;}
a {color: #000000;}
A:link {TEXT-DECORATION: none;}
A:visited {TEXT-DECORATION: none;}

ul,li{list-style-type:none;}
.clearit{clear:both;}
#page{width:980px; margin:0 auto; background: rgba(255,255,255, 0.5 )}
.nav{width:980px; height:40px; line-height:40px; text-align:center; background:#56b2e5;}
.nav ul li{width:120px; float:left; margin-left:40px; display:inline; font-size:14px;}
.nav ul li a{color:#FFFFFF; font-size: 16px}
.nav ul li A:hover {color:#2059a6}
.zuo{width:400px; float:left;}
.you{width:540px; float:right; font-size:14px; font-family:"微软雅黑"; line-height:26px; padding:0 10px;}
.jieshao{width:960px; padding:10px; background:#FFFFFF;}
.tuce h2{font-size:14px; line-height:24px; color: #000; font-weight:bold; text-align:left; border-bottom:2px solid  #CCC; margin-bottom:20px;}
.tuce{ width:960px; padding:0 10px; overflow:hidden;}
.tuce p{padding-top:5px; font-size:14px; line-height:30px;}
.left_in{ width:410px; float:left; overflow:hidden; margin-right:15px;}
.left_in img {margin-top:10px;}
.right_in{ width:530px; float:right}
.right_in ul li{ width:240px; margin:10px; background:#FFFFFF; float:left; }
.right_in ul li img{ width:240px; border-bottom:1px solid #CCC; }
.right_in ul li p{ padding:10px; color:#666;}

.footer{background:#56b2e5; margin-top:10px;}
.footer p{text-align:center;padding:20px 0; color:#FFFFFF;}
.xinxi{width:960px; padding:10px; background:#FFFFFF;}

.center_in{ width:980px; margin:0 auto;}
.center_in ul li{ width:220px; margin:10px; background:#FFFFFF; float:left; }
.center_in ul li img{ width:220px; border-bottom:1px solid #CCC; }
.center_in ul li p{ padding:10px; color:#666;}

.center_left{ width:500px; float:left;}
.center_right{ width:450px; float:right; line-height:30px;}

.yq{ float:right; color:#666}
h1{ font-family:"微软雅黑"; line-height:80px;}

.ao { margin-right:30px; line-height:40px; }

六、遇到问题及如何解决🔍

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结😊

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。

八、更多干货🎁

1.如果我的博客对你有帮助、如果你喜欢我的博客内容， &#x8BF7; &#x201C;&#x1F44D;&#x70B9;&#x8D5E;&#x201D; &#x201C;&#x270D;&#xFE0F;&#x8BC4;&#x8BBA;&#x201D; &#x201C;&#x1F499;&#x6536;&#x85CF;&#x201D;一键三连哦！

  1. &#x2764;&#xFE0F;&#x3010;&#x1F447;&#x1F3FB;&#x1F447;&#x1F3FB;&#x1F447;&#x1F3FB;&#x5173;&#x6CE8;&#x6211;| &#x83B7;&#x53D6;&#x66F4;&#x591A;&#x6E90;&#x7801; | &#x4F18;&#x8D28;&#x6587;&#x7AE0;&#x3011;带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript

Original: https://blog.csdn.net/qq_38512571/article/details/127799730
Author: web网站建设
Title: web前端课程设计——重庆旅游7页 HTML+CSS+JavaScript

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/660405/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球