HTML静态网页成品作业(HTML+CSS)——杭州西湖景点介绍网页(3个页面)

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有3个页面

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
	<head>

		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<div class="wrapper">
			<div class="header">
				<div class="w">
					<div class="logo">
						<a href="index.html">
							<img src="./images/logo.png" class="logo_img">
						</a>
					</div>
					<ul class="nav">
						<li class="active"><a href="index.html">西湖首页</a></li>
						<li><a href="jingdian.html">西湖景点</a></li>
						<li><a href="lishi.html">西湖历史</a></li>
					</ul>
				</div>
			</div>
			<div class="banner">
				<div class="w">
					<img src="./images/banner.jpg">
				</div>
			</div>
			<div class="w">
				<marquee>杭州西湖风景区欢迎您的到来!</marquee>
			</div>

			<div class="main">
				<div class="w">
					
					<h2 class="main_title">西湖简介</h2>
					<div class="main_jieshao">
						<div class="main_jieshao_text">
							<p>
								杭州西湖风景名胜区,位于浙江省杭州市西湖区龙井路1号,分为湖滨区、湖心区、北山区、南山区和钱塘区,总面积达59.04平方千米,其中湖面6.38平方千米,外围保护区面积35.64平方千米。主要景点122处,其中:特级景点26处,一级景点25处,二级景点39处,三级景点21处,四级景点11处;有国家重点文物保护单位5处,省级文物保护单位35处,市级文物保护单位25处,还有39处文物保护点和各类专题博物馆点缀其中。
							</p>
							<p>
								1985年,杭州西湖风景名胜区被选为“全国十大风景名胜”之一。 2006年,杭州西湖风景名胜区被列入中国世界文化遗产预备名单。 2007年,杭州西湖风景名胜区被评为“国家AAAAA级旅游景区”。202311-331日,西湖景区实行首道门票免费政策。
							</p>
						</div>
						<div class="main_jieshao_img">
							<img src="./images/main_jieshao.jpg">
						</div>
					</div>

					<h2 class="main_title">西湖美景</h2>
					<div class="main_meijing">
						<div class="meijing">
							<img src="./images/meijing1.jpg">
						</div>
						<div class="meijing">
							<img src="./images/meijing2.jpeg">
						</div>
						<div class="meijing">
							<img src="./images/meijing3.jpg">
						</div>
					</div>
					
					<h2 class="main_title">在线问卷</h2>
					<div class="mform">
						<input type="text" placeholder="您的姓名">
						<input type="text" placeholder="您最喜欢西湖哪处经典">
						<input type="text" placeholder="喜欢的原因是什么">
						<button>点击提交</button>
					</div>
				</div>
			</div>
			<div class="footer">
				<div>
					杭州西湖风景名胜区 版权所有
				</div>
			</div>
		</div>
	</body>
</html>


五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

聊聊ChatGPT的本质

这是鼎叔的第九十八篇原创文章。行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。 阶段性总结下我对ChatGPT的基础理解&#xff0c;算是一篇学习思考笔记吧。其中难免有很多不准确的&#xff0c;或过于简略的地方&#xff0c;将来再迭代学习。 OpenAI做ChatGPT的底层逻辑…

FFmpeg开发笔记(三十一)使用RTMP Streamer开启APP直播推流

RTMP Streamer是一个安卓手机端的开源RTMP直播推流框架&#xff0c;可用于RTMP直播和RTSP直播&#xff0c;其升级版还支持SRT直播&#xff08;腾讯视频云就采用SRT协议&#xff09;。RTMP Streamer支持的视频编码包括H264、H265、AV1等等&#xff0c;支持的音频编码包括AAC、G7…

如何从清空的回收站中恢复已删除的Excel文件?

“嗨&#xff0c;几天前我删除了很多没有备份的Excel文件。回收站已清空。当我意识到我犯了一个大错误时&#xff0c;所有的Excel文件都消失了&#xff0c;回收站里什么都没有。清空回收站后是否可以恢复已删除的 Excel 文件&#xff1f; 回收站是一种工具&#xff0c;可让您在…

爬山算法教程(个人总结版)

背景与简介 爬山算法&#xff08;Hill Climbing Algorithm&#xff09;是一种用于解决优化问题的启发式搜索方法。它是一种局部搜索算法&#xff0c;通过不断尝试从当前解出发&#xff0c;在其邻域内寻找更优的解&#xff0c;直到无法找到更优解为止。该算法得名于其类似于登山…

FullCalendar日历组件集成实战(7)

背景 有一些应用系统或应用功能&#xff0c;如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件&#xff0c;但功能比较简单&#xff0c;用来做数据展现勉强可用。但如果需要进行复杂的数据展示&#xff0c;以及互动操作如通过点击添加事件&#xff0…

java调用科大讯飞在线语音合成API --内附完整项目

科大讯飞语音开放平台基础环境搭建 1.用户注册 注册科大讯飞开放平台账号 2.注册好后先创建一个自己的应用 创建完成后进入应用可以看到我们开发需要的三个参数&#xff1a;APPID&#xff0c;APISecret&#xff0c;APIKey 3.因为平台提供的SDK中只支持了简单的中英两种语言语音…

C语言 | Leetcode C语言题解之第114题二叉树展开为链表

