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

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

news 2025/12/27 23:10:43

一个简单的 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运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/12/27 11:23:00

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/12/26 6:10:20

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/12/26 19:02:06

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/12/27 11:11:20

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/12/16 16:33:37

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2025/12/20 22:08:15

【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论

路径问题的革命性重构&#xff1a;基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中&#xff08;图1&#xff09;&#xff1a; mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...

编程新知 2025/10/21 1:07:59

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/12/24 23:02:01

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15