HTML静态网页成品作业(HTML+CSS)——故宫介绍网页(4个页面)

news2024/10/6 8:34:24

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

文章目录

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


一、作品介绍

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

二、作品演示

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

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>北京故宫</title>
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	
	<main>
		<div class="logo">
			<img src="./images/logo.png" alt="">
		</div>
		<ul class="nav">
			<li><a href="index.html">首页</a></li>
			<li><a href="ggjj.html">故宫简介</a></li>
			<li><a href="gngd.html">馆内宫殿</a></li>
			<li><a href="gcww.html">馆藏文物</a></li>
		</ul>
		<div class="tu">
			<img src="./images/tu.jpeg" alt="">
		</div>
	</main>
</body>
</html>

五、源码获取

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

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

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

相关文章

【教学类-36-09】20240622钓鱼(通义万相)-A4各种大小的鱼

背景需求&#xff1a; 用通义万相获得大量的简笔画鱼的图片&#xff0c;制作成不同大小&#xff0c;幼儿用吸铁石钓鱼的纸片&#xff08;回形针&#xff09;&#xff0c;涂色、排序等 补一张通义万相的鱼图 素材准备 &#xff08;一&#xff09;优质的鱼图片 &#xff08;二&a…

(2024)豆瓣电影TOP250爬虫详细讲解和代码

&#xff08;2024&#xff09;豆瓣电影TOP250爬虫详细讲解和代码 爬虫目的 获取 https://movie.douban.com/top250 电影列表的所有电影的属性。并存储起来。说起来很简单就两步。 第一步爬取数据第二步存储 爬虫思路 总体流程图 由于是分页的&#xff0c;要先观察分页的规…

VS Code安装及环境配置(超详细)

VS Code简介 Visual Studio Code&#xff08;简称 VS Code &#xff09;是 Microsoft 于2015年4月发布的一款代码编辑器&#xff0c;以界面简洁、轻量著称。 它是一款免费开源的现代化轻量级代码编辑器&#xff0c;支持几乎所有主流开发语言的语法高亮、智能代码补全、自定义…

投票多功能小程序(ThinkPHP+Uniapp+FastAdmin)

&#x1f389;你的决策小助手&#xff01; 支持图文投票、自定义选手报名内容、自定义主题色、礼物功能(高级授权)、弹幕功能(高级授权)、会员发布、支持数据库私有化部署&#xff0c;Uniapp提供全部无加密源码。​ 一、引言&#xff1a;为什么我们需要多功能投票小程序&#…

1. ELK日志分析

ELK日志分析 一、ELK作用、组件1、作用2、核心组件2.1 beat软件2.1 Logstash2.2 Elasticsearch2.3 Kibana 二、ELK部署、测试1、环境规划2、确保SELinux关闭、时间同步3、所有主机添加主机名解析4、三台ES主机安装jdk 1.155、调整系统资源限制6、部署es集群6.1 创建普通用户elk…

HMI 的 UI 风格,超凡脱俗

HMI 的 UI 风格&#xff0c;超凡脱俗

“Driver not loaded“问题解决方案

这两天又碰到了离谱的&#xff0c;愚蠢的&#xff0c;莫名其妙的&#xff0c;丧尽天良的错误。 之前已经解决过这个问题。这几天又碰上了&#xff0c;明明都已经把相应的dll放到了exe的同级目录&#xff0c;NND还是有问题&#xff01;&#xff01;&#xff01;卡了我一个晚上加…

【服务器】之【如何不开外网连接GitHub】

登录GitHub官网 GitHub: Let’s build from here GitHub 注册账号 登录账号 输入一个自定义名字&#xff0c;点击创建存储库就可以了 首先 如何在不开外网的条件下使用GitHub 第一步 下载安装Steam(Watt TooklKit) 区分一下如何查看哪个官网&#xff08;没有百度广告就是…

Android面试题(四大组件篇)

Q&#xff1a;说下Activity的四种启动模式&#xff1f;&#xff08;有时会出个实际问题来分析返回栈中Activity的情况&#xff09;https://blog.csdn.net/augfun/article/details/54897871 Q&#xff1a;谈谈singleTop和singleTask的区别以及应用场景 栈顶复用&#xff1a;解…

