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

一个简单的自适应html5导航模板

article 2026/5/13 15:23:41

一个简单的 HTML 导航模板示例，它包含基本的导航栏结构，同时使用了 CSS 进行样式美化，让导航栏看起来更美观。另外，还添加了一些 JavaScript 代码，用于在移动端实现导航菜单的展开和收起功能。

PHP

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网址导航模板</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}header {background-color: #333;color: white;text-align: center;padding: 20px;display: flex;align-items: center;justify-content: space-between;}.logo {width: 50px;height: 50px;background-color: #fff;border-radius: 50%;/* 这里可根据实际情况替换为图片 *//* background-image: url('your-logo.png');background-size: cover; */}.search-container {display: flex;background-color: white;border-radius: 4px;overflow: hidden;}.search-container input[type="text"] {padding: 10px;border: none;outline: none;}.search-container button {padding: 10px 15px;background-color: #007BFF;color: white;border: none;cursor: pointer;}main {display: flex;flex-wrap: wrap;justify-content: center;padding: 20px;}.category {background-color: white;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);margin: 10px;padding: 20px;width: 300px;}.category h2 {margin-top: 0;}.category ul {list-style-type: none;padding: 0;}.category li {margin-bottom: 10px;}.category a {color: #007BFF;text-decoration: none;transition: color 0.3s;}.category a:hover {color: #0056b3;}footer {background-color: #333;color: white;text-align: center;padding: 10px;}</style>
</head><body><header><div></div><h1>实用网址导航</h1><div><input type="text" placeholder="输入关键词搜索"><button onclick="search()">搜索</button></div></header><main><!-- 学习类网址 --><div><h2>学习资源</h2><ul><li><a href="https://www.zhihu.com/" target="_blank">知乎</a></li><li><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a></li><li><a href="https://www.coursera.org/" target="_blank">Coursera</a></li></ul></div><!-- 娱乐类网址 --><div><h2>娱乐天地</h2><ul><li><a href="https://music.163.com/" target="_blank">网易云音乐</a></li><li><a href="https://www.youku.com/" target="_blank">优酷</a></li><li><a href="https://www.douyin.com/" target="_blank">抖音</a></li></ul></div><!-- 工具类网址 --><div><h2>实用工具</h2><ul><li><a href="https://www.66zhan.com/" target="_blank">在线工具</a></li><li><a href="https://www.wqqw.net/" target="_blank">在线工具箱</a></li><li><a href="https://www.zhanf.com" target="_blank">站飞字典网</a></li><li><a href="https://tool.66zhan.com" target="_blank">便民工具网</a></li></ul></div></main><footer><p>版权所有 &copy; 2025 Your Name。保留所有权利。</p><p>备案号：粤ICP备12345678号</p></footer><script>function search() {var keyword = document.querySelector('.search-container input[type="text"]').value;if (keyword) {// 这里可以修改为你想要的聚合搜索链接，例如百度搜索window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(keyword), '_blank');}}</script>
</body></html>

============================

这是一个自适应的简单导航模板，可以根据自己需要进行修改。

RB3E)I7AR7Q3K4T[RW0`QR4.png

相关文章：

一个简单的自适应html5导航模板

一个简单的 HTML 导航模板示例&#xff0c;它包含基本的导航栏结构&#xff0c;同时使用了 CSS 进行样式美化&#xff0c;让导航栏看起来更美观。另外&#xff0c;还添加了一些 JavaScript 代码&#xff0c;用于在移动端实现导航菜单的展开和收起功能。 PHP <!DOCTYPE htm…...

编程日记 2026/5/9 10:00:16

深入解析“Wholesome”的含义及用法

深入解析“Wholesome”的含义及用法 一、引言 在阅读英文材料时&#xff0c;我们经常会遇到一些词汇&#xff0c;它们的含义既有直接的字面意思&#xff0c;又带有丰富的情感色彩。“Wholesome”就是这样一个词。它表面上看似简单&#xff0c;但在不同语境中却有多重内涵。在…...

编程日记 2026/5/9 5:00:13

供水企业满意度调查报告

民安智库作为一家独立的第三方评估机构&#xff0c;致力于为供水企业提供全面的客户满意度调查服务。本报告将详细介绍民安智库的调查方法、结果和建议&#xff0c;以帮助供水企业更好地理解其服务质量和客户需求。 一、调查方法 民安智库首先对客户进行了分类&#xff0c;包括…...

编程日记 2025/5/23 13:52:05

实现B-树

一、概述 1.历史 B树&#xff08;B-Tree&#xff09;结构是一种高效存储和查询数据的方法&#xff0c;它的历史可以追溯到1970年代早期。B树的发明人Rudolf Bayer和Edward M. McCreight分别发表了一篇论文介绍了B树。这篇论文是1972年发表于《ACM Transactions on Database S…...

编程日记 2026/5/13 11:42:46

无人机微波图像传输数据链技术详解

无人机微波图像传输数据链技术是无人机通信系统中的关键组成部分&#xff0c;它确保了无人机与地面站之间高效、可靠的图像数据传输。以下是对该技术的详细解析&#xff1a; 一、技术原理 无人机微波图像传输数据链主要基于微波通信技术实现。在数据链路中&#xff0c;图像数…...

编程日记 2026/5/8 5:18:31

【Leetcode 热题 100】300. 最长递增子序列

问题背景 给你一个整数数组 n u m s nums nums&#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c; [ 3 , 6 , 2 , 7 ] [3,6,2,7] [3,6,2…...

编程日记 2026/3/10 11:33:11

macos的图标过大，这是因为有自己的设计规范

苹果官方链接&#xff1a;App 图标 | Apple Developer Documentation 这个在官方文档里有说明&#xff0c;并且提供了sketch 和 ps 的模板。 figma还提供了模板&#xff1a; Figma...

编程日记 2026/5/12 13:14:52

信号处理以及队列

下面是一个使用C和POSIX信号处理以及队列的简单示例。这个示例展示了如何使用信号处理程序将信号放入队列中&#xff0c;并在主循环中处理这些信号。 #include <iostream> #include <csignal> #include <queue> #include <mutex> #include <thread…...

编程日记 2026/4/29 15:33:54

微信阅读网站小程序的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

编程日记 2026/5/4 7:15:52

美国公司有意收购TikTok（抖音）

众所周知&#xff0c;2016年TikTok由字节跳动集团推出&#xff0c;最初以“抖音”为名在中国市场推广&#xff0c;随后于2017年下半年出海&#xff0c;面向国际市场更名为“TikTok”。 新华社1月19日快讯&#xff1a;“TikTok公司当地时间18日晚通知美国用户&#xff0c;由于美…...

编程日记 2026/5/12 13:29:40

《Java程序设计》课程考核试卷

一、单项选择题&#xff08;本大题共10个小题&#xff0c;每小题2分&#xff0c;共20分&#xff09; 1.下列用来编译Java源文件为字节码文件的工具是&#xff08; &#xff09;。 A.java B.javadoc C.jar D.javac 2…...

编程日记 2026/4/22 19:35:04

ThinkPHP 8 操作JSON数据

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…...

编程日记 2026/5/2 13:17:07

《AI赋能光追：开启图形渲染新时代》

光线追踪技术是图形渲染领域的重大突破&#xff0c;能够通过模拟光的传播路径&#xff0c;精准渲染反射、折射、阴影和间接光照等效果&#xff0c;实现高度逼真的场景呈现。而人工智能的加入&#xff0c;更是为光线追踪技术带来了前所未有的变革&#xff0c;主要体现在以下几个…...

编程日记 2026/2/26 20:22:10

LeetCode | 最小路径和的两种解决办法

第一种&#xff1a;动态规划 思路 在过去&#xff0c;有这样一个词&#xff0c;那就是遇难则反&#xff0c;从起点推导出最小路径和是困难的&#xff0c;那我们就从终点去推导。 解题过程 我们都知道一个方块&#xff0c;只能向右或向下。在初始化dp之后&#xff0c;我们会…...

编程日记 2026/2/26 1:48:23

Windows 环境下 Docker Desktop + Kubernetes 部署项目指南

Windows 环境下 Docker Desktop Kubernetes 部署项目指南 一、环境准备二、安装与配置 Kubernetes安装 windows 版的 docker启动 kubernetes安装 windows 版的 kubectl 工具下载 k8s-for-docker-desktop启动 Kubernetes Dashboard 二、在 Kubernetes 上部署项目创建一个 demo …...

编程日记 2026/5/9 8:20:53

WebSocket 详解：全双工通信的实现与应用

目录 一、什么是 WebSocket&#xff1f;&#xff08;简介&#xff09; 二、为什么需要 WebSocket&#xff1f; 三、HTTP 与 WebSocket 的区别 WebSocket 的劣势 WebSocket 的常见应用场景 WebSocket 握手过程 WebSocket 事件处理和生命周期 一、什么是 WebSocket&#xf…...

编程日记 2026/5/1 7:14:49

神经网络|(二)sigmoid神经元函数

【1】引言 在前序学习进程中&#xff0c;我们已经了解了基本的二元分类器和神经元的构成&#xff0c;文章学习链接为&#xff1a; 神经网络|(一)加权平均法&#xff0c;感知机和神经元-CSDN博客 在此基础上&#xff0c;我们认识到神经元本身在做二元分类&#xff0c;是一种非…...

编程日记 2026/5/8 23:42:12

云原生：构建现代化应用的基石

一、什么是云原生&#xff1f; 云原生是一种构建和运行应用程序的方法&#xff0c;旨在充分利用云计算的分布式系统优势&#xff0c;例如弹性伸缩、微服务架构、容器化技术等。云原生应用程序从设计之初就考虑到了云环境的特点&#xff0c;能够更好地适应云平台的动态变化&…...

编程日记 2026/5/10 3:53:43

【浏览器 - Chrome调试模式，如何输出浏览器中的更多信息】

在开发过程中&#xff0c;如果不主动console.log&#xff0c;浏览器中的信息有些不会主动输出到 控制台console里面。这个如果是一些浏览器内部的接口调试&#xff0c;则会很麻烦。比如RTCPeerConnection过程 &#xff0c;RTCPeerConnection属于浏览器内部的方法&#xff0c;其…...

编程日记 2026/5/13 12:40:31

不同操作系统（Windows、Linux）上安装和配置Tomcat的详细教程

以下是在不同操作系统（Windows、Linux）上安装和配置Tomcat的详细教程： Windows系统下Tomcat的安装与配置 下载Tomcat 访问Apache Tomcat官方网站（https://tomcat.apache.org）。在“Download”页面，根据需求选择合适的Tomcat版本。例如，选择“Core”下的zip压缩包下载。…...

编程日记 2026/3/18 7:08:25

MapReduce，Yarn，Spark理解与执行流程

MapReduce的API理解 Mapper 如果是单词计数&#xff1a;hello&#xff1a;1&#xff0c; hello&#xff1a;1&#xff0c; world&#xff1a;1 public void map(Object key, // 首字符偏移量Text value, // 文件的一行内容Context context) // Mapper端的上下文&#xff0c;…...

编程日记 2026/4/30 22:29:51

unity导入图片素材注意点和AI寻路模块导入

当我们导入了图片资源&#xff0c;我们需要设置为Sprite类型 UI资源的位置通常是Rect Transform 要进行转化&#xff1a; (imgHP.transform as RectTransform).sizeDelta new Vector2((float)hp / maxHP * hpW,74); RectTransform 是Unity中用于UI元素的特殊变换组件&#…...

编程日记 2026/5/6 10:11:07

单片机-STM32 IIC通信（OLED屏幕）(十一)

一、屏幕的分类 1、LED屏幕&#xff1a; 由无数个发光的LED灯珠按照一定的顺序排列而成&#xff0c;当需要显示内容的时候&#xff0c;点亮相关的LED灯即可&#xff0c;市场占有率很高&#xff0c;主要是用于户外&#xff0c;广告屏幕&#xff0c;成本低。 LED屏是一种用发光…...

编程日记 2026/5/1 10:10:44

Windows Docker Desktop安装及使用 Docker 运行 MySQL

Docker Desktop是Docker的官方桌面版&#xff0c;专为Mac和Windows用户设计&#xff0c;提供了一个简单易用的界面来管理和运行Docker容器。它集成了Docker引擎&#xff0c;为开发人员提供了一个快速、可靠、可扩展的方式来构建、运行和管理应用。DockerDesktop的优势在于&…...

编程日记 2026/5/13 7:31:21

开源RAG框架Kotaemon及其混合检索系统的优势与局限

开源RAG框架Kotaemon及其混合检索系统的优势与局限 大模型&#xff08;LLMs&#xff09;的快速发展令人瞩目&#xff0c;但如何让这些模型更有效地利用外部知识&#xff0c;一直是业界关注的焦点。检索增强生成&#xff08;Retrieval-Augmented Generation&#xff0c;RAG&…...

编程日记 2026/5/5 0:05:21

Day21-【软考】短文，计算机网络开篇，OSI七层模型有哪些协议？

文章目录 OSI七层模型有哪些&#xff1f;有哪些协议簇&#xff1f;TCP/IP协议簇中的TCP协议三次握手是怎样的&#xff1f;基于UDP的DHCP协议是什么情况&#xff1f;基于UDP的DNS协议是什么情况&#xff1f; OSI七层模型有哪些&#xff1f; 题目会考广播域 有哪些协议簇&#x…...

编程日记 2026/5/8 12:30:03

Kmesh v1.0 正式发布！7 大特性提升网络流量管理效率和安全性

Kmesh v1.0 正式发布&#xff01;7 大特性提升网络流量管理效率和安全性 2025 年新年伊始&#xff0c;Kmesh 团队正式发布了 Kmesh v1.0234。以下是 Kmesh v1.0 提升网络流量管理效率和安全性的 7 大特性35&#xff1a; 加密通信&#xff1a;引入 IPsec 协议对节点间流量加密&a…...

编程日记 2026/5/7 9:50:13

巧妙获取ListBox控件的选中条目（按点击顺序）

实例需求&#xff1a;用户窗体中有两个控件 列表框&#xff1a;ListBox1&#xff0c;支持多选按钮&#xff1a;CommandButton1 现在需要记录用户在列表框中选择顺序&#xff08;不考虑选中后再次点击取消选中的操作&#xff09;&#xff0c;如下图所示。 Dim objDic As Objec…...

编程日记 2026/5/13 2:51:40

动手学图神经网络（3）：利用图神经网络进行节点分类 从理论到实践

利用图神经网络进行节点分类&#xff1a;从理论到实践 前言 在之前的学习中&#xff0c;大家对图神经网络有了初步的了解。本次教程将深入探讨如何运用图神经网络&#xff08;GNNs&#xff09;来解决节点分类问题。在节点分类任务里&#xff0c;大家往往仅掌握少量节点的真实…...

编程日记 2026/5/5 1:37:32

Level DB --- TableBuilder

TableBuilder是Level DB里面重要的类和模块&#xff0c;它描述了数据如何序列化到文件中&#xff0c;以及数据里面的格式逻辑。它里面包含了之前介绍的多个模块和类。 data block、filter block和index block block格式&#xff0c;之前已经介绍过Level DB --- BlockBuilder-…...

编程日记 2026/5/1 0:23:30