大一学生WEB前端静态网页——旅游网页设计与实现-张家口 6页

news2024/11/14 13:58:57

源码获取 文末联系

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作| HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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 href="css/style.css" rel="stylesheet" type="text/css" /> 
  <audio preload autoplay loop id="music">
       <source src="audio/抖音热门英文BGM.mp3" type="audio/mpeg">
  </audio>
 </head> 
 <body> 
  <div class="top"> 
   <div class="logo"> 
    <a href="index.html"><img src="img/logo.jpg" /></a> 
   </div> 
   <div class="sous"> 
    <form> 
     <div class="fd">
      <img src="img/sous.jpg" />
     </div> 
     <input class="input" type="text" value="著名景点" /> 
     <button class="btn" type="submit">搜索</button> 
    </form> 
   </div> 
  </div> 
  <div id="nav"> 
   <ul> 
    <li class="hot"><a href="index.html">网站首页</a></li> 
    <li><a href="shiji.html">历史风俗</a></li> 
    <li><a href="liuyan.html">在线留言</a></li> 
   </ul> 
  </div> 
  <div class="ibanner" id="box">
    <div class="inner">
        <!--轮播图-->
        <ul>
            <li><a href="#"><img src="img/banner1.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/banner2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/banner3.jpg" alt=""></a></li>

        </ul>
 
        <ol class="bar">
 
        </ol>
        <!--左右焦点-->
        <div id="arr">
                    <span id="left">
                        <
                    </span>
            <span id="right">
                        >
                    </span>
        </div>
 
    </div>
</div>

  <div class="main"> 
   <div class="back"><a href="#">返回顶部</a></div>
      <div class="container">
   <div class="title"> 
    <canvas id="canvas" width="300" height="150" ></canvas>
	<a href="jijin.html"><span class="xiang">详细介绍 ></span></a>
   </div> 
   <div class="bx01"> 
    <div class="bx01-left"> 
     <p>张家界,原名"大庸市",湖南省地级市。辖2个市辖区(永定区、武陵源区)、2个县(慈利县、桑植县)。位于湖南西北部,澧水中上游,属武陵山区腹地。张家界因旅游建市,是中国最重要的旅游城市之一,是湘鄂渝黔革命根据地的发源地和中心区域。1982年9月,张家界国家森林公园成为中国第一个国家森林公园。1988年8月,张家界武陵源风景名胜区被列入国家重点风景名胜区;1992年,由张家界国家森林公园等三大景区构成的武陵源风景名胜区被联合国教科文组织列入《世界自然遗产名录》;2004年2月,被列入全球首批《世界地质公园》;2007年,被列入中国首批国家5A级旅游景区。2017年,被授予"国家森林城市"荣誉称号。</p> 
    </div> 
    <div class="bx01-right">
     <img src="img/img1.jpg" />
    </div> 
   </div> 
   <div class="bx02"> 
    <div class="bx02-left">
     <img src="img/img4.jpg" />
    </div> 
    <div class="bx02-right"> 
     <p>张家界因旅游建市,是国内重点旅游城市。武陵源风景名胜区拥有世界罕见的石英砂岩峰林峡谷地貌,由中国第一个国家森林公园——张家界国家森林公园和天子山自然保护区、索溪峪自然保护区、杨家界四大景区组成,风景游览区面积264.6平方公里,是中国首批入选的世界自然遗产、世界首批地质公园、国家首批5A级旅游景区。"武陵之魂"天门山国家森林公园、"世界罕见的物种基因库"八大公山国家级自然保护区、道教圣地"南武当"五雷山、"百里画廊"茅岩河、万福温泉等景区也是景色秀美、风光独特。贺龙故居、湘鄂川黔革命根据地省委旧址是全国重点文物保护单位,普光禅寺、玉皇洞石窟群、老院子等8处人文古迹是省级重点文物保护单位。</p> 
    </div> 
   </div> 
   <div class="title"> 
    <h2>著名旅游景点</h2>
	 <a href="huodong.html"><span style="color: blue;line-height: 20px;">更多景点 ></span></a>
   </div> 
   <div class="sheshi"> 
    <ul> 
     <li><img src="img/cw01.jpg" /><h1>张家界国家森林公园</h1></li> 
     <li><img src="img/cw02.jpg" /><h1>九天洞</h1></li> 
     <li><img src="img/cw03.jpg" /><h1>普光禅寺</h1></li> 
     <li><img src="img/cw04.jpg" /><h1>金鞭溪</h1></li> 
     <li><img src="img/cw05.jpg" /><h1>鹞子寨</h1></li> 
     <li><img src="img/cw06.jpg" /><h1>五雷山</h1></li> 
    </ul> 
   </div> 
  </div> 
  </div>
  <div class="foot"> 
   <div class="foot-ner"> 
    <img src="img/footlogo.png" /> 
   </div> 
  </div> 
  <div class="banquan">
  姓名:孙悟空 学号:14523685 &copy;版权所有  邮箱:0123456789@qq.com 
  </div> 
  
  <script type="text/javascript" src="JS/jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="js/banner.js"></script>  
  <script type="text/javascript">
      window.onload = function(){
               setInterval("toggleSound()",1);
          }
  
      function toggleSound() {
                  var music = document.getElementById("music");//获取ID  
                  if (music.paused) { //判读是否播放  
                      music.paused=false;
                      music.play(); //没有就播放 
                  }    
          }
  </script>
  <script>
	  var canvas=document.getElementById("canvas");
	  var cxt=canvas.getContext("2d");
	  cxt.font="50px 黑体";
	  cxt.fillStyle="black";
	  cxt.fillText("张家界简介",10,100);
  </script>
 </body>
