HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)_旅游网站界面web代码(1)

于 2024-04-28 15:37:51 发布
阅读量883 收藏 3
点赞数 4
分类专栏： 程序员 文章标签： 前端 html 旅游
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_82243626/article/details/138280536
版权

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

五、网站代码制作部分 📕

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

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

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

HTML结构代码🧱


<html>
<head>
<meta charset="UTF-8">
<title>旅游中国</title>
<link href="css/style.css" rel="stylesheet" media="all" type="text/css">
<script src="js/lunbo.js" type="text/javascript"></script>
</head>
<body>
<div class="head"><img src="images/logo.png" width="240"></div>
<div class="nav">
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="liuyan.html">留言</a></li>
    <li><a href="gentuanyou.html">跟团游</a></li>
    <li><a href="zixun.html">新闻资讯</a></li>
    <li><a href="fengguang.html">图片风光</a></li>
    <li><a href="shipin.html">精彩视频</a></li>
    <li><a href=
最低0.47元/天 解锁文章
2301_82243626
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)
QQ_____365392777的博客
08-20 1万+
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页.
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
web静态网站，css+html旅游景点网站，web假期作业
07-11
可以访问这篇文章有完整的介绍： https://blog.csdn.net/lucky_fang/article/details/125721787 首页、历史文化、景区概况、推荐游玩、美食一览、文化活动、地理位置、联系我们 首页含背景音乐循环播放，自动播放（首先浏览器兼容自动播放）： 历史文化： 景区概况： 推荐游玩： 美食一览： 文化活动： 地理位置：联系我们：
基于HTML旅游网站项目的设计与实现——千岛湖旅游景点网站模板(6个页面)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
一个简单的WEB网页制作作业——黑色的山河旅行社网站(5个页面)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 摄影、 文化、 家 乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部 区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等 元素的插入。 【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog
网页设计之JavaScript
qq_53677566的博客
10-05 7215
文章目录JavaScript笔记一.JavaScript概述1.JavaScript历史2.javaScript与java的区别3.javaScript的作用4.JavaScript与html,css关系二.基本语法1.位置2.变量3.控制语句三.函数，内置对象与事件1.函数基本语法：全局函数：2.内置对象（1）String字符串（2）Aarry数组（3）Date对象（4）Math对象3.事件四.Event对象五.HTML Dom对象1.获得标签的四种方式2.HTML DOM - 改变 HTML内容3.HT
地方旅游主题网页html+css+js 共12页
05-22
旅游主题 技术：html+css+js 页面数量：12页 资源来源：www.xhuocode.cn 代码日期新鲜、质量好、可修改为万能主题、相当推荐。
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业...
qq_365392777
08-09 1938
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等...
基于Html+CSS+Javascript的旅游网站.rar
02-02
主要是介绍旅游网站的各个景点，具体地区是广州的各个景点，用户可以通过网站查询各个景点的相关信息，找到自己需要的消息。
Web前端开发技术课程大作业——南京旅游景点介绍网页代码html+css+javascript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
基于HTML旅游酒店主题网页项目的设计与实现——度假酒店预订网站(5页面)HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
期末前端web大作业——HTML+CSS+JavaScript仿京东购物商城网页制作(7md
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
大二学生HTML期末大作业——HTML+CSS+JavaScript食品网上超市购物商城网页与制作
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） 【查看更多源码...
web前端期末大作业网页设计与制作 ——汉口我的家乡旅游景点 5页HTML+CSS+JavaScript
08-10
HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频...
67. Web前端网页制作 湖南凤凰古城旅游网页设计实例 大学生期末大作业 html+css+js
最新发布
A240307的博客
04-07 998
旅游主题响应式网站实例，应用html+css+js，包括DIV、图片轮翻效果、视频、会员登录、会员注册表单等，供大家参考。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
html旅游网站设计与实现——绿色古典旅游景区 HTML+CSS+JavaScript代码
05-29
很高兴回答您的问题。这里给出一个简单的HTML+CSS+JavaScript代码示例，用于设计和实现一个绿色古典旅游景区的网站。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>绿色古典旅游景区</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>绿色古典旅游景区</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">景点介绍</a></li> <li><a href="#">预定门票</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>欢迎来到绿色古典旅游景区</h2> <p>这里是一座绿色、古典的旅游景区，拥有众多自然景观和历史文化遗址。我们提供最佳的旅游体验，让您留下美好的回忆。</p> <button>了解更多</button> </section> <section> <h2>景点介绍</h2> <ul> <li> <img src="scenery1.jpg" alt="景点1"> <h3>景点1</h3> <p>景点1的介绍。</p> </li> <li> <img src="scenery2.jpg" alt="景点2"> <h3>景点2</h3> <p>景点2的介绍。</p> </li> <li> <img src="scenery3.jpg" alt="景点3"> <h3>景点3</h3> <p>景点3的介绍。</p> </li> </ul> </section> <section> <h2>预定门票</h2> <form> <label>姓名：<input type="text" name="name"></label> <label>电话：<input type="text" name="phone"></label> <label>邮箱：<input type="email" name="email"></label> <label>门票数量：<input type="number" name="quantity"></label> <button type="submit">提交</button> </form> </section> </main> <footer> <p>版权所有 © 绿色古典旅游景区</p> </footer> <script type="text/javascript" src="script.js"></script> </body> </html> ``` CSS代码： ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #003300; color: #fff; padding: 20px; } header h1 { margin: 0; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { margin: 20px; } section { margin-bottom: 30px; } section h2 { margin-top: 0; } section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } section li { flex-basis: calc(33.33% - 20px); margin-right: 20px; margin-bottom: 20px; } section li:last-child { margin-right: 0; } section li img { width: 100%; height: auto; } form label { display: block; margin-bottom: 10px; } form input { padding: 5px; margin-bottom: 10px; border-radius: 5px; border: none; } form button { background-color: #003300; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; } form button:hover { background-color: #009900; } footer { background-color: #ccc; color: #333; text-align: center; padding: 10px; } ``` JavaScript代码： ```javascript window.onload = function() { var button = document.querySelector('button'); button.addEventListener('click', function() { alert('感谢您的关注！'); }); }; ``` 这些代码可以帮助您创建一个简单的绿色古典旅游景区网站。当然，具体实现还需要根据您的需求和技能水平进行调整。希望这些信息对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值