题目&#xff1a; 题解&#xff1a; void flatten(struct TreeNode* root) {struct TreeNode* curr root;while (curr ! NULL) {if (curr->left ! NULL) {struct TreeNode* next curr->left;struct TreeNode* predecessor next;while (predecessor->right ! NULL)…

KingbaseES数据库merge语法

数据库版本&#xff1a;KingbaseES V008R006C008B0014 简介 MERGE 语句是一种用于数据操作的 SQL 语句&#xff0c;它能够根据指定的条件将 INSERT、UPDATE 和 DELETE 操作结合到单个语句中。其主要作用是在目标表和源表之间进行数据比较和同步&#xff0c;根据条件的匹配情况来…

Jmeter插件下载(下载和使用教程)

插件管理器&#xff1a;plugins-manager下载安装和使用 下载&#xff1a; 官网地址&#xff1a;https://jmeter-plugins.org/install/Install/ 步骤1&#xff1a;将下载jmeter-plugins-manager-1.10.jar放到目录apache-jmeter-5.1.1\lib\ext&#xff0c;如下图 步骤2&#x…

安卓开发:相机水印设置

1.更新水印 DecimalFormat DF new DecimalFormat("#"); DecimalFormat DF1 new DecimalFormat("#.#");LocationManager LM (LocationManager)getSystemService(Context.LOCATION_SERVICE); LM.requestLocationUpdates(LocationManager.GPS_PROVIDER, 2…

C++的数论相关算法

数论是数学的一个分支&#xff0c;主要研究整数的性质和关系。在计算机科学中&#xff0c;数论算法对于密码学、优化问题和算法分析等方面都具有重要作用。C作为一种高效的编程语言&#xff0c;非常适合用来实现这些算法。下面我们将介绍几个C中的数论相关算法&#xff0c;包括…

如何学习计算机网络(超详细,方法论)

分享一下学习计算机网络的方法论 首先是看视频&#xff1a; 这里我推荐中科大郑烇、杨坚全套《计算机网络&#xff08;自顶向下方法 第7版》课程 课程目标_哔哩哔哩_bilibili 教材采用神书《计算机网络&#xff08;自顶向下方法&#xff09;》&#xff0c;授课风格更偏向实…

Linux基础 (十):Linux 信号的使用

目录 一、信号的基本概念 二、信号处理常见方式概览 三、修改信号的响应方式 – signal() 3.1 简单复习结束前台进程 3.2 改变SIGINT信号的响应方式 3.3 自定义方式改变进程对信号的响应 3.4 进程对信号作出两种响应 四、发送信号 – kill() 五、利用信号解决僵死进程…

全球点赞最高的人颜廷利:真正的人生目标是什么

在那个充满生机的2024年春天&#xff0c;记者有幸对中国第一起名大师的老师颜廷利教授进行了深入的访谈。带着对其人生哲学的强烈好奇&#xff0c;记者紧张而期待地提出了问题&#xff1a;“颜教授&#xff0c;您在漫长的人生旅途中最追求的是什么&#xff1f;” 宁夏银川、山东…

从容应对亿级QPS访问,Redis还缺少什么?no.29

众所周知&#xff0c;Redis 在线上实际运行时&#xff0c;面对海量数据、高并发访问&#xff0c;会遇到不少问题&#xff0c;需要进行针对性扩展及优化。本课时&#xff0c;我会结合微博在使用 Redis 中遇到的问题&#xff0c;来分析如何在生产环境下对 Redis 进行扩展改造&…

IT廉连看——UniApp——条件渲染

IT廉连看——UniApp——条件渲染 什么是条件渲染&#xff1f; 顾名思义&#xff0c;满足一定的条件他才会进行渲染。 这是我们上节事件绑定保留的代码。 一、现在我有这样一个需求&#xff1a; 增加一个按钮&#xff0c;当我点击这个按钮&#xff0c;这里的文本&#xff0…

2024年上半年系统架构设计师真题-复原程度90%

前言 此次考试监考特别严格&#xff0c;草稿纸不允许带出考场&#xff0c;并且准考证上不允许任何写画&#xff0c;甚至连笔都允许带一支&#xff0c;所以下面的相关题目都是参考一些群友的提供&#xff0c;加上自己的记忆回顾&#xff0c;得到的结果。 其中综合知识部分的题…

NASA数据集——阿尔法喷气式大气实验二氧化碳和甲烷数据

Alpha Jet Atmospheric eXperiment Carbon Dioxide and Methane Data 阿尔法喷气式大气实验二氧化碳和甲烷数据 简介 Alpha Jet Atmospheric eXperiment (AJAX) 是美国国家航空航天局艾姆斯研究中心与 H211, L.L.C. 公司的合作项目&#xff0c;旨在促进对加利福尼亚、内华达…

android_binder源码分析之_binder驱动使用服务

一&#xff0c;binder驱动源码分析&#xff0c;使用服务过程 uint32_t svcmgr_lookup(struct binder_state *bs, uint32_t target, const char *name) {uint32_t handle;unsigned iodata[512/4];struct binder_io msg, reply;bio_init(&msg, iodata, sizeof(iodata), 4);b…

Layui设置table表格中时间的显示格式

1、问题概述? 【数据库中的时间格式】 【Layui中table表格默认的显示格式】 默认的格式中会显示时间的毫秒单位,但是这个毫秒有时候是不需要的。 总结:这个时候我们就需要定义table表格中的时间显示格式。 2、解决办法? 【解决后时间的显示格式】 【解决办法1:通过字符…