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

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

news 2026/3/30 9:18:33

一个简单的 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…...

编程日记 2025/1/27 16:31:46

HttpClient学习

目录 一、概述 二、HttpClient依赖介绍 1.导入HttpClient4依赖 2.或者导入HttpClient5依赖 3.二者区别 三、HttpClient发送Get请求和Post请求测试 (一)通过HttpClient发送Get请求 (二)通过HttpClient发送Post请求 一、概述 HttpClient是 Apache 软件基金会提供的一…...

编程日记 2025/1/27 16:30:31

二级 二维数组3

对角线之和 题目描述 输入一个矩阵&#xff0c;输出右上-左下对角线上的数字和 输入 输入1个整数N。(N<10)表示矩阵有n行n列 输出 对角线的和 样例 输入复制 4 1 2 3 4 2 3 4 5 4 5 6 7 1 2 3 4 输出复制 14 #include<iostream> using namespace std; int main() {i…...

编程日记 2025/1/27 16:28:18

【PyTorch][chapter 29][李宏毅深度学习]Fine-tuning LLM

参考&#xff1a; https://www.youtube.com/watch?veC6Hd1hFvos 目录&#xff1a; 什么是 Fine-tune 为什么需要Fine-tuning 如何进行Fine-tune Fine-tuning- Supervised Fine-tuning 流程 Fine-tuning参数训练的常用方案 LORA 简介 示例代码 一 什么是 Fine-tune …...

编程日记 2025/1/27 16:27:16

javascript-es6 （一）

作用域&#xff08;scope&#xff09; 规定了变量能够被访问的“范围”&#xff0c;离开了这个“范围”变量便不能被访问 局部作用域 函数作用域&#xff1a; 在函数内部声明的变量只能在函数内部被访问&#xff0c;外部无法直接访问 function getSum(){ //函数内部是函数作用…...

编程日记 2025/1/27 16:26:14

数据结构——二叉树——堆（1）

今天&#xff0c;我们来写一篇关于数据结构的二叉树的知识。 在学习真正的二叉树之前&#xff0c;我们必不可少的先了解一下二叉树的相关概念。 一&#xff1a;树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层…...

编程日记 2025/1/27 16:24:10

window保存好看的桌面壁纸

1、按下【WINR】快捷键调出“运行”窗口&#xff0c;输入以下命令后回车。 %localappdata%\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets 2、依次点击【查看】【显示】&#xff0c;勾选【隐藏的项目】&#xff0c;然后按【CtrlA】全部…...

编程日记 2025/1/27 16:23:09

docker安装Redis:docker离线安装Redis、docker在线安装Redis、Redis镜像下载、Redis配置、Redis命令

一、镜像下载 1、在线下载 在一台能连外网的linux上执行docker镜像拉取命令 docker pull redis:7.4.0 2、离线包下载 两种方式&#xff1a; 方式一&#xff1a; -&#xff09;在一台能连外网的linux上安装docker执行第一步的命令下载镜像 -&#xff09;导出 # 导出镜像…...

编程日记 2025/1/27 16:18:47

98.1 AI量化开发：长文本AI金融智能体(Qwen-Long)对金融研报大批量处理与智能分析的实战应用

目录 0. 承前1. 简介1.1 通义千问(Qwen-Long)的长文本处理能力 2. 基础功能实现2.1 文件上传2.2 单文件分析2.3 多文件分析 3. 汇总代码&运行3.1 封装的工具函数3.2 主要功能特点3.3 使用示例3.4 首次运行3.5 运行结果展示 4. 注意事项4.1 文件要求4.2 错误处理机制4.3 最佳…...

编程日记 2025/1/27 16:17:18

【自然语言处理（NLP）】长短期记忆网络（Long - Short Term Memory，LSTM）原理和代码实现（从零实现、Pytorch实现）

文章目录 介绍长短期记忆网络&#xff08;Long - Short Term Memory&#xff0c;LSTM&#xff09;结构原理候选记忆元符号含义公式含义 记忆元符号含义公式含义 隐状态符号含义公式含义 特点应用实现 LSTMpytorch实现 个人主页&#xff1a;道友老李 欢迎加入社区&#xff1a;道…...

编程日记 2025/1/27 16:15:12

八股学习 微服务篇

