基于Html+Css+javascript的网页制作（旅游主题）

最新推荐文章于 2024-05-24 13:19:41 发布
最新推荐文章于 2024-05-24 13:19:41 发布
阅读量1.8k 收藏 24
点赞数 3
分类专栏： web设计网页规划与设计 文章标签： 前端 css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65484028/article/details/127856267
版权

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

  1. HTML：结构

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

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

文章目录

前端学习路线

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

网页基本结构

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

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

网页演示

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

HTML结构代码



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/all.css" rel="stylesheet"  media="all" type="text/css" />
<title>香格里拉</title>
</head>
<body>
<div class="menu">
  <div class="main">
    <ul class="center">
      <li><a href="index.html">香格里拉简介</a></li>
      <li><a href="jieshao.html">地理环境</a></li>
      <li><a href="chihewanle.html">少数民族</a></li>
      <li><a href="tupian.html">主要景点</a></li>
      <li><a href="denglu.html">联系我们</a></li>
	  
    </ul>
  </div>
</div>
最低0.47元/天 解锁文章
二挡起步
关注
  • 3
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现8个页面
VX_WJ88950106的博客
04-18 1150
👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】 文章目录🌰一、网站题目👨‍🎓二、网站
HTML设计个人博客页面
Python领域优质萌新创作者
03-23 3558
页面主体包括一个名为“container”的元素，其中包含博客的标题、简介、最新文章、研究方向和联系方式。我们使用 - 标签定义标题，并使用标签定义段落文本。我们还使用和标签定义无序列表，以显示最新文章和研究方向。最后，我们使用标签定义链接，让读者可以在不离开页面的情况。然后，我们导入了Google字体“Lato”，并定义了一些基本的样式，包括背景色、字体、字号、行高和颜色。/* 背景样式 *//* 标题样式 *//* 链接样式 */
HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计 html网页规划与设计
最新发布
网页设计与制作
05-24 441
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
【HTML5期末大作业】制作一个简单HTML我的班级网页（HTML+CSS+JS）
HTML网页设计
08-05 6271
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站......
web期末大作业网页设计-个人介绍-纯html+css
@MIKE小助手
06-18 4833
web期末大作业网页设计-个人介绍-纯html+css
html制作好看的个人简历(附源码)
xcLeigh
03-29 3万+
html制作好看的个人简历(附源码)，代码简单，通俗易懂，html实现好看的个人简历，界面酷炫，简洁明了，附件源码，下载后直接使用，可以用文本、工具（vscode，Hbuilder，dw）打开编辑自己的相关信息，也可在此框架下，扩展更多其他效果。
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
网页制作基础大三dw作业 基于HTML+CSS+JavaScript新能源汽车租赁(6).md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
学生个人html静态网页制作 基于HTML+CSS+JavaScript+jquery仿苏宁易购官网商城模板
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
制作一个简单HTML旅游网站（HTML+CSS+JS）无锡旅游网页设计与实现面.md
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
html&css;源代码作品
07-16
两个网站的纯html&css;&flash;&js;源代码，下载解压后直接用浏览器打开即可。
html+css网页设计源码(简洁)
12-25
html+css网页设计源码(简洁)，前端基础代码，拿来就用 评分: ⭐⭐⭐⭐⭐
中秋佳节的网页设计
10-05
中秋佳节的网页设计，教你如何设计网页.让你从容设计网页。
中秋节模板HTML
12-08
中秋节模板HTML
用DIV+CSS技术设计的明星个人网站制作(基于HTML+CSS+JavaScript制作明星彭于晏网页)
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞 蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)
QQ_____365392777的博客
08-20 1万+
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面：计划采用最新的网页.
web前端期末大作业 html+css+javascript化妆品网页设计实例 企业网站制作
wx___BJ050106的博客
01-03 470
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设...
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业...
qq_365392777
08-09 2013
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等...
基于HTML+CSS+JavaScript制作网页设计案例25违停查询
06-09
以下是一个基于HTML+CSS+JavaScript制作的网页设计案例25违停查询： 1. HTML代码 在HTML代码中，我们使用了一个简单的表单，让用户能够输入车牌号和查询日期进行查询。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>违停查询</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>违停查询</h1> <form> <label for="plateNum">车牌号：</label> <input type="text" id="plateNum" name="plateNum" required> <label for="queryDate">查询日期：</label> <input type="date" id="queryDate" name="queryDate" required> <button type="submit" id="queryBtn">查询</button> </form> </div> <script src="script.js"></script> </body> </html> ``` 2. CSS代码 在CSS代码中，我们设置了页面的样式，包括背景颜色、字体样式、输入框和按钮的样式等等。 ```css body { background-color: #f2f2f2; font-family: Arial, sans-serif; } .container { margin: 50px auto; width: 500px; background-color: #fff; padding: 30px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } h1 { text-align: center; margin-bottom: 30px; } form { display: flex; flex-direction: column; } label { margin-bottom: 10px; } input[type="text"], input[type="date"] { padding: 10px; margin-bottom: 20px; border-radius: 5px; border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } button { background-color: #0099ff; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } button:hover { background-color: #0077cc; } ``` 3. JavaScript代码 在JavaScript代码中，我们使用了AJAX技术，向服务器发送查询请求，并且在页面上显示查询结果。 ```javascript const form = document.querySelector('form'); const queryBtn = document.querySelector('#queryBtn'); queryBtn.addEventListener('click', function(event) { event.preventDefault(); const plateNum = document.querySelector('#plateNum').value; const queryDate = document.querySelector('#queryDate').value; const xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { const response = JSON.parse(xhr.responseText); showResults(response); } } const url = `https://example.com/api/query?plateNum=${plateNum}&queryDate=${queryDate}`; xhr.open('GET', url, true); xhr.send(); }); function showResults(response) { const table = document.createElement('table'); const thead = document.createElement('thead'); const tbody = document.createElement('tbody'); const headRow = document.createElement('tr'); const dateHead = document.createElement('th'); const timeHead = document.createElement('th'); const locationHead = document.createElement('th'); const violationHead = document.createElement('th'); const fineHead = document.createElement('th'); dateHead.textContent = '日期'; timeHead.textContent = '时间'; locationHead.textContent = '地点'; violationHead.textContent = '违停条例'; fineHead.textContent = '罚款金额'; headRow.appendChild(dateHead); headRow.appendChild(timeHead); headRow.appendChild(locationHead); headRow.appendChild(violationHead); headRow.appendChild(fineHead); thead.appendChild(headRow); response.forEach(record => { const row = document.createElement('tr'); const dateCell = document.createElement('td'); const timeCell = document.createElement('td'); const locationCell = document.createElement('td'); const violationCell = document.createElement('td'); const fineCell = document.createElement('td'); dateCell.textContent = record.date; timeCell.textContent = record.time; locationCell.textContent = record.location; violationCell.textContent = record.violation; fineCell.textContent = record.fine; row.appendChild(dateCell); row.appendChild(timeCell); row.appendChild(locationCell); row.appendChild(violationCell); row.appendChild(fineCell); tbody.appendChild(row); }); table.appendChild(thead); table.appendChild(tbody); const container = document.querySelector('.container'); container.appendChild(table); } ``` 总之，这个网页设计案例着重强调了简单明了和易于使用。用户可以轻松地输入车牌号和查询日期，然后点击“查询”按钮，查询结果也是易于阅读和理解的。同时，网页还使用了AJAX技术，让用户能够在不刷新页面的情况下获得查询结果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值