web前端网页设计期末课程大作业：旅游网页主题网站设计——紫色的旅游开发景点网站静态模板(4页)HTML+CSS+JavaScript

news2024/11/30 14:44:58

👨‍🎓学生HTML静态网页基础水平制作👩‍🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

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

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

文章目录🌰

  • 一、网站题目👨‍🎓
  • 二、网站描述✍️
  • 三、网站介绍📖
  • 四、网站效果🌐
  • 五、网站代码制作部分 📕
    • HTML结构代码🧱
    • CSS样式代码🏡
  • 六、遇到问题及如何解决🔍
  • 七、实训总结😊
  • 八、更多干货🎁

一、网站题目👨‍🎓

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

二、网站描述✍️

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

三、网站介绍📖

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

网站程序方面：计划采用最新的网页编程语言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代码）。

四、网站效果🌐

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

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

五、网站代码制作部分 📕

（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 href="css/css.css" rel="stylesheet" type="text/css" />
<style>
html,body{ background:#e3e3e3}
</style>
</head>

<body>
<div class="topbg">
<div class="top">
  <div class="logo"><img src="images/index_04.png" width="231" height="110"  /></div>
  <div class="nav"><ul>
  <li><a href="index.html" class="hover">网站首页</a></li>
  <li><a href="about.html">景区简介</a></li>
  <li><a href="news.html">景区资讯</a></li>
  <li><a href="#">景点介绍</a></li>
  <li><a href="#">特色商品</a></li>
  <li><a href="#">游玩知识</a></li>
  <li><a href="#">票务系统</a></li>
   <li><a href="#">游客留言</a></li>
  </ul></div>
</div></div>
 <!-- 代码部分begin -->
<div class="slide banner" data-slide='{"action":"click","fn":"banner_ext","time":"8000"}'>
	<div class="ban_c album"><a href="#"><img src="images/02.jpg"/></a></div>
	<div class="ban_c album"><a href="#"><img src="images/01.jpg" /></a></div>
	<div class="ban_c album"><a href="#"><img src="images/03.jpg"  /></a></div>

</div>
 
<script src="js/jquery.min.js" ></script>
<script src="js/script.js"></script>

<!-- 代码部分end -->
<div class="top">
<div class="imgnv">
<img src="images/index_09.png" />
<img src="images/index_11.png" />
<img src="images/index_13.png" />
<img src="images/index_15.png" /></div>
</div>
<div style="background:url(images/index_08.jpg) no-repeat center top; height:330px"> 
<div class="top">
  <dl class="about"><dt><img src="images/index_25.png" /></dt>
<dd style="width:550px; margin-left:20px; padding-top:20px">       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 紫薇园漂流项目所在徐州市铜山区伊庄镇倪园村，即徐州市吕梁山风景区紫薇园内；漂流全长约2.5公里，落差140米，总规划面积70000平方米，漂流总投资2200万元。漂流区主要设置有蓄水池，候漂长廊，起漂码头及候漂排队区、仓库、回旋车城等，漂流体验区分为3个区域，森林石海区，紫薇花溪区和汉邦古韵区。
<br />

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 紫薇园漂流周边有倪园古镇，农家乐，我们有配套的游客服务中心，超市，奇石馆，纪念品商店，特色小吃店等，经过多年规划，形成了一个有特色的古镇文化风景区。农家乐位于倪园古镇北侧，我们配套特色农家小吃，如春秋古院，酒肆，香油坊，酱油坊。</dd>
<dd style="float:right; padding-top:15px"><img src="images/index_22.png" /></dd>
<div class="clear"></div></dl>
</div></div>
<div style="background:url(images/index_10.jpg) no-repeat center bottom #e5edf5; padding-bottom:120px ">
<div class="top">

<dl class="sub"><img src="images/index_32.png"  /><dt>
 <img src="images/index_41.png" width="296" height="93" /></dt>
  <dd><ul class="news">
      <li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
         <li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
          <li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
           <li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
            
       </ul></dd></dl>
<dl class="sub"><img src="images/index_35.png"  /><dt>
 <img src="images/index_44.png" width="296" height="93" /></dt>
  <dd><ul class="news">
      <li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
         <li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
          <li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
           <li><a href="#">漂流体验区分为3个区域，森林石海区</a><span>2015-1-1</span></li>
            
       </ul></dd></dl>

<div class="fr" style="width:550px; margin-top:16px">
  <div><img src="images/index_29.png" width="122" height="49" /></div>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td rowspan="2"><img src="images/index_46.png" width="187" height="312" /></td>
    <td><img src="images/index_49.png" width="166" height="145" /></td>
    <td><img src="images/index_51.png" width="166" height="145" /></td>
  </tr>
  <tr>
    <td><img src="images/index_57.png" width="166" height="154" /></td>
    <td><img src="images/index_58.png" width="166" height="154" /></td>
  </tr>
</table>

</div>


</div>
 <div class="clear"></div>
</div>
<div class="footbg">
  <div class="foot"><span class="fr"><img src="images/index_66.png"/><br />
官方微信公众号</span><img src="images/index_63.png" class="fl"/><span style="padding-top:10px; display:inline-block">
<a href="index.html">网站首页</a> |  <a href="#">景区简介</a> |  <a href="#">景区资讯</a> |  <a href="#">景点介绍</a> |  <a href="#">特色商品</a> |  <a href="#">游玩知识</a> |  <a href="#">票务系统</a> |  <a href="#">游客留言</a><br />

版权所有：徐州紫薇园   景区客服咨询电话：400-9621866、0516-83277369 &nbsp;&nbsp; 技术支持：<a href="#">慧谷科技</a><br />
观光地址：徐州吕梁悬水湖风景区紫薇园  紫薇园全体员工欢迎您的到来</span>


<div class="clear"></div>
  </div>
</div>
</body>
</html>

CSS样式代码🏡


@charset "utf-8";
/* CSS Document */

html,body{margin:0;border:0;padding:0;width:100%;font-size:14px;font-family: Arial,"微软雅黑","宋体"; background:#fff; color:#333333; line-height:27px}
img {border:0px; }
*{ padding:0; margin:0}
ul,li,dl,dd,dt,span{ margin:0; padding:0;}
li { list-style:none;}
a {text-decoration:none;color:#333; } 
a:hover { text-decoration:none; color:#e9002e}
.clear { clear:both; font-size:0; height:0; line-height:0;}
.mt10 { margin-top:10px;}
.mb5{ margin-bottom:5px}
.ml20{ margin-left:20px;}
.ml10{ margin-left:10px;}
.mt20{ margin-top:20px}
.mt8{ margin-top:8px}
.mt30{ margin-top:30px}
.p10{ padding:20px}
.p15{ padding:15px}
.ptb5{ padding-top:5px; padding-bottom:5px}
.fl{ float:left}
.fr{ float:right}
.wd90{ width:90%}

.topbg{ background:url(../images/index_02.png); height:90px; position:relative; margin-bottom:-90px; z-index:100}
.top{ width:1211px; margin:0 auto; }
.top2{ width:1211px; margin:0 auto; background:#fff; margin-top:480px;border-radius:10px; margin-bottom:20px }
.logo{ float:left; width:276px;}
.nav { float:right; width:920PX;}
.nav ul li{ float:left; width:115px;   line-height:90px }
.nav ul li a{ text-align:left; display:block; color:#fff; font-size:16px; padding-left:25px; }
.nav ul li a.hover{ background:#90157b}
.nav ul li a:hover{background:#90157b }
.nav ul li a span{ display:block; margin-top:2px; font-size:12px; color:#999}
.about { padding:40px 0}
.about dt{ float:left; width:321px}
.about dd{ float:left;}

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

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

七、实训总结😊

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

八、更多干货🎁

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

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

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥在这里插入图片描述

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

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

相关文章

股票l2接口的委托数据有什么作用？

股票l2接口的委托数据有什么作用？

股票l2接口的委托数据有什么作用&#xff1f; 委托队列返回数据&#xff1a;Level 2 行情将真实的每笔成交和成交量以明细数据呈现给用户。 用户可通过查看明细成交数据&#xff0c;判断出委托是属于大单、中单、小单并以此推断出是机构、大户、散户等所为&#xff0c;查明主…
阅读更多...
国内外远程办公软件现状

国内外远程办公软件现状

我们说的远程办公通常指狭义上的远程办公&#xff0c;是指通过远程技术&#xff0c;或远程控制软件&#xff0c;对远程电脑进行操作办公&#xff0c;实现非本地办公&#xff0c;如在家办公、异地办公、移动办公等远程办公模式。这种技术的关键在于:穿透内网和远程控制的安全性。…
阅读更多...
软件工程期末复习

软件工程期末复习

文章目录一、单选、多选、判断二、简答题1、MVC体系结构2、软件风险的分类3、测试准则&#xff08;教材P111- 5.2.3&#xff09;4、结构化分析的方法5、面向对象设计的原则&#xff08;SOLID&#xff09;&#xff08;1&#xff09;单一职责原则&#xff08;2&#xff09;开放/闭…
阅读更多...
arduino-ide ESP32 开发

arduino-ide ESP32 开发

本来想用vscodePlatformIO 一直安装不成功&#xff0c;网不行。先用Arduino&#xff08;后来用手机开热点&#xff0c;安装成功了&#xff0c;电信的局域网真差&#xff09; 我的ESP开发版是CP2102驱动芯片&#xff0c;需要先安装驱动 CP210x USB to UART Bridge VCP Driver…
阅读更多...
剑指 Offer 62. 圆圈中最后剩下的数字

剑指 Offer 62. 圆圈中最后剩下的数字

文章目录题目思考代码和注释总结题目 0,1,,n-1这n个数字排成一个圆圈&#xff0c;从数字0开始&#xff0c;每次从这个圆圈里删除第m个数字&#xff08;删除后从下一个数字开始计数&#xff09;。求出这个圆圈里剩下的最后一个数字。 例如&#xff0c;0、1、2、3、4这5个数字组…
阅读更多...
技术创新，她不断进取！冲在前端，开发是她！

技术创新，她不断进取！冲在前端，开发是她！

单从数字比例上来看&#xff0c;前端开发工程师的女性占比相对整个行业来说较高。成为优秀的前端开发工程师&#xff0c;不论男女&#xff0c;你都可以&#xff01;本期工作坊就想跟你聊聊&#xff0c;想要成为一名优秀的前端开发应该具备怎样的能力&#xff1f;女性的哪些独特…
阅读更多...
还在用HttpUtil？SpringBoot 3.0全新HTTP客户端工具来了，用起来够优雅！

还在用HttpUtil？SpringBoot 3.0全新HTTP客户端工具来了，用起来够优雅！

我们平时开发项目的时候&#xff0c;经常会需要远程调用下其他服务提供的接口&#xff0c;于是我们会使用一些HTTP工具类比如Hutool提供的HttpUtil。前不久SpringBoot 3.0发布了&#xff0c;出了一个Http Interface的新特性&#xff0c;它允许我们使用声明式服务调用的方式来调…
阅读更多...
Grafana 集成 Prometheum

Grafana 集成 Prometheum

参考文章&#xff1a; linux 上搭建grafana_摸鱼第一人的博客-CSDN博客_linux安装grafana 目录 一、安装 Grafana 二、安装 Prometheus 三、Prometheus 集成 Grafana 一、安装 Grafana 1、从官网下载rpm包 Download Grafana | Grafana Labs 2、将下载好的包上传到linu…
阅读更多...
开源博客项目Blog .NET Core源码学习（2：数据库结构分析）

开源博客项目Blog .NET Core源码学习（2：数据库结构分析）

项目采用17张表以支撑博客内容展示及后台管理功能&#xff0c;本文结合数据库表中的存储数据&#xff0c;学习每张表的用途及其中字段的意义&#xff08;有部分字段暂时还不明白&#xff0c;后续学习代码时再逐步完善&#xff09;。 序号表名用途1CategoryInfo保存文章栏目的定…
阅读更多...
vulntarget靶场系列-a-writeup

vulntarget靶场系列-a-writeup

网络配置外网WIN7&#xff1a;ip1: 192.168.127.91/255.255.255.0 ,gw:192.168.127.2 (NAT模式)ip2:10.0.20.98-vmnet1(仅主机模式)域主机成员&#xff1a;10.0.20.99-vmnet1(仅主机模式)10.0.10.111-vmnet2(仅主机模式)域控&#xff1a;10.0.10.110-vmnet2(仅主机模式)密码配置…
阅读更多...
C++11标准模板（STL）- 算法（std::max_element）

C++11标准模板（STL）- 算法（std::max_element）

定义于头文件 <algorithm> 算法库提供大量用途的函数&#xff08;例如查找、排序、计数、操作&#xff09;&#xff0c;它们在元素范围上操作。注意范围定义为 [first, last) &#xff0c;其中 last 指代要查询或修改的最后元素的后一个元素。 返回范围内的最大元素 st…
阅读更多...
2022 12月15日 每日面试题(MyBatis)

2022 12月15日 每日面试题(MyBatis)

&#x1f3e0;个人主页&#xff1a;不会写代码的满满 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是满满&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; 目前状况&#x1f389;&#xff1a;开学即将大三&#xff0c;目标就是半年内找到一份实…
阅读更多...
【云计算与大数据技术】资源管理、调度模型策略的讲解

【云计算与大数据技术】资源管理、调度模型策略的讲解

一、资源管理模型 集群资源管理模型通常由两个部分组成&#xff0c;即资源表示模型和资源分配模型&#xff0c;由于这两个部分是耦合的&#xff0c;所有优化集群资源管理时需要同时结合这两个部分考虑&#xff0c;资源表示模型用于描述集群资源的组织方式&#xff0c;是集群资…
阅读更多...
【Contrastive Learning:IVIF】

【Contrastive Learning:IVIF】

CLF-Net: Contrastive Learning for Infrared and Visible Image Fusion Network &#xff08;LF-Net&#xff1a;红外与可见光图像融合网络的对比学习&#xff09; &#xff08;总结&#xff1a;就是更像谁就选谁&#xff09; 本文提出了一种基于对比学习的红外和可见光图像融…
阅读更多...
透过ChatGPT的进化足迹，OpenAI传达了哪些信号？

透过ChatGPT的进化足迹，OpenAI传达了哪些信号？

古希腊神话中&#xff0c;一位名叫赫尔墨斯的神&#xff0c;会充当人神之间的信使&#xff0c;穿着带有双翼的飞鞋&#xff0c;行走在神明与人类之间。根据《荷马史诗》的记载&#xff1a;“在天神中&#xff0c;赫尔墨斯是最喜欢引导凡人前行的。”这句话用来形容OpenAI与AI的…
阅读更多...
佳力奇IPO过会：拟募资11亿 西安现代与华控湖北是股东

佳力奇IPO过会：拟募资11亿 西安现代与华控湖北是股东

雷递网 雷建平 12月13日安徽佳力奇先进复合材料科技股份公司&#xff08;简称&#xff1a;“佳力奇”&#xff09;日前IPO过会&#xff0c;准备在深交所创业板上市。佳力奇计划募资11.22亿元&#xff0c;其中&#xff0c;6.2亿元用于先进复合材料数智化生产基地建设项目&#x…
阅读更多...
Google Cloud database options （关于GCP数据库怎么选择）

Google Cloud database options （关于GCP数据库怎么选择）

背景 GCP提供了几种您可以从中选择的数据库服务&#xff0c;可是究竟该用哪个呢&#xff1f; Cloud SQL:Cloud Spanner:BigQuery:Cloud Bigtable:Cloud Firestore:Firebase Realtime Database:Cloud Memorystore: from Google Cloud database options sort out by zhengkai.…
阅读更多...
【自然语言处理】隐马尔科夫模型【Ⅱ】隐马尔科夫模型概述

【自然语言处理】隐马尔科夫模型【Ⅱ】隐马尔科夫模型概述

有任何的书写错误、排版错误、概念错误等&#xff0c;希望大家包含指正。 由于字数限制&#xff0c;分成六篇博客。 【自然语言处理】隐马尔可夫模型【Ⅰ】马尔可夫模型 【自然语言处理】隐马尔科夫模型【Ⅱ】隐马尔科夫模型概述 【自然语言处理】隐马尔科夫模型【Ⅲ】估计问题…
阅读更多...
14、TheFatRat木马生成工具-创建后门或payload

14、TheFatRat木马生成工具-创建后门或payload

kail攻击主机&#xff1a; Kali 192.168.11.106靶机&#xff1a;windows server 2008 r2 192.168.11.134 x64 32位一、TheFatRat介绍 TheFatRat创建的后门或者payload&#xff0c;可以在Linux&#xff0c;Windows&#xff0c;Mac和Android上等多种平台上执行&#xff0c;可生…
阅读更多...
九、JavaScript——数据类型_数值

九、JavaScript——数据类型_数值

一、数值 定义及规范&#xff1a; 数值 &#xff08;Number) -在JS中所有的整数和浮点数(小数) 都是Number JS中的数值并不是无限大的&#xff0c;当数值超过一定后会显示近似值&#xff0c;JavaScript表达的最大整数是&#xff1a;9007199254740992 Infinity 是…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023