微服务篇 常见面试内容Spring Cloud 常见组件注册中心Ribbon负载均衡策略服务雪崩 常见面试内容 Spring Cloud 常见组件 Spring Cloud有5个常见组件&#xff1a; Eureka/Nacos:注册中心&#xff1b;Ribbon:负载均衡&#xff1b;Feign:远程调用&#xff1b;Hystrix/Sentinel:服…...

编程日记 2025/1/27 16:14:11

TCP协议：互联网数据传输的守护者

在互联网的浩瀚海洋中&#xff0c;数据如同涓涓细流&#xff0c;无时无刻不在流动。而这些数据的稳定、可靠传输&#xff0c;离不开一个重要的协议——TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;。TCP协议作为互联网协议族中的核心成员…...

编程日记 2025/1/27 16:10:04

协助工具-任意门导航

任意门导航网址&#xff1a;随意门导航-最全的实用导航网站,好用简洁宝藏网址神器...

编程日记 2025/1/27 16:08:55

【MCAL实战】MCU模块配置实践

目录 前言 正文 1.硬件分析 1.1 MCU系统模式分析 1.2MCU晶振使用分析 2.MCU通用配置 2.1 McuGeneralConfiguration 2.2 McuModuleConfiguration 2.3 McuResetSettingConf 2.4 McuTrapSettingConf 2.4 其他 3.MCU模式配置 3.1 McuModeSettingConf_0 3.2 McuModeSe…...

编程日记 2025/1/27 16:01:38

OpenAI 发布首个 AI 智能体

OpenAI 发布首个 AI 智能体 当地时间 1 月 23 日&#xff0c;OpenAI 发布了首个 AI 智能体 Operator124。以下是关于它的详细介绍2&#xff1a; 功能用途 操作网页&#xff1a;可模拟人类操作网页浏览器&#xff0c;能进行点击、滚动、输入等操作&#xff0c;例如在 OpenTable…...

编程日记 2025/1/27 15:56:06

【Python】导入类

随着不断给类添加功能&#xff0c;文件可能变得很长&#xff0c;即便妥善地使用了继承亦如此。为遵循Python的总体理念&#xff0c;应让文件尽可能整洁。 Python在这方面提供了帮助&#xff0c;允许将类存储在模块中&#xff0c;然后在主程序中导入所需的模块。 导入单个类 下…...

编程日记 2025/1/27 15:48:54

Deepseek实现本地电影文件批量重命名为infuse格式，可匹配IMDB

import os from openai import OpenAI# 初始化DeepSeek客户端 client OpenAI(api_key"<DeepSeek API Key>", base_url"https://api.deepseek.com")def parse_filename_with_deepseek(filename):"""使用DeepSeek API解析文件名并生成…...

编程日记 2025/1/27 15:44:42

Nginx部署的前端项目刷新404问题

1&#xff0c;查看问题 我部署的81端口是监听tlias项目的&#xff0c;我直接访问端口页面可以出现内容。 我在浏览器舒服端口之后回车&#xff0c;会重定向页面。但是我在重定向之后的页面刷新浏览器就会出现404的问题。 下面是刷新浏览器后的效果 2&#xff0c;在nginx.cnf …...

编程日记 2025/1/27 15:42:38

Boot 系统选择U启动

1.进入Boot 系统 F2 或 Del Boot --->Boot 0ption Priorities #4 KingstwongDataTravele 是U盘 调整搭到#1 2.保持重启就好...

编程日记 2025/1/27 15:39:24

XSLT 编辑 XML：深度解析与实际应用

XSLT 编辑 XML&#xff1a;深度解析与实际应用 引言 XML&#xff08;可扩展标记语言&#xff09;和XSLT&#xff08;可扩展样式表语言转换&#xff09;是处理和转换XML数据的重要工具。本文将深入探讨XSLT在编辑XML文档中的应用&#xff0c;包括其基本概念、语法结构、以及实…...

编程日记 2025/1/27 15:37:20

Qwen3-TTS声音克隆入门指南：上传音频→选择语种→生成自然语音三步走

Qwen3-TTS声音克隆入门指南&#xff1a;上传音频→选择语种→生成自然语音三步走 想不想让AI用你自己的声音说话&#xff1f;或者&#xff0c;想不想用一段短短的录音&#xff0c;就克隆出能说十几种语言的“数字分身”&#xff1f;今天&#xff0c;我们就来手把手教你&#x…...

编程新知 2026/3/30 8:57:35

终极LrcHelper歌词下载指南：5分钟学会网易云音乐双语歌词获取与设备适配

