web前端期末大作业——开心旅游网站设计与实现(HTML+CSS+JavaScript)

👨‍🎓学生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" style="overflow: auto; overflow-x:hidden;"><head><title>开心旅游网</title><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><link rel="stylesheet" type="text/css" href="css/screen.css" /><script src="js/jquery.min.js"></script><script src="js/jquery.flexslider-min.js"></script><script type="text/javascript">$(window).load(function() {$('.flexslider').flexslider();});</script><link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" />
</head><body><div class="wrapper"><div class="top"><div class="top_link"><a href="#">设为首页</a> | <a href="#" class="link2">加入收藏</a></div></div><!--end of top--><div class="nav"><ul><li><a href="index.html">网站首页</a></li><li><a href="lvyouwh.html">南京旅游</a></li><li><a href="njms.html">南京美食</a></li><li><a href="jingdian.html">苏州旅游</a></li><li><a href="meishi.html">苏州美食</a></li><li><a href="fengjing.html">昆明旅游</a></li><li><a href="kmms.html">昆明美食</a></li></ul></div><!--end of nav--><div id="banner"><div class="flexslider"><ul class="slides"><li><a href="#"> <img src="image/ad1.jpg"  width="1010" /></a> </li><li><a href="#"> <img src="image/j2.jpg"  width="1010" /></a> </li><li><a href="#"> <img src="image/j3.jpg"  width="1010" /></a> </li><li><a href="#"> <img src="image/j4.jpg"  width="1010" /></a> </li></ul></div></div><!--end of banner--><div class="content"><div class="sidebar"><div class="pro_box"><div class="jj_cp2"><h3>旅游景点</h3></div><ul class="pro_list"><li><a href="jingdian_1.html">金鸡湖</a></li><li><a href="jingdian_2.html">拙政园</a></li><li><a href="jingdian_3.html">周庄</a></li><li><a href="jingdian_4.html">同里古镇</a></li></ul></div><!--end of pro_box--><div class="pro_box"><div class="jj_cp2"><h3>特色美食</h3></div><ul class="pro_list"><li><a href="meishi_1.html">太湖梅鲚</a></li><li><a href="meishi_2.html">太湖白虾</a></li><li><a href="meishi_3.html">采芝斋糖果</a></li><li><a href="meishi_4.html">松鼠桂鱼</a></li></ul></div><!--end of pro_box--></div><!--end of sidebar--><div class="main_con"><div class="chanp_box"><div class="jj_cp"><h3>旅游景点</h3></div><div class="show_box"><div class="show_panel"><ul id="show_list"><li> <a href="#"><img alt="" src="image/j1.jpg" width="164" height="168" /><span>景点展示</span></a> <a href="#"><img alt="" src="image/j2.jpg" width="164" height="168" /><span>景点展示</span></a> <a href="#"><img alt="" src="image/j3.jpg" width="164" height="168" /><span>景点展示</span></a>                                    <a href="#"><img alt="" src="image/j4.jpg" width="164" height="168" /><span>景点展示</span></a> </li></ul></div></div><!--end of show_box--></div><!--end of chanp_box--><div class="chanp_box"><div class="jj_cp"><h3>特色美食</h3></div><div class="show_box"><div class="show_panel"><ul id="show_list"><li> <a href="#"><img alt="" src="image/m1.jpg" width="164" height="168" /><span>特色美食</span></a> <a href="#"><img alt="" src="image/m2.jpg" width="164" height="168" /><span>特色美食</span></a> <a href="#"><img alt="" src="image/m3.jpg" width="164" height="168" /><span>特色美食</span></a>                                    <a href="#"><img alt="" src="image/m5.jpg" width="164" height="168" /><span>特色美食</span></a> </li></ul></div></div><!--end of show_box--></div><!--end of chanp_box--><div class="jj_box"><div class="jj_cp"><h3>开心旅游网南概况</h3></div><div class="jj_cloumn"> <a href="#"><img alt="" src="image/1.jpg" width="237" height="166"/></a><div class="jj_txt"><p>开心旅游网主要介绍南京,苏州河昆明的旅游景点和特色美食。带您领略旅游的无限开心一刻。</p><p>苏州,古称吴,简称苏,又称姑苏、平江等,中国华东地区特大城市之一,位于江苏省东南部、长江以南、太湖东岸、长江三角洲中部,是江苏省省辖市。</p><p>苏州历史悠久,是国家首批24个历史文化名城之一。苏州有文字记载的历史已逾四千年,是吴文化的发祥地和集大成者,历史上长期是江南地区的政治经济文化中心,苏州是天下四聚之一,苏州城始建于公元前514年,历史学家顾颉刚先生经过考证,认为苏州城为中国现存最古老的城市。</p><p>南京文化古迹遍布,从中可以探寻历史的源头:中山陵依山而建,结构严整,观之而生一股浩然之气;夫子庙建筑群古色古香,漫步其间,让你体味明清时代的市井繁荣;中华门气势宏伟,设计巧妙,置身城内,壁垒森然,耳边似有战马嘶鸣;此外还有灵谷寺、石象路、三国东吴所筑石头城遗址、明代朱元璋的陵墓(明孝陵)以及革命纪念地雨花台等,引人遐思无限。</p><p>昆明,别称"春城",是云南省会,云南省唯一的特大城市和西南地区第三大城市(仅次于成都、重庆),是云南省政治、经济、文化、科技、交通中心,西部地区重要的中心城市和旅游、商贸城市,亦是中国面向东南亚、南亚、东盟开放的重要枢纽城市。</p></div><!--end of jj_txt--></div><!--end of jj_cloumn--></div><!--end of jj_box--></div><!--end of mian_con--></div><!--end of content--></div><!--end of wrapper--><div class="foot"><div class="copyright"><p>版权所有&copy;开心旅游网</p><p><a href="http://mail.qq.com/">联系我们</a><a href="http://www.baidu.com/" target="_blank"> 友情链接</a></p></div><!--end of copyright--></div><!--end of foot-->
</body></html>

