当前位置： 首页 > news >正文

【html】用html写一个博物馆首页

news 2026/5/18 4:29:32

效果图：

二级导航：

源码：


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="./css/000.css" /><!-- 初始化样式 --><title>博物馆</title><style>*{transition: all 0.5s;}header {
background-color: rgb(157, 58, 32);}body{background-color: #6778811;}#nav {display: flex;/*横向排布*/justify-content: space-between;list-style-type: none;}#nav li {flex: 1;box-sizing: border-box;height: 60px;line-height: 60px;position: relative;/* border: 2px solid #000; *//* width: 320px; */text-align: center;position: relative;}#nav li:hover {transition: all 0.35s;background-color: rgb(177, 58, 32);}#nav li a {text-decoration: none;color: #fff;}.wrap {width: 1280px;margin: 0 auto;}#nav li .seclist {width: 100%;position: absolute;top: 60px;left: 0;background-color: brown;opacity: 0;overflow: hidden;/* 其他样式保持不变 */transition: opacity  1s;/* 添加过渡效果 */}#nav li:hover .seclist {/* display: block; *//* 				animation: navlist 1s; */opacity: 1;}#nav li .seclist :hover {background-color: aqua;}#nav li .seclist :hover a {color: orange;}.banner {height: 100%;}@keyframes navlist {from {display: none;}to {display: block;}}#main .wrap img {height: 100%;width: auto;}.left,.banner {margin: 50px auto;float: left;}#main .left {width: 200px;height: 100%;background-color: antiquewhite;}#main .wrap {height: 700px;}</style></head><body><header><div class="wrap"><ul id="nav"><li><a href="./index.html">首页</a></li><li><a href="./index.html">博物馆历史<ul class="seclist"><li><a href="./index.html">明清时期</a></li><li><a href="./index.html">民国时期</a></li></ul></a></li><li><a href="./index.html">展览品概览<ul class="seclist"><li><a href="./index.html">青铜器</a></li><li><a href="./index.html">农具</a></li></ul></a></li><li><a href="./index.html">线上订票<ul class="seclist"><li><a href="./index.html">A区</a></li><li><a href="./index.html">B区</a></li></ul></a></li></ul></div></header><div id="main"><div class="wrap"><div class="left"></div><div class="banner"><img src="https://fd.co188.com/group2/M01/3B/A8/rBJhbGXwYDWAUUqDAAHZTr0PwYY72.jpeg" alt="" /></div></div></div></body>
</html>

相关文章：

【html】用html写一个博物馆首页

效果图&#xff1a; 二级导航&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><l…...

编程日记 2024/6/23 21:12:27

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【13】压力压测JMeter-性能监控jvisualvm

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【13】压力压测JMeter-性能监控jvisualvm 压力测试概述性能指标 JMeter基本使用添加线程组添加 HTTP 请求添加监听器启动压测&查看分析结果JMeter Address Already in use 错误解决 性…...

编程日记 2024/6/23 21:11:25

【python】python海底捞门店营业数据分析与可视化（数据集+源码+论文）【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…...

编程日记 2024/6/23 21:10:24

利用机器学习弄懂机器学习！

第一个问题&#xff1a;什么是机器学习&#xff1f; 机器学习是人工智能的一个子领域&#xff0c;它使计算机系统能够从经验中学习并改进其性能&#xff08;和人一样&#xff0c;人也是从经验当中&#xff0c;实现自己的不断地学习和提升&#xff09;。简单来说&#xff0c;机…...

编程日记 2024/6/23 21:09:23

Ubuntu22.04系统安装及配置

文章目录 一、选择“安装” 二、选择“语言” 三、安装器更新 四、键盘布局 五、选择安装类型 六、网络配置 七、代理设置 八、镜像地址 九、磁盘划分 十、设置用户名、主机名、登录密码 十一、升级到Ubuntu Pro 十二、SSH设置 十三、选装软件包 十四、开始安装进…...

编程日记 2024/6/23 21:05:19

抖音多功能全自动引流工具，支持评论关注私信留痕点赞等，让你的抖音粉丝暴涨！

随着短视频行业的火爆&#xff0c;越来越多的人开始关注抖音这个平台。然而&#xff0c;如何在抖音上获得更多的关注和粉丝&#xff0c;成为了许多人面临的难题。为了帮助大家解决这个问题&#xff0c;今天我们将为大家推荐一款抖音多功能全自动引流脚本&#xff0c;这款脚本可…...

编程日记 2024/6/23 21:03:17

day3-xss漏洞（米斯特web渗透测试）

day3-xss漏洞&#xff08;米斯特web渗透测试&#xff09; XSSXss种类三种反射型1.反射型xss2.存储型xss3.DOM型xss XSS Xss有一部分是前端的有一部分不是前端的&#xff0c;我们来看一下&#xff0c;昨天的HTML注入修复方法应灵活使用。 HTML注入是注入一段HTML&#xff0c;那…...

编程日记 2024/6/23 21:02:16

HTML中的＜iframe＞标签及其属性

<iframe>标签在HTML中用于嵌入另一个HTML页面。它提供了一种在当前页面内展示外部内容的方式&#xff0c;而无需离开当前页面。以下是<iframe>的一些常用属性&#xff1a; src&#xff1a;指定要嵌入的页面的URL。width 和 height&#xff1a;设置iframe的尺寸。n…...

编程日记 2024/6/23 20:58:12

Elastisearch集群（单节点）

目录 一、文件下载 二、创建linux es用户 三、上传、解压canal、es、kibana 四、配置es通讯证书&#xff08;生成证书给es配置使用&#xff09; 五、配置elastisearch 六、修改系统配置 七、添加ik分词器支持&#xff08;可选&#xff09; 八、给文件赋值权限 九、设置…...

编程日记 2024/6/23 20:57:11

Vue78-缓存路由组件

一、需求 路由切走的时候&#xff0c;组件会被销毁&#xff0c;路由切回来&#xff0c;组件被挂载&#xff01; 需要&#xff1a;路由切走的时候&#xff0c;组件不会被销毁。 二、代码实现 若是不加include属性&#xff0c;则在<router-view>里面展示的路由&#xff0c…...

编程日记 2024/6/23 20:54:09

windows设置开机启动项

将文件放到下面路径即可实现每次开机启动 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup...

编程日记 2024/6/23 20:53:07

【Linux】 yum学习

yum介绍 在Linux系统中&#xff0c;yum&#xff08;Yellowdog Updater, Modified&#xff09;是一个用于管理软件包的命令行工具&#xff0c;特别适用于基于RPM&#xff08;Red Hat Package Manager&#xff09;的系统&#xff0c;如CentOS、Fedora和Red Hat Enterprise Linux…...

编程日记 2024/6/23 20:52:06

Mac数据如何恢复？3 款最佳 Mac 恢复软件

如果您认为 Mac 上已删除的文件永远丢失了&#xff0c;那您就大错特错了&#xff01;实际上&#xff0c;即使您清空了 Mac 上的垃圾箱&#xff0c;也有许多解决方案可以帮助您恢复已删除的文件。最好的解决方案之一是 Mac 恢复删除软件。最好的Mac 恢复删除应用程序可以轻松准确…...

编程日记 2024/6/23 20:51:05

基于SpringBoot+Vue航空票务管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…...

编程日记 2024/6/23 20:50:04

Gnu/Linux 之 C 语言函数列表初步整理

Linux为C语言编程提供了丰富的函数库&#xff0c;这些函数库覆盖了从基本输入输出、文件操作、字符串处理到系统调用等各个方面。以下是一些常见的Linux C函数示例&#xff1a; 输入输出函数 printf(): 输出格式化的字符串到标准输出。scanf(): 从标准输入读取格式化的数据。…...

编程日记 2024/6/23 20:48:01

Java学习 （二）关键字、标识符、数组

一、关键字 我们第一章案例中有很多关键字&#xff0c;比如class、public、static、void等&#xff0c;这些关键字依旧被java定义好了&#xff0c;可以拿来用&#xff0c;不需要死记硬背&#xff0c;按照官方文档查询即可 #官方文档 https://docs.oracle.com/javase/tutorial/j…...

编程日记 2024/6/23 20:44:57

数据结构与算法笔记：基础篇 - 初始动态规划：如何巧妙解决“双十一”购物时的凑单问题？

概述 淘宝的 “双十一” 购物节有各种促销活动&#xff0c;比如 “满 200 元减 50元”。假设你女朋友购物车中有 n 个&#xff08;n > 100&#xff09;想买的商品&#xff0c;它希望从里面选几个&#xff0c;在凑够满减条件的前提下&#xff0c;让选出来的商品价格总和最长…...

编程日记 2024/6/23 20:43:56

使用 select 进行 UART 通信的注意事项

文章目录 引言UART 通信中的 select 函数select 函数的工作原理使用 select 进行 UART 通信的注意事项示例代码 引言 UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09;是一种用于异步串行通信的硬件协议&#xff0c;常用于计算机和外设之间的数据交换…...

编程日记 2024/6/23 20:42:54

干货 | 2024低空经济产业发展白皮书（免费下载）

【1】关注本公众号&#xff0c;转发当前文章到微信朋友圈 【2】私信发送 2024低空经济产业发展白皮书 【3】获取本方案PDF下载链接&#xff0c;直接下载即可。 如需下载本方案PPT/WORD原格式&#xff0c;诚挚邀请您微信扫描以下二维码加入方案驿站知识星球&#xff0c;获取上…...

编程日记 2024/6/23 20:41:53

打开nginx连接的php页面报错502

目录 问题描述&#xff1a; 原因&#xff1a; 1. 使用 Unix 域套接字&#xff08;Unix Socket&#xff09; 区别和优势&#xff1a; 2. 使用 TCP/IP 套接字 区别和优势&#xff1a; 如何选择 扩展&#xff1a;Rocky_Linux9.4安装PHP的步骤&#xff1a; 使用Remi存储库…...

编程日记 2024/6/23 20:40:50

别再依赖SDK了！手把手教你用OpenCV和Eigen从零实现RGB-D相机对齐（附完整C++代码）

从零实现RGB-D相机对齐&#xff1a;OpenCV与Eigen实战指南 在计算机视觉领域&#xff0c;RGB-D相机的深度与彩色图像对齐&#xff08;D2C&#xff09;是一个基础但至关重要的技术环节。虽然市面上大多数商用RGB-D相机都提供了现成的SDK和API来实现这一功能&#xff0c;但对于真…...

编程新知 2026/5/17 10:59:36

对比直接使用厂商 API 体验 Taotoken 在路由容灾上的价值

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比直接使用厂商 API 体验 Taotoken 在路由容灾上的价值 在开发依赖大模型能力的应用时&#xff0c;服务的连续性与稳定性是保障用…...

编程新知 2026/5/17 10:20:20

从日志到环境变量：根治 Android Studio AVD 启动报错“The emulator process has terminated”

1. 从错误弹窗到日志分析&#xff1a;定位问题的第一步 当你兴冲冲地打开Android Studio准备启动AVD&#xff08;Android Virtual Device&#xff09;时&#xff0c;突然弹出一个冰冷的提示框&#xff1a;"The emulator process has terminated"&#xff0c;这感觉就…...

编程新知 2026/5/17 10:01:30

Applite：告别命令行！macOS软件管理的图形化终极解决方案

Applite&#xff1a;告别命令行&#xff01;macOS软件管理的图形化终极解决方案 【免费下载链接】Applite User-friendly GUI macOS application for Homebrew Casks 项目地址: https://gitcode.com/gh_mirrors/ap/Applite 还在为Homebrew复杂的命令行操作而头疼吗&…...

编程新知 2026/5/17 9:29:04

迪拜塔幕墙设计

迪拜塔幕墙设计 【作 者】：罗永增 【关键词】：迪拜塔，幕墙，设计，系统。 前言：...

编程新知 2026/5/17 9:06:18

从0到1：手把手教你搭建VSCode（附避坑指南，拒绝报错），全程复制粘贴即可

&#x1f525;个人主页&#xff1a;北极的代码&#xff08;欢迎来访&#xff09; &#x1f3ac;作者简介&#xff1a;java后端学习者 ❄️个人专栏&#xff1a;苍穹外卖日记&#xff0c;SSM框架深入&#xff0c;JavaWeb ✨命运的结局尽可永在&#xff0c;不屈的挑战却不可须臾或…...

编程新知 2026/5/17 8:08:55

多模态AI实战：基于OpenGVLab/Ask-Anything构建视觉问答系统

1. 项目概述&#xff1a;当视觉大模型学会“看图说话”最近在折腾多模态AI应用&#xff0c;发现了一个挺有意思的开源项目&#xff0c;叫OpenGVLab/Ask-Anything。简单来说&#xff0c;它就像一个给AI装上了“眼睛”和“嘴巴”的系统&#xff0c;你给它一张图片或一段视频&…...

编程新知 2026/5/17 8:08:55

使用mcp-maker快速构建AI工具集成服务器：从MCP协议到实践

1. 项目概述&#xff1a;一个为AI应用注入“超能力”的MCP服务器工厂 如果你最近在折腾AI应用开发&#xff0c;特别是想给ChatGPT、Claude这类大模型配上“手和脚”&#xff0c;让它们能操作你的本地文件、查询数据库&#xff0c;甚至控制你的智能家居&#xff0c;那你大概率已…...

编程新知 2026/5/17 7:29:48

Iris API错误处理机制与嵌入式系统优化实践

1. Iris API错误处理机制解析在嵌入式系统开发中&#xff0c;API的健壮性直接影响整个系统的稳定性。Iris框架作为ARM架构下的核心组件&#xff0c;其错误处理机制基于JSON-RPC 2.0规范进行了深度定制&#xff0c;特别适合资源受限的嵌入式环境。与通用Web API不同&#xff0c;…...

编程新知 2026/5/17 7:01:40

基于 Next.js 的无头电商架构实战：从 Vercel Commerce 看现代全栈开发

1. 项目概述&#xff1a;一个面向未来的全栈电商起点如果你最近在琢磨着用 Next.js 搞一个电商网站&#xff0c;或者想找一个现代、开箱即用的全栈电商模板来启动项目&#xff0c;那你大概率已经听说过vercel/commerce这个仓库了。它不是某个具体的电商平台&#xff0c;而是一个…...

编程新知 2026/5/17 6:59:25