终极LrcHelper歌词下载指南&#xff1a;5分钟学会网易云音乐双语歌词获取与设备适配 【免费下载链接】LrcHelper 从网易云音乐下载带翻译的歌词 Walkman 适配 项目地址: https://gitcode.com/gh_mirrors/lr/LrcHelper 还在为找不到高质量双语歌词而烦恼吗&#xff1f;想…...

编程新知 2026/3/30 7:29:04

惊艳！Pi0具身智能v1动作轨迹可视化：关节控制曲线清晰呈现

惊艳&#xff01;Pi0具身智能v1动作轨迹可视化&#xff1a;关节控制曲线清晰呈现 1. 具身智能的动作可视化革命 在机器人实验室里&#xff0c;工程师小李正盯着屏幕上一堆杂乱的数据点发愁——这是他们最新研发的机械臂在执行抓取任务时生成的关节角度数据。理论上这些数字应…...

编程新知 2026/3/30 6:48:54

多模态交互概念展示：LFM2.5-1.2B-Thinking-GGUF如何理解并处理图像描述文本

多模态交互概念展示&#xff1a;LFM2.5-1.2B-Thinking-GGUF如何理解并处理图像描述文本 1. 当文本模型遇见视觉世界 你可能好奇&#xff0c;一个纯文本模型如何参与多模态交互&#xff1f;关键在于语义桥梁的搭建。LFM2.5-1.2B-Thinking-GGUF虽然不能直接处理图像&#xff0c…...

编程新知 2026/3/30 6:36:52

手把手教你实现glitch free的时钟切换电路（附Verilog代码）

手把手教你实现glitch free的时钟切换电路&#xff08;附Verilog代码&#xff09; 时钟切换电路是数字系统设计中的关键模块&#xff0c;尤其在多时钟域系统中&#xff0c;可靠的时钟切换能确保系统稳定运行。本文将深入探讨如何实现无毛刺&#xff08;glitch free&#xff09;…...

编程新知 2026/3/30 5:02:03

从YOLO到DeepLab：盘点CV任务中那些‘神级’特征融合技巧与避坑指南

从YOLO到DeepLab&#xff1a;盘点CV任务中那些‘神级’特征融合技巧与避坑指南 在计算机视觉领域&#xff0c;特征融合技术就像一位隐形的调音师&#xff0c;默默协调着神经网络中不同层次、不同来源的信息流。当你在目标检测任务中遇到小目标识别率低的问题&#xff0c;或在图…...

编程新知 2026/3/30 4:51:58

Ext2Read：终极Windows读取Linux分区解决方案，3分钟快速上手

Ext2Read&#xff1a;终极Windows读取Linux分区解决方案&#xff0c;3分钟快速上手 【免费下载链接】ext2read A Windows Application to read and copy Ext2/Ext3/Ext4 (With LVM) Partitions from Windows. 项目地址: https://gitcode.com/gh_mirrors/ex/ext2read 你是…...

编程新知 2026/3/30 4:43:57

终极指南：解决Embassy嵌入式框架编译错误的10个技巧

终极指南&#xff1a;解决Embassy嵌入式框架编译错误的10个技巧 【免费下载链接】embassy Modern embedded framework, using Rust and async. 项目地址: https://gitcode.com/gh_mirrors/em/embassy Embassy是一个使用Rust和async/await的现代嵌入式框架&#xff0c;但…...

编程新知 2026/3/30 3:47:11

从CPU指令到C++代码：拆解 std::atomic fetch_add 在 x86 和 ARM 平台上的底层实现与性能差异

从CPU指令到C代码&#xff1a;拆解 std::atomic fetch_add 在 x86 和 ARM 平台上的底层实现与性能差异 在现代高性能并发编程中&#xff0c;原子操作是构建无锁数据结构和线程安全代码的基石。std::atomic 的 fetch_add 操作看似简单&#xff0c;但其底层实现却因硬件架构差异而…...

编程新知 2026/3/30 3:45:10

QWEN-AUDIO效果分享：支持粤语拼音输入与粤语语音合成的扩展能力

QWEN-AUDIO效果分享&#xff1a;支持粤语拼音输入与粤语语音合成的扩展能力 1. 语音合成技术的新突破 QWEN-AUDIO智能语音合成系统基于通义千问Qwen3-Audio架构构建&#xff0c;这是一款真正具有"人类温度"的新一代语音合成系统。与传统TTS系统相比&#xff0c;它不…...

编程新知 2026/3/30 3:30:52