【网络安全常用术语解读 :什么是0day、1day、nday漏洞】

脆弱性攻击的时间窗被称作脆弱性窗口。通常情况下&#xff0c;一个安全漏洞的时间越久&#xff0c;攻击者就会有更多的机会去攻击它。 2. 0day 漏洞 0天漏洞&#xff0c;也被称作"零日漏洞"&#xff0c;是指尚未由供应商公布的缺陷&#xff0c;表示攻击者已知晓该缺…

22.智能指针(下)

标题 五、引用计数智能指针5.1 共享引用计数智能指针共享数据5.2 使用Box定义三个共享链表5.3 使用Rc代替Box5.4 引用计数增加实验 六、RefCell和内部可变性模式6.1 通过RefCell在运行时检查借用规则6.2 内部可变性&#xff1a;不可变值的可变借用1&#xff09;内部可变性的用例…

Vue40 修改默认配置

修改默认配置 在官网查看各个属性的作用 ### 在vue.config.js文件中&#xff0c;修改属性的值

【数据结构与算法】图的存储(邻接矩阵,邻接表)详解

图的邻接矩阵数据结构 typedef enum { NDG, DG, NDN, DN } GraphKind;using VRType int; using InfoType int;typedef struct ArcCell {VRType adj;InfoType *info; } Arc[N][N];struct MGraph {ElemType vexs[N];Arc arc;int vexnum, arcnum;GraphKind kind; };ArcCell 结构…

Pip换源秘籍:让你的Python包飞行起来!

在Python的包管理中&#xff0c;Pip是最重要的工具之一。它允许开发者从Python Package Index (PyPI)安装包&#xff0c;但有时由于网络问题或服务器负载过高&#xff0c;直接从PyPI安装包可能会非常慢。这时&#xff0c;更换Pip源到一个更快的镜像站点是一个常见的解决方案。本…

Vue-双向数据绑定指令

v-model指令 双向数据绑定就是当数据设置给表单元素时&#xff0c;修改这个数据会修改表单元素的值&#xff0c; 修改表单元素的值同样也会修改这个数据 <body><div id"app"><input type"text" v-model"name"><p>{{name…

BookSim2 安装步骤教程 Network-on-Chips (NoCs) 片上网络模拟器 含视频

BookSim简介 BookSim2 一个用于Network-on-Chips (NoCs) 芯片上网络的周期精确模拟器。该模拟器的设计是为了实现网络组件的模拟灵活性和精确建模。 BookSim1 是一个通用的网络模拟器&#xff0c;并不专门针对片上环境。不支持在片上网络环境中提出的一些更先进的功能和拓扑…

如何实现外部编码器轴和虚轴电子齿轮比例随动(汇川AM400PLC)

1、如何添加虚轴可以参考下面文章链接: 如何添加虚轴(AM400PLC)-CSDN博客文章浏览阅读2次。EtherCAT运动控制总线启用的时候,选择EtherCAT总线任务周期。选择好后,选择点击添加。https://blog.csdn.net/m0_46143730/article/details/139898985?csdn_share_tail=%7B%22type…

《PyTorch计算机视觉实战》:一、二章

目录 第一章&#xff1a;人工神经网络基础 比较人工智能和传统机器学习 人工神经网络&#xff08;Artificial Neural Network&#xff0c;ANN&#xff09; 是一种受人类大脑运作方式启发而构建的监督学习算法。神经网络与人类大脑中神经元连接和激活的方式比较类似&#xff0…

django学习入门系列之第三点《CSS基础样式介绍3》

文章目录 浮动什么是浮动浮动的特性清除浮动 往期回顾 浮动 什么是浮动 float属性用于创建浮动框&#xff0c;将其移动到一边&#xff0c;直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 浮动的特性 浮动元素会脱离标准流(脱标) 浮动的元素会一行内显示并且元素顶部对…

PostMan动态设置全局变量

1. 前言 在开发过程中调试接口&#xff0c;一般都会使用PostMan。 其中有几个变量可能是好几个接口共用的&#xff0c;就会出现频繁手动复制(ctrlc)、粘贴(ctrlv)的情况。 这个过程得非常留意&#xff0c;生怕复制错了&#xff0c;或删减了某些东西&#xff0c;导致接口报错。…