制作一个简单HTML旅游网站(HTML+CSS+JS)云南旅游网页设计与实现5个页面

一、👨‍🎓网站题目
旅游,当地特色,历史文化,特色小吃等网站的设计与制作。

二、✍️网站描述

云南旅游主题的网页 一共七个个页面
- 旅游网页使用html css js制作 有banana图
- 页面可以相互跳转 包含表单 三级页面
- 网页可以使用vscode hbuilder dw等打开修改
- 里面的图片和文字都可以替换为其他旅游网页
- 云南旅游网页介绍了景点,美食,联系我们,桂林旅游等
- html静态网页 没有复杂效果 布局简单 原创html网页设计 适合当作业使用

👨‍🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。

三、📚网站介绍


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

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

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

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

📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;

 四、🌐网站效果

 

 

 

 

 

五、🪓 代码实现

🧱HTML
<!DOCTYPE html >
<html>
<head><title></title><link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body><div class="banner"><img src="images/b7.png" height="500px"  width="100%"/><div class="head"><div class="logo"><a href="#"><img src="images/logo.png" /></a></div><div class="nav"><a href="index.html" >首页 </a><a href="industry.html" > 特色美食</a><a href="products.html" >旅游景点 </a><a href="part.html" >简介 </a><a href="company.html" class="cur">关于我们 </a><a href="jishu.html">云南历史</a><a href="chengjiu.html">云南文化</a></div><div class="search"><input type="text" placeholder="站内信息搜索" /><a href="#">搜索 </a></div></div></div><div class="case"><div class="all"><div class="tit"><h2>关于我们</h2><p>Profile</p></div><p style="width:1000px;"><img src="images/321.png" align="right" width="400px" height="400px" ><p style="font-size: 18px; color: #787878; line-height: 3; margin-top: 30px; margin-bottom: 30px;text-indent: 2em;">唐朝,武德四年(621年),置姚州管羁縻州三十二。贞观六年(633年),于戎州置都督府,督南中一十七州,部分地区属安南都督府管辖。 [91]神龙三年(707年),唐朝击败南侵洱海的吐蕃扩张势力,开元二十六年(738年),洱海地区的蒙舍诏部落首领、哀牢夷人皮罗阁兼并其他五诏,建立南诏国,唐册封其为云南王。南诏时期的疆域东接贵州,西抵伊洛瓦底江,南达西双版纳,北接大渡河;东南界今越南,西南界今缅甸;西北与吐蕃为邻,东北与戎州(今宜宾)相望的广阔疆域            </p><p style="font-size: 18px; color: #787878; line-height: 3; margin-top: 30px; margin-bottom: 30px;text-indent: 2em;">南诏内修制度,筑拓东城(今昆明)。次年建都太和城(今大理市)。天宝元年(742年),置戎州督羁縻三十六州。天宝九年(750年),南诏占领云南全境,称臣吐蕃,僭国号曰大蒙。贞元四年(788年),吐蕃册封日东王。五年,复归唐。十年,请改国号南诏。太和三年(829年),复叛唐。大中十三年(839年),僭称帝国,号大礼。879年,郑买嗣杀南诏王建大长和。光化四年(901年),郑买嗣夺位,自立为王,改国号大长和。后唐天成三年(928年),杨干贞建大义宁。            </p><p style="font-size: 18px; color: #787878; line-height: 3; margin-top: 30px; margin-bottom: 30px;text-indent: 2em;">后晋天福二年(937年),段思平联络三十七部灭大义宁国,建立大理国政权。大理国政权基本上承袭了南诏以来的疆界,行政区划设有八府、四郡、三十七部,实行封建农奴制专政。大理国政权在云南的统治基本与中原的宋朝相始终。以高升泰篡权为标志,大理国的历史分为两个时期:937~1094年为前期,即大理国时期;1096~1253年为后期,即后理国时期。大理王向宋朝称臣纳贡,其首领先后被宋朝封为云南八国郡王、大理王等,并成为南宋王朝抵御蒙古贵族西部战线的助手。大理国政权始终保持着对宋王朝的臣属关系。</p><p style="font-size: 18px; color: #787878; line-height: 3; margin-top: 30px; margin-bottom: 30px;text-indent: 2em;">2020年在抗击新冠肺炎期间,北科瑞声承担建设了武汉火神山医院非接触智能语音HIS系统,在国内首次实现穿戴防护设备和多层口罩场景下特殊语音实时处理,实现全程非接触语音控制。北科瑞声被列入国家级和广东省抗击疫情重点保障企业名单,依托北科瑞声建立的广东省医疗非接触语音交互工程技术研究中心被认定为2020年度首批广东省工程技术研究中心。公司入选国家工信部“在科技支撑抗击新冠肺炎疫情中表现突出的人工智能企业名单”(深圳仅8家企业上榜)。</p><p style="font-size: 18px; color: #787878; line-height: 3; margin-top: 30px; margin-bottom: 30px;text-indent: 2em;">元朝,元宪宗三年(1253年),孛儿只斤·忽必烈率大军乘革囊渡金沙入云南,灭大理国,中统元年(1260年),设大理国总管。至元十三年(1276年),忽必烈选派赛典赤·赡思丁为“云南行中书省平章政事”,省会中庆路(昆明),自此昆明取代大理成为云南的政治中心,云南完全纳入了元朝的统一治理范围,自此,“云南”一名便正式作为行省一级的机构出现。 [9]此后元朝封也先贴木儿为云南王,至元二十七年(1290年),封皇孙甘麻剌为梁王,云南王镇大理,梁王管辖全省,云南实际上存着行省与诸王府两套政权。            </p></p><img src="images/about.png" /><div class="c"></div></div></div><div class="foot"><div class="all"><ul><li><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p></li><li><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p></li><li><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p></li><li><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p><p><a href="#">云南</a></p></li></ul></div><div class="ewm" ><img src="images/ewm.png" style="padding:-30px;" height="100px"; width="100px";/><p>官方微信</p></div>
</body>
</html>

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习。

