【前端】webstorm创建一个导航页面：HTML、CSS 和 JavaScript 的结合
文章目录
- 前言
- 一、项目结构
- 二、HTML 结构
- 三、CSS 样式
- 四、JavaScript 功能
- 五、现代化风格优化
- html
- css
- javascript
- 运行效果
- 总结
前言
在现代网页开发中，一个良好的导航栏是提升用户体验的重要组成部分。在这篇文章中，我将向您展示如何创建一个简单而完整的导航页面，使用 HTML、CSS 和 JavaScript 来实现交互效果。
采用webstorm中分文件的形式。
一、项目结构
二、HTML 结构
首先，我们需要定义页面的基本结构。HTML（超文本标记语言）是构建网页的基础。在我们的导航页面中，我们将使用
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>导航栏示例</title><link rel="stylesheet" href="myCss.css">
</head>
<body>
<!-- 导航栏 -->
<nav><div class="nav-container"><ul><li><a href="#home" class="active">主页</a></li><li><a href="#news">新闻</a></li><li class="dropdown"><a href="#" class="dropdown-btn">下拉菜单</a><div class="dropdown-content"><a href="#">链接 1</a><a href="#">链接 2</a><a href="#">链接 3</a></div></li><li><a href="#about">关于</a></li></ul></div>
</nav>
<!-- 主内容区域 -->
<main><section id="home"><h2>主页</h2><p>欢迎来到我们的主页！这里是网站的起始点，你可以浏览各种精彩内容。</p></section><section id="news"><h2>新闻</h2><p>获取最新的新闻动态，了解行业内的最新消息。</p></section><section id="about"><h2>关于</h2><p>这里是关于我们的介绍，让你更了解我们的团队和服务。</p></section>
</main>
<!-- 页脚 -->
<footer><p>© 2025 导航栏示例. 保留所有权利.</p>
</footer><script src="myJsp.js"></script>
</body>
</html>
代码解析
- 导航栏：使用
- 主体内容：使用 标签包含多个
，分别展示主页、新闻和关于我们的内容。 - 页脚：使用
三、CSS 样式
接下来，我们需要为导航栏和页面内容添加样式。CSS（层叠样式表）用于控制网页的外观。在我们的例子中，我们将设置导航栏的背景颜色、链接的颜色、下拉菜单的样式等。以下是我们的 CSS 代码：
/* 全局样式 */
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin: 0;padding: 0;line-height: 1.6;color: #333;
}/* 导航栏样式 */
nav {background-color: #2c3e50;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}.nav-container {max-width: 1200px;margin: 0 auto;padding: 0 20px;
}nav ul {list-style-type: none;margin: 0;padding: 0;display: flex;justify-content: space-around;
}nav li {position: relative;
}nav li a {color: white;padding: 18px 20px;display: block;text-decoration: none;transition: background-color 0.3s ease;
}nav li > a.active {background-color: #1abc9c;
}nav li a:hover {background-color: #34495e;
}/* 下拉菜单样式 */
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);z-index: 1;
}.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;transition: background-color 0.3s ease;
}.dropdown-content a:hover {background-color: #f1f1f1;color: #1abc9c;
}.dropdown:hover .dropdown-content {display: block;
}/* 主内容区域样式 */
main {max-width: 1200px;margin: 40px auto;padding: 0 20px;
}section {margin-bottom: 40px;border-bottom: 1px solid #eee;padding-bottom: 40px;
}h2 {color: #2c3e50;
}/* 页脚样式 */
footer {background-color: #2c3e50;color: white;text-align: center;padding: 20px 0;
}
代码解析
- 基本样式：设置了页面的字体、边距和填充。
- 导航栏样式：定义了导航栏的背景颜色、链接的颜色和下拉菜单的样式。
- 主体内容和页脚样式：为主体内容和页脚设置了适当的样式，使其更具吸引力。
四、JavaScript 功能
最后，我们需要添加一些 JavaScript 代码，以实现下拉菜单的交互效果。JavaScript 是网页中的编程语言，可以用来添加动态效果和交互功能。以下是我们的 JavaScript 代码：
document.addEventListener('DOMContentLoaded', function() {const dropdown = document.querySelector('.dropdown');const dropdownBtn = dropdown.querySelector('.dropdown-btn');const dropdownContent = dropdown.querySelector('.dropdown-content');// 点击下拉菜单按钮时切换下拉内容的显示状态dropdownBtn.addEventListener('click', function(event) {event.stopPropagation();dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';});// 点击页面其他地方时关闭下拉菜单window.addEventListener('click', function() {dropdownContent.style.display = 'none';});// 导航栏链接点击样式切换const navLinks = document.querySelectorAll('nav li a');navLinks.forEach(link => {link.addEventListener('click', function() {// 移除所有链接的 active 类navLinks.forEach(navLink => navLink.classList.remove('active'));// 为当前点击的链接添加 active 类this.classList.add('active');});});
});
代码解析
- DOMContentLoaded 事件：确保 DOM 元素加载完成后再执行 JavaScript 代码。
- 下拉菜单功能：点击下拉菜单按钮时切换下拉内容的显示状态，点击页面其他地方时关闭下拉菜单。
运行结果：
五、现代化风格优化
html
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>现代风格导航栏</title><link rel="stylesheet" href="myCss.css">
</head>
<body>
<nav class="glass-nav"><ul class="nav-list"><li><a href="#home" class="active"><i class="fas fa-home"></i> 主页</a></li><li><a href="#news"><i class="fas fa-newspaper"></i> 新闻</a></li><li class="dropdown-wrapper"><div class="dropdown"><a href="#" class="dropdown-btn"><i class="fas fa-bars"></i> 服务 <i class="dropdown-arrow"></i></a><div class="dropdown-content"><a href="#"><i class="fas fa-cloud"></i> 云服务</a><a href="#"><i class="fas fa-code"></i> 开发工具</a><a href="#"><i class="fas fa-chart-line"></i> 数据分析</a></div></div></li><li><a href="#about"><i class="fas fa-info-circle"></i> 关于</a></li></ul>
</nav>
<main class="content-wrapper"><h1 class="neon-text">现代网页导航解决方案</h1><p class="desc-text">体验流畅的交互设计与视觉美学</p>
</main>
<!-- Font Awesome -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>-->
<script src="myJsp.js"></script>
</body>
</html>
css
/* nav-style.css */
:root {--primary-color: #2a2a72;--secondary-color: #009ffd;--glass-bg: rgba(255, 255, 255, 0.95);--shadow-color: rgba(0, 0, 0, 0.1);
}/* 现代玻璃拟态效果 */
.glass-nav {background: var(--glass-bg);backdrop-filter: blur(10px);box-shadow: 0 4px 30px var(--shadow-color);border-radius: 0 0 15px 15px;margin: 10px;
}.nav-list {display: flex;justify-content: center;list-style: none;padding: 0 20px;margin: 0;
}.nav-list li {position: relative;margin: 0 15px;
}.nav-list a {color: var(--primary-color);padding: 18px 25px;text-decoration: none;display: flex;align-items: center;transition: all 0.3s ease;border-radius: 8px;
}.nav-list a:hover {background: var(--secondary-color);color: white;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0, 159, 253, 0.3);
}/* 下拉菜单增强样式 */
.dropdown-wrapper {position: relative;
}.dropdown-content {position: absolute;top: 100%;left: 0;background: var(--glass-bg);min-width: 200px;border-radius: 8px;box-shadow: 0 8px 30px var(--shadow-color);opacity: 0;visibility: hidden;transition: all 0.3s ease;transform: translateY(10px);
}.dropdown:hover .dropdown-content {opacity: 1;visibility: visible;transform: translateY(0);
}.dropdown-content a {padding: 12px 20px;border-bottom: 1px solid #eee;transition: background 0.2s;
}.dropdown-content a:last-child {border-bottom: none;
}/* 自定义箭头 */
.dropdown-arrow {display: inline-block;margin-left: 8px;border: 6px solid transparent;border-top-color: currentColor;transition: transform 0.3s;
}.dropdown:hover .dropdown-arrow {transform: rotate(180deg);
}/* 响应式设计 */
@media (max-width: 768px) {.nav-list {flex-direction: column;padding: 10px;}.nav-list li {margin: 5px 0;}.dropdown-content {position: static;box-shadow: none;}
}/* 内容区样式 */
.content-wrapper {max-width: 1200px;margin: 50px auto;padding: 30px;text-align: center;
}.neon-text {color: var(--secondary-color);text-shadow: 0 0 10px rgba(0, 159, 253, 0.3);font-size: 2.5em;
}.desc-text {color: #666;font-size: 1.2em;
}
javascript
// nav-script.js
document.addEventListener('DOMContentLoaded', () => {const dropdowns = document.querySelectorAll('.dropdown');dropdowns.forEach(dropdown => {const btn = dropdown.querySelector('.dropdown-btn');const content = dropdown.querySelector('.dropdown-content');// 桌面端交互dropdown.addEventListener('mouseenter', () => {if (window.innerWidth > 768) {content.style.opacity = '1';content.style.visibility = 'visible';content.style.transform = 'translateY(0)';}});dropdown.addEventListener('mouseleave', () => {if (window.innerWidth > 768) {content.style.opacity = '0';content.style.visibility = 'hidden';content.style.transform = 'translateY(10px)';}});// 移动端交互btn.addEventListener('click', (e) => {if (window.innerWidth <= 768) {e.preventDefault();const isOpen = content.style.visibility === 'visible';content.style.opacity = isOpen ? '0' : '1';content.style.visibility = isOpen ? 'hidden' : 'visible';content.style.transform = isOpen ? 'translateY(10px)' : 'translateY(0)';}});});// 全局点击关闭document.addEventListener('click', (e) => {if (!e.target.closest('.dropdown') && window.innerWidth <= 768) {dropdowns.forEach(dropdown => {const content = dropdown.querySelector('.dropdown-content');content.style.opacity = '0';content.style.visibility = 'hidden';content.style.transform = 'translateY(10px)';});}});// 窗口尺寸监听window.addEventListener('resize', () => {dropdowns.forEach(dropdown => {const content = dropdown.querySelector('.dropdown-content');if (window.innerWidth > 768) {content.style = '';}});});
});
运行效果
总结
通过以上步骤，我们成功创建了一个完整的导航页面，结合了 HTML、CSS 和 JavaScript。这个示例展示了如何构建一个简单而功能齐全的导航栏，用户可以通过下拉菜单访问更多链接。希望这篇文章能帮助你理解如何使用这三种技术来构建现代网页。如果你有任何问题或建议，欢迎在评论区留言！
相关文章：
【前端】webstorm创建一个导航页面：HTML、CSS 和 JavaScript 的结合
文章目录 前言一、项目结构二、HTML 结构三、CSS 样式四、JavaScript 功能五、现代化风格优化htmlcssjavascript运行效果 总结 前言 在现代网页开发中，一个良好的导航栏是提升用户体验的重要组成部分。在这篇文章中，我将向您展示如何创建一个简单而完整…...
AI编程： 一个案例对比CPU和GPU在深度学习方面的性能差异
背景 字节跳动正式发布中国首个AI原生集成开发环境工具（AI IDE）——AI编程工具Trae国内版。 该工具模型搭载doubao-1.5-pro，支持切换满血版DeepSeek R1&V3， 可以帮助各阶段开发者与AI流畅协作，更快、更高质量地完…...
第11章 web应用程序安全(网络安全防御实战--蓝军武器库)
网络安全防御实战--蓝军武器库是2020年出版的，已经过去3年时间了，最近利用闲暇时间，抓紧吸收，总的来说，第11章开始学习利用web应用程序安全，主要讲信息收集、dns以及burpsuite，现在的资产测绘也…...
MySQL复习笔记
MySQL复习笔记 1.MySQL 1.1什么是数据库 数据库(DB, DataBase) 概念：数据仓库，软件，安装在操作系统（window、linux、mac…）之上 作用：存储数据，管理数据 1.2 数据库分类 关系型数据库&#…...
GitHub上传项目
总结（有基础的话直接执行这几步，就不需要再往下看了）： git init 修改git的config文件：添加:[user]:name你的github用户名 email你注册github的用户名 git branch -m master main git remote add origin 你的URL gi…...
自我训练模型：通往未来的必经之路？
摘要 在探讨是否唯有通过自我训练模型才能掌握未来的问题时，文章强调了底层技术的重要性。当前，许多人倾向于关注应用层的便捷性，却忽视了支撑这一切的根本——底层技术。将模型简单视为产品是一种短视行为，长远来看，理…...
qt 操作多个sqlite文件
qt 操作多个sqlite文件 Chapter1 qt 操作多个sqlite文件1. 引入必要的头文件2. 创建并连接多个SQLite数据库3. 代码说明4. 注意事项 Chapter2 qt 多线程操作sqlite多文件1. 引入必要的头文件2. 创建数据库操作的工作线程类3. 在主线程中创建并启动多个工作线程4. 代码说明5. 运…...
【每日学点HarmonyOS Next知识】多继承、swiper容器、事件传递、滚动安全区域、提前加载网络图片
1、HarmonyOS ArkTS如何让一个类可以具备其他多个类的能力？ ArkTS如何让一个类可以具备其他多个类的能力，类似于多继承。 接口支持多继承。类不支持，其只支持单继承。 （报错：Classes can only extend a single class…...
DIY Tomcat：手写一个简易Servlet容器
在Java Web开发领域，Tomcat堪称经典，它作为Servlet容器，承载着无数Web应用的运行。今天，我将带大家一同探索如何手写一个简易的Tomcat，深入理解其底层原理。 一、背景知识 在开始之前，我们需要对几个关键…...
如何在Ubuntu上直接编译Apache Doris
以下是在 Ubuntu 22.04 上直接编译 Apache Doris 的完整流程，综合多个版本和环境的最佳实践： 注意：Ubuntu的数据盘VMware默认是20G，编译不够用，给到50G以上吧 一、环境准备 1. 安装系统依赖 # 基础构建工具链 apt i…...
基于ssm的物资进销存(全套)
现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本货物进销管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息&#…...
【CVPR2025】 EVSSM：用状态空间模型高效去模糊
Efficient Visual State Space Model for Image Deblurring 论文信息 题目： Efficient Visual State Space Model for Image Deblurring 用于图像去模糊的高效视觉状态空间模型 源码：https://github.com/kkkls/EVSSM 创新点 提出了高效视觉状态空间模型…...
动态规划--斐波那契类型
目录 前言 1 第N个斐波那契数 2 爬楼梯 3 三步问题 4 使用最小花费爬楼梯 5 解码方法 总结 前言 本篇所讲的几个题目都是与斐波那契数的做法与思路类似的题目，所以直接放在一块解决了。 同时，由于第一次接触动态规划，我们也会讲解一…...
supervisord管理Gunicorn进程，使用Nginx作为反向代理运行flask web项目
1. 安装 Gunicorn 在项目虚拟环境中安装 Gunicorn：2. 基本用法 配置文件 创建一个 Gunicorn 配置文件（如 gunicorn_config.py），方便管理复杂配置。 示例 gunicorn_config.py： bind "0.0.0.0:8000" #…...
《Python实战进阶》No16: Plotly 交互式图表制作指南
No16: Plotly 交互式图表制作指南 Plotly是一款用来做数据分析和可视化的在线平台，功能真的是非常强大，它主要有以下特点： 图形多样化：在线绘制多种图形，比如柱状图、饼图、直方图、饼图、气泡图、桑基图、股票图、旭…...
代码随想录算法训练营第22天 | 组合总和 分割回文串
39. 组合总和 39. 组合总和 - 力扣（LeetCode） 题目链接/文章讲解：代码随想录 视频讲解：带你学透回溯算法-组合总和（对应「leetcode」力扣题目：39.组合总和）| 回溯法精讲！_哔哩哔哩_…...
DeepSeek 医疗大模型微调实战讨论版（第一部分）
DeepSeek医疗大模型微调实战指南第一部分 DeepSeek 作为一款具有独特优势的大模型，在医疗领域展现出了巨大的应用潜力。它采用了先进的混合专家架构（MoE），能够根据输入数据的特性选择性激活部分专家，避免了不必要的计算，极大地提高了计算效率和模型精度 。这种架构使得 …...
Linux云计算SRE-第十七周
1. 做三个节点的redis集群。 1、编辑redis节点node0(10.0.0.100)、node1(10.0.0.110)、node2(10.0.0.120)的安装脚本 [rootnode0 ~]# vim install_redis.sh#!/bin/bash # 指定脚本解释器为bashREDIS_VERSIONredis-7.2.7 # 定义Redis的版本号PASSWORD123456 # 设置Redis的访问…...
lvgl在ubuntu中模拟运行
文章目录 前言具体的步骤 前言 lvgl是一个图像UI的开源框架，用于嵌入式的设备之中。 在学习lvgl时，我们最好是现在PC上模拟运行，所以我们学习lvgl的第一步可以说是在我们的电脑上搭建模拟的运行环境。 参考官方的操作 lvgl在ubuntu上模拟运…...
Unity引擎使用HybridCLR(华佗)热更新
大家好，我是阿赵。 阿赵我做手机游戏已经有十几年时间了。记得刚开始从做页游的公司转到去做手游的公司，在面试的时候很重要的一个点，就是会不会用Lua。使用Lua的原因很简单，就是为了热更新。 热更新游戏内容很重要。如果…...
【Linux】权限相关知识点
思考 我们平时使用Linux创建文件或目录时的默认权限是多少？ [rootlocalhost test]# mkdir dir [rootlocalhost test]# touch file [rootlocalhost test]# ll total 0 drwxr-xr-x 2 root root 6 Mar 8 15:23 dir #755 -rw-r--r-- 1 root root 0 Mar 8 15:23 f…...
Vue项目通过内嵌iframe访问另一个vue页面，获取token适配后端鉴权(以内嵌若依项目举例)
1. 改造子Vue项目进行适配(ruoyi举例) (1) 在路由文件添加需要被外链的vue页面配置 // 若依项目的话是 router/index.js文件 {path: /contrast,component: () > import(/views/contrast/index),hidden: true },(2) 开放白名单 // 若依项目的话是 permission.js 文件 cons…...
vue3 vite项目安装eslint
npm install eslint -D 安装eslint库 npx eslint --init 初始化配置，按项目实际情况选 自动生成eslint.config.js，可以添加自定义rules 安装ESLint插件 此时打开vue文件就会标红有问题的位置 安装prettier npm install prettier eslint-config-pr…...
Python Flask框架学习汇编
1、入门级： 《Python Flask Web 框架入门》 这篇博文条理清晰，由简入繁，案例丰富，分十五节详细讲解了Flask框架，强烈推荐！ 《python的简单web框架flask【附例子】》 讲解的特别清楚，每一步都…...
Excel·VBA江西省预算一体化工资表一键处理
每月制作工资表导出为Excel后都需要调整格式，删除0数据的列、对工资表项目进行排序、打印设置等等，有些单位还分有“行政”、“事业”2个工资表就需要操作2次。显然，这种重复操作的问题，可以使用VBA代码解决 目录 代码使用说明1&a…...
【A2DP】SBC 编解码器互操作性要求详解
目录 一、SBC编解码器互操作性概述 二、编解码器特定信息元素（Codec Specific Information Elements） 2.1 采样频率（Sampling Frequency） 2.2 声道模式（Channel Mode） 2.3 块长度（Block Length） 2.4 子带数量（Subbands） 2.5 分配方法（Allocation Method） 2…...
redis数据类型以及底层数据结构
redis数据类型以及底层数据结构 String：字符串类型，底层就是动态字符串，使用sds数据结构 Map:有两种数据结构：1.压缩列表：当hash结构中存储的元素个数小于了512个。并且元 …...
R软件线性模型与lmer混合效应模型对生态学龙类智力测试数据层级结构应用
全文链接：https://tecdat.cn/?p40925 在生态与生物学研究中，数据常呈现复杂结构特征。例如不同种群、采样点或时间序列的观测数据间往往存在相关性（点击文末“阅读原文”获取完整代码、数据、文档）。 传统线性模型在处理这类非独…...
打造智能聊天体验：前端集成 DeepSeek AI 助你快速上手
DeepSeek AI 聊天助手集成指南 先看完整效果： PixPin_2025-02-19_09-15-59 效果图： 目录 项目概述功能特点环境准备项目结构组件详解 ChatContainerChatInputMessageBubbleTypeWriter 核心代码示例使用指南常见问题 项目概述 基于 Vue 3 TypeScrip…...
C语言-语法
数据类型 字符串 C中字符串拼接不用+号，直接使用空格。 char* str = "hello" "world"; 换行链接，加上\就不会报错 char* longStr = "00000000000000000000000000000\ 00000000000000000000000000000"; typedef C 语言提供了 typedef …...