</html>



学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/30981.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【电力负荷预测】模拟退火算法结合狮群算法优化Elman神经网络电力负荷预测【含Matlab源码 1454期】

⛄一、模拟退火算法简介 1 引言 模拟退火算法(Simulated Annealing&#xff0c;SA)的思想最早由Metropolis等人于1953年提出&#xff1a;Kirkpatrick于1983年第一次使用模拟退火算法求解组合最优化问题[1] 。模拟退火算法是一种基于MonteCarlo迭代求解策略的随机寻优算法&…

图文详解Linux基础经典教程(09)——部署项目至CentOS

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 概述 在之前的操作里&#xff0c;我们在CentOS中安装了JDK、Tomcat、MySQL。接下来&#xff0c;我们需要将JavaWeb项目部署至CentOS。 项目开发 请在IDEA中开发JavaWeb项…

SpringBoot SpringBoot 开发实用篇 6 监控 6.3 actuator

SpringBoot 【黑马程序员SpringBoot2全套视频教程&#xff0c;springboot零基础到项目实战&#xff08;spring boot2完整版&#xff09;】 SpringBoot 开发实用篇 文章目录SpringBootSpringBoot 开发实用篇6 监控6.3 actuator6.3.1 actuator6.3.2 监控原理6.3.3 小结6 监控 …

Win10下安装CARLA

在仿真环境中要使用lidar进行测试&#xff0c;目前prescan和matlab的lidar扫描方式无法设置&#xff0c;而CARLA中lidar是机械扫描形式&#xff0c;符合需求故选择该软件&#xff0c;只是测试不想重装系统&#xff0c;便在win10下进行安装测试。 1. 安装前需要安装的软件 1. …

小白必看 最核心的5大TikTok视频营销策略(附赠工具)

数据显示&#xff0c;TikTok的用户月人均使用时长达到了每月23.6小时&#xff0c;超过了YouTube的23.2小时。TikTok的用户支出在2022年第一季度达到了8.4亿美元&#xff0c;迄今为止其用户支出总额已超过46亿美元。可见&#xff0c;Tiktok是目前发展相对较好的的短视频社交媒体…

网页JS自动化脚本(一)安装油猴或暴力猴等脚本管理器并新建脚本

在我们的工作生活当中使用网页的机会越来越高,很多时候要进行重复的操作,所以进行一些JS脚本就成了可选项首先我们要在网页浏览器中安装上脚本管理器,这里示范的是安装暴力猴,是一个开源的免费的小软件,是在github上的一款软件,下载下来之后名称为Violentmonkey_2.13.0_chrome.…

Node与浏览器平台下的Event loop

Event loop 浏览器中的Event loop 浏览器平台下一共有两个任务队列&#xff0c;一个是宏任务一个是微任务。 从上至下执行所有的同步代码执行过程中将遇到的宏任务与微任务添加至相应的队列同步代码执行完毕后&#xff0c;执行满足条件的微任务回调微任务队列执行完毕后执行…

C# 加解密之AES

从这一篇开始呢&#xff0c;写一下常用的一些加解密方式。一般我们来说呢&#xff0c;对于加密&#xff0c;我们分为可逆和不可逆。可逆加密又可分为对称加密&#xff08;AES、DES等&#xff09;和非对称加密&#xff08;RSA&#xff09;&#xff0c;还有就是一些编码加密等&am…

适用于C/C++开发人员的HOOPS

1.编译和运行时信息 1.1编制和执行 编译和运行基于C的应用程序需要以下步骤&#xff1a; 编译&#xff1a; 所有3DGS应用: hoops.lib 使用HOOPS/MVO的应用: hoops_mvo.lib 使用HOOPS/Stream的应用: hoops_stream.lib 执行&#xff1a;确保以下本地DLL位于应用程序的目录或…

学生个人单页面网页作业 学生网页设计成品 静态HTML网页单页制作 dreamweaver网页设计与制作代码 web前端期末大作业

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 文章目录一、网页介绍一…

MCE | 癌症诊断和靶向治疗的“遍地开花”

据研究报道&#xff0c;很多癌细胞分泌的外泌体 (Exosome) 比正常细胞分泌的多 10 倍以上。外泌体参与了癌症的发生、进展、转移和耐药性&#xff0c;并通过转运蛋白和核酸&#xff0c;建立与肿瘤微环境的联系。例如&#xff0c;外泌体可导致免疫逃逸&#xff0c;癌细胞的免疫逃…

java 云MAS业务平台_中国移动

云MAS业务平台_中国移动http://mas.10086.cn/login 首页可下载不同协议的接口对接文档,这里以https为例 接口报文数据结构 连接地址:https://:/sms/submit 请求方式:post 数据类型:json(base64加密) A:请求报文内容(一对一或多对一模式*注1): 名称类型说明ecNameSt…

企业年会直播来个虚拟舞台场景如何?

阿酷TONY / 2022-11-21 / 长沙 绿幕抠像 虚拟场景&#xff08;三维场景&#xff09;实时渲染&#xff0c;降低直播成本&#xff0c;带来线下活动所没有的沉浸式视听体验&#xff0c;来吧&#xff0c;来一场精彩纷呈的虚拟年会直播吧。 目录 1. 绿幕虚拟直播间 2. 虚拟场景(…

html实现爱情浪漫表白甜蜜时刻(附源码)

文章目录1.设计来源1.1 主界面1.2 相识界面1.3 相知界面1.4 相爱界面2.效果和源码2.1 动态效果2.2 源代码源码下载作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/128006618 html实现爱情浪漫表白甜蜜时刻(附源码) html爱…

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

&#x1f468;‍&#x1f393;静态网站的编写主要是用 HTML DⅣV CSSJS等来完成页面的排版设计&#x1f469;‍&#x1f393;&#xff0c;一般的网页作业需要融入以下知识点&#xff1a;div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉…

数据结构 | 栈和队列

… &#x1f4d8;&#x1f4d6;&#x1f4c3;本文已收录至&#xff1a;数据结构 | C语言 更多知识尽在此专栏中!文章目录&#x1f4d8;前言&#x1f4d8;正文&#x1f4d6;栈&#x1f4c3;结构&#x1f4c3;初始化&#x1f4c3;销毁&#x1f4c3;入栈、出栈&#x1f4c3;查看栈…

化工机械基础试题及答案

一、 名词解释&#xff08;10分&#xff09; 1、无力矩理论&#xff1a;在旋转薄壳的受力分析中忽略了弯矩的作用&#xff0c;该情况下的应力状态和承受内压的薄膜相似&#xff0c;又称薄膜理论。 2、法兰的公称压力&#xff1a;以16MnR在200℃时的力学性能为基础&#xff0c;其…

力扣刷题(代码回忆录)——动态规划

关于动态规划&#xff0c;你该了解这些&#xff01;动态规划&#xff1a;斐波那契数动态规划&#xff1a;爬楼梯动态规划&#xff1a;使用最小花费爬楼梯本周小结&#xff01;&#xff08;动态规划系列一&#xff09;动态规划&#xff1a;不同路径动态规划&#xff1a;不同路径…

在vmware虚拟机中安装Linux系统CentOS7详细教程

一、CentOS的下载 CentOS是免费版&#xff0c;推荐在官网上直接下载。 https://www.centos.org/download/ DVD ISO&#xff1a;普通光盘完整安装版镜像&#xff0c;可离线安装到计算机硬盘上&#xff0c;包含大量的常用软件&#xff0c;一般选择这种镜像类型即可。 Everythin…

使用html+css+js实现一个静态页面(含源码)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…