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

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

news 2025/11/10 17:54:44

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/11/7 2:40:33

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/11/10 16:48:53

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

IGP（Interior Gateway Protocol，内部网关协议）

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

编程新知 2025/10/12 11:54:26

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/11/8 10:30:28

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/10/6 22:42:00

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/11/7 20:00:44

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

编程新知 2025/9/24 3:05:06

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47