CSS样式代码🏡


/* Browser Resets */.flex-container a:active,
.flexslider a:active {outline: none;
}.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0;padding: 0;list-style: none;
}/* FlexSlider Necessary Styles
*********************************/.flexslider {width: 100%;margin: 0;padding: 0;
}.flexslider .slides>li {display: none;
}/* Hide the slides before the JS is loaded. Avoids image jumping */.flexslider .slides img {}.flex-pauseplay span {text-transform: capitalize;
}/* Clearfix for the .slides element */.slides:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;
}html[xmlns] .slides {display: block;
}* html .slides {height: 1%;
}/* No JavaScript Fallback *//* If you are not using another script, such as Modernizr, make sure you* include js that eliminates this class on page load */.no-js .slides>li:first-child {display: block;
}/* FlexSlider Default Theme
*********************************/.flexslider {position: relative;margin-top: 10px;padding-top: 10px;margin-left: 10px;zoom: 1;
}.flexslider .slides {zoom: 1;
}.flexslider .slides>li {position: relative;
}/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */.flex-container {zoom: 1;position: relative;
}/* Caption style *//* IE rgba() hack */.flex-caption {background: none;-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);zoom: 1;
}.flex-caption {width: 96%;padding: 2%;position: absolute;left: 0;bottom: 0;background: rgba(0, 0, 0, .3);color: #fff;text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);font-size: 14px;line-height: 18px;
}/* Direction Nav */.flex-direction-nav li a {width: 52px;height: 52px;margin: -13px 0 0;display: block;background: url(../image/bg_direction_nav.png) no-repeat 0 0;position: absolute;top: 150px;cursor: pointer;text-indent: -9999px;
}.flex-direction-nav li a.next {background-position: -52px 0;right: -51px;
}.flex-direction-nav li a.prev {background-position: 0 0;left: -60px;
}.flex-direction-nav li a.disabled {opacity: .3;filter: alpha(opacity=30);cursor: default;
}/* Control Nav */.flex-control-nav {width: 100%;position: absolute;bottom: -30px;*bottom: -0px;*bottom: -0px\9;text-align: center;
}.flex-control-nav li {margin: 0 0 0 5px;display: inline-block;zoom: 1;*display: inline;
}.flex-control-nav li:first-child {margin: 0;
}.flex-control-nav li a {width: 13px;height: 13px;display: block;background: url(../image/bg_control_nav.png) no-repeat 0 0;cursor: pointer;text-indent: -9999px;
}.flex-control-nav li a:hover {background-position: 0 -13px;
}.flex-control-nav li a.active {background-position: 0 -26px;cursor: default;
}

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

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