七、🎁更多干货

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

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

3.以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥源代码:
QQ:3021557545

绿泡泡:XiaoMei_NN

4.有任何意见或者不懂得地方可以在评论区留言,也可以私信,我会认真看也会回复的哦

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

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

相关文章

Shopee爆款打造核心运营方法,下一个大卖就是你

课程下载&#xff1a;Shopee爆款打造核心运营方法&#xff0c;下一个大卖就是你-课程网盘链接提取码下载.txt资源-CSDN文库 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 001.1-爆款产品的选择,mp4 002.2-依据宗教信仰和消费禁忌选品.mp4 003.3-刻画消费者画像…

C++设计模式-桥接模式

运行在VS2022&#xff0c;x86&#xff0c;Debug下。 29. 桥接模式 桥接模式将抽象与实现分离&#xff0c;使二者可以独立地变化。 应用&#xff1a;如在游戏开发中&#xff0c;多个角色和多个武器交叉组合时。可以使用桥接模式&#xff0c;定义角色抽象类&#xff0c;武器抽象…

如何跨渠道分析销售数据 - 7年制造业销售经验小结

如何跨渠道分析销售数据 - 7年制造业销售经验小结&#xff08;1&#xff09; 【前言】 在我过去7年销售工作生涯中&#xff0c;从第一年成为公司销冠后&#xff0c;我当时的确自满的一段时间&#xff0c;认为自己很了不起。但是第一年的销售业绩并没有拿到提成&#xff0c;最…

爱情的短视频短片:四川京之华锦信息技术公司

爱情的短视频短片&#xff1a;情感瞬间的浓缩与绽放 在数字化时代&#xff0c;短视频以其短小精悍、直击人心的特点&#xff0c;迅速占领了互联网的高地。而在这些纷繁复杂的短视频内容中&#xff0c;关于爱情的短视频短片更是以其独特的魅力&#xff0c;吸引了无数观众的目光…

【U-Net验证】逐元素乘积将特征投射到极高维隐式特征空间的能力

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需使用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言网络结构编码结构解码结构代码 实验实验设置w/o-ReLU的性能比较with-ReLU的性能比…

【Kotlin】简单介绍与使用kotlin

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Kotlin ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 特点 变量和常量 数据类型和类型推断 函数 字符串模板 条件表达式 空安全 when 表达式 循环 我的其他博客 前言 Kotlin是…

适合技术小白学习的项目1840java swing社团管理系统myeclipse开发Mysql数据库CS结构java编程

一、源码特点 java swing社团管理系统 是一套完善的窗体设计系统&#xff0c;对理解SWING java 编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;&#xff0c;系统主要采用C/S模式开发。 应用技术&#xff1a;javamysql 开发工具&#xff1a;Myecl…

Flutter开发效率提升1000%,Flutter Quick教程之对被遮挡的组件进行编辑

1&#xff0c;有些时候&#xff0c;有的widget会被其他widget所遮挡&#xff0c;那么&#xff0c;我们如何选中被遮挡的Widget?如下面这张图。上面是一个Text&#xff0c;外面包裹着一个Container&#xff0c;这时候点击事件会被Text所拦截&#xff0c;那么&#xff0c;如何选…

零基础画师文创运营变现课,从0基础到入门一步步提升(46节课)