七、实训总结😊

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


八、更多干货🎁

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(杂谈)世界上本没什么prompt,有的只是加权平均——关于NLP中embedding的一点思考

&#xff08;杂谈&#xff09;世界上本没什么prompt&#xff0c;有的只是加权平均——关于NLP中embedding的一点思考 0. 写在前面1. 问题的提出2. 备受嫌弃的NSP&#xff0c;为什么效果不佳2. 比句子更小的片段——Span Bert3. 更加纯粹的表示方法——PURE4. 风光无限的prompt&…

大模型已涌现社会行为,斯坦福爆火论文打造《西部世界》雏形

源&#xff5c;机器之心 《西部世界》的游戏逐渐走进现实。 我们能否创造一个世界&#xff1f;在那个世界里&#xff0c;机器人能够像人类一样生活、工作、社交&#xff0c;去复刻人类社会的方方面面。这种想象&#xff0c;曾在影视作品《西部世界》的设定中被完美地还原出来&a…

清华ChatGLM-6B本地GPU推理部署

目录 1 简介 2 硬件需求 3 Demo和模型下载 3.1 安装Git LFS 3.2 Demo下载 3.3 模型下载 3.4 文件目录 4 环境安装 5 运行 5.1 FP16 5.2 量化 6 演示 1 简介 ChatGLM-6B是一个开源的、支持中英双语的对话语言模型&#xff0c;基于General Language Model&#xff0…

ChatGLM2-6B本地部署,人人都可以用上LLM大语言模型!

文章目录 介绍使用方式硬件需求环境安装仓库下载模型下载环境安装安装三方库代码调用从本地加载模型 Demo演示命令行 DemoAPI DemoOpenAI 格式的流式 API Demo基于 Streamlit 的网页版 demo 低成本部署相关问题No module named ‘readline’解决方法 module ‘collections’ ha…

[VScode] 嵌入式软件开发必备插件

文章目录 1. C/C 【c/c智能提示、调试和代码浏览】2. C Intellisense 【借助GNU Global标签的c/c智能提示】3. Bracket Pair Colorizer 【一个可定制的扩展为匹配括号着色 】4. Chinese (Simplified) 【中文语言包扩展(简体) 】5. GBKtoUTF8 【GBK到utf8】6. hexdump for VSCod…

chatgpt赋能python:Python在SEO中的利与弊

Python在SEO中的利与弊 引言 Python是一种高级编程语言&#xff0c;因其简洁、易于学习和应用广泛而受到全球程序员的青睐。然而&#xff0c;在SEO领域中&#xff0c;Python通常被认为有黑和白两面性。本文将围绕这个话题展开探讨。 Python的优点 简洁易学 Python拥有直观…

chatgpt赋能python:Python更新界面:让你的应用更美观、更易用

Python更新界面&#xff1a;让你的应用更美观、更易用 Python是一门强大的编程语言&#xff0c;广泛应用于软件开发、数据分析、机器学习等领域。其中&#xff0c;Python的GUI开发能力也非常出色。Python支持多种GUI库&#xff0c;如Tkinter、PyQt、wxPython等&#xff0c;可以…

chatgpt赋能python:Python黑色和浅黑色的代码

Python黑色和浅黑色的代码 Python是一门简洁而强大的编程语言。它在各行各业中广泛应用&#xff0c;包括Web开发、数据分析、人工智能等领域。Python代码的可读性和易于维护性使其成为编程界非常流行的语言之一&#xff0c;几乎所有开发工具都支持Python。Python黑色和浅黑色的…

吴恩达 Chatgpt prompt 工程--7.Chatbot

探索如何利用聊天格式与针对特定任务或行为进行个性化或专门化的聊天机器人进行扩展对话。 Setup import os import openai from dotenv import load_dotenv, find_dotenv _ load_dotenv(find_dotenv()) # read local .env fileopenai.api_key os.getenv(OPENAI_API_KEY)d…

Chatbot UI 和 ChatGLM2-6B 的集成

Chatbot UI 和 ChatGLM2-6B 的集成 0. 背景1. 部署 Chatbot UI2. 部署 ChatGLM2-6B3. 修改 ChatGLM2-6B 项目的 openai_api.py4. 修改 Chatbot UI 的配置5. 访问 Chatbot UI 0. 背景 尝试将 Chatbot UI 和 ChatGLM2-6B 的进行集成&#xff0c; ChatGLM2-6B 提供 API 服务&…

ImportError: cannot import name ‘chatBot‘ from ‘chatbot‘ (C:\Users\l\Pych

报错&#xff1a; ImportError: cannot import name ‘chatBot’ from ‘chatbot’ (C:\Users\l\Pych 如下图所示&#xff1a; Terminal中执行&#xff1a; pip install -i https://pypi.tuna.tsinghua.edu.cn/simple chatterbot 并将报错文件app.py的第一行 from chatbot i…

基于Chatbot UI 实现ChatGPT对话-V1.3-预告

先讲一个悲伤的故事&#xff1a;小红书被封号了。。。emo。。。 给俺点点关注吧&#xff0c;这次一定好好发言&#x1f4ac; 【迷茫的21世纪的新青年】 一、预告图 自定义随机量&#xff0c;让回复按需设置。 二、更新功能 随机量 参数名&#xff1a;Temperature&#xff08;温…

Chatbot + 知识库(Knowledge Base)

从 GPT-3 和 ChatGPT 等大型语言模型 (LLM) 的最新进展中可以看出&#xff0c;在技术行业引起了很大的关注。这些模型对内容生成非常强大&#xff0c;但它们也有一些缺点&#xff0c;例如偏差1 和幻象2。LLM在聊天机器人开发方面特别有用。 基于意图的聊天机器人​ 传统聊天机…

基于Chatbot UI 实现ChatGPT对话-V1.3

基于Chatbot UI 实现ChatGPT对话-V1.3 前端基于开源项目&#xff1a;chatbot-ui进行二次开发&#xff0c;感兴趣的小伙伴可以自行研究。 本项目搭建初衷&#xff1a; 1、在无法科学上网的情况下&#xff0c;实现ChatGPT对话。 2、规避官方聊天时&#xff0c;长时间无链接导致…

从B 树、B+ 树、B* 树谈到R 树

程序员的成长之路 互联网/程序员/技术/资料共享 关注 阅读本文大概需要 40 分钟。 来自&#xff1a;blog.csdn.net/v_JULY_v/article/details/6530142 第一节、B树、B树、B*树 前言 动态查找树主要有&#xff1a;二叉查找树&#xff08;Binary Search Tree&#xff09;&#x…

NLP大模型微调原理

1. 背景 LLM (Large Language Model) 大型语言模型&#xff0c;旨在理解和生成人类语言&#xff0c;需要在大量的文本数据上进行训练。一般基于Transformer结构&#xff0c;拥有Billion以上级别的参数量。比如GPT-3(175B)&#xff0c;PaLM(560B)。 NLP界发生三件大事&#xff…

淘宝开店流程图解

原文&#xff1a; 淘宝开店流程图解 链接&#xff1a; http://hyp5920.blog.163.com/blog/static/50951573201310194550775/ 2013-11-01 23:53:31| 分类&#xff1a;知识乐园 | 标签&#xff1a;天天淘淘美装 |字号 订阅 淘宝开店是很简单的。只要拿身份证开通网银&…

从软件开发到开淘宝店铺

2019独角兽企业重金招聘Python工程师标准>>> 我的店铺 背景&#xff1a; 最近思索 这个时代 不可能一辈子敲代码【可能学习能力跟不上 可能给的待遇自己不满意】 但是可以一辈子开店铺看到越来越多的人习惯在网上购物 越来越多的人在网上赚钱 我为什么就不能利用工…

淘宝店铺wang

简约型 1、蒙马特 &#x1f517;&#xff1a;57啊可的大了有家对小起然了&#xff0c; https://m.tb.cn/h.fBSsV3Z?smde76a8 CZ3457 我分享给你了一个超赞的内容&#xff0c;快来看看吧 2、WASSUP中国 &#x1f517;&#xff1a;27哈个一么中有家对然和生子微 https://m…

弘辽科技:新手开淘宝网店的七大攻略

原标题《弘辽科技&#xff1a;新手开淘宝网店的七大攻略》 伴随着计算机信息化技术的发展&#xff0c;互联网经济欣欣向荣&#xff0c;电子商务的发展也越加的繁荣。自从淘宝店上线之后&#xff0c;受到了很多朋友们的喜欢&#xff0c;因为它改变了人们的生活方式&#xff0c;…