课程下载&#xff1a;零基础画师文创运营变现课&#xff0c;从0基础到入门一步步提升&#xff08;46节课&#xff09;-课程网盘链接提取码下载.txt资源-CSDN文库 更多资源下载&#xff1a;关注我。 课程内容&#xff1a; 01 我的二十五年,mp4 02 古法裁剪与新古法裁剪,mp4 …

动规算法-地下城游戏

在刷题练习专栏中&#xff0c;已经写了两篇文章实现对动态规划入门题目的讲解了&#xff0c;动态规划这类题目很难很好的掌握&#xff0c;今天给大家带来稍微深入的题目&#xff0c;帮助大家更好的理解动态规划的算法思想&#xff0c;加深对该算法的理解&#xff0c;建议看每道…

操作系统|进程和线程的上下文以及他们的上下文切换具体流程?

进程和线程已经是老生常谈的问题了&#xff0c;现在那么他们是如何进行切换的呢&#xff1f;他们之间的切换有什么区别呢&#xff1f;如果你不懂的话&#xff0c;就让我们一起来探讨一下吧&#xff01; 进程上下文切换(context switch) 进程到底由哪些部分组成&#xff1f; …

GPT-4o vs. GPT-4 vs. Gemini 1.5 性能评测,谁更胜一筹!

OpenAI 最近推出了 GPT-4o&#xff0c;OpenAI有一次火爆了&#xff0c;其图像、音频、视频的处理能力非常强。 最令人印象深刻的是&#xff0c;它支持用户与 ChatGPT 实时互动&#xff0c;并且能够处理对话中断。 而且&#xff0c;OpenAI 免费开放了 GPT-4o API 的访问权限。…

finebi或者finereport发邮件

我们二次开发中&#xff0c;如果想利用产品自带的发邮件的功能&#xff0c;来发送自己的邮件内容。 首先 决策系统中邮件相关信息要配置好之后&#xff1a; 这里配好了发件人&#xff0c;以及默认发件人后&#xff0c; private void sendEmail(String content,String subject)…

云计算如何助力金融科技企业实现高效运营

一、引言 随着信息技术的飞速发展,云计算作为一种新兴的计算模式,正在逐渐改变着传统金融行业的运营模式。金融科技企业作为金融行业的重要组成部分,面临着日益增长的业务需求和技术挑战。在这一背景下,云计算凭借其弹性扩展、高可用性、低成本等优势,成为金融科技企业实…

163.二叉树:二叉树的最小深度(力扣)

代码解决 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}* Tre…

海南省三支一扶报名照上传失败?别忘了这

一、海南三支一扶报名照上传失败的2个原因 1.未按要求使用浏览器&#xff1a;请使用IE浏览器&#xff08;IE8以上版本&#xff09;、Chrome(谷歌浏览器&#xff09;或 Firefox&#xff08;火狐&#xff09;浏览器 来使用本系统&#xff0c;360浏览器等其他浏览器请使用极速模式…

数电课设:电动机转速测量控制电路

电动机转速测量控制电路设计 摘要 本文设计的电动机转速测量控制电路通过数字电路核心实现对电机转速的测量和显示。与市面上基于单片机的电机转速测量相比&#xff0c;该电路无需要注重复杂的软件设计&#xff0c;功耗小&#xff0c;稳定性高&#xff0c;实现了更好的底层封装…

如何组织我的 Python 代码

编写代码更像是一门艺术&#xff0c;而不是一门科学。编写精炼、合乎逻辑且强大的工程解决方案对于解决问题非常重要。然而&#xff0c;似乎存在一个重大挑战&#xff1a;让这些解决方案全面且易读。 本文的重点是如何最好地组织 Python 类&#xff0c;使其既可读又整洁。Pyth…

pdf文件太大如何变小,苹果电脑压缩pdf文件大小工具软件

压缩PDF文件是我们在日常办公和学习中经常会遇到的需求。PDF文件由于其跨平台、保持格式不变的特点&#xff0c;被广泛应用于各种场合。然而&#xff0c;有时候我们收到的PDF文件可能过大&#xff0c;不便于传输和存储&#xff0c;这时候就需要对PDF文件进行压缩。下面&#xf…

针对硅基氮化镓高电子迁移率晶体管(GaN-HEMT)的准物理等效电路模型,包含基板中射频漏电流的温度依赖性

来源&#xff1a;Quasi-Physical Equivalent Circuit Model of RF Leakage Current in Substrate Including Temperature Dependence for GaN-HEMT on Si&#xff08;TMTT 23年&#xff09; 摘要 该文章提出了一种针对硅基氮化镓高电子迁移率晶体管&#xff08;GaN-HEMT&…