【前端】webstorm创建一个导航页面：HTML、CSS 和 JavaScript 的结合

embedded/2025/3/6 8:25:52/

文章目录

  • 前言
  • 一、项目结构
  • 二、HTML 结构
  • 三、CSS 样式
  • 四、JavaScript 功能
  • 五、现代化风格优化
    • html
    • css
    • javascript
    • 运行效果
  • 总结

前言

在现代网页开发中，一个良好的导航栏是提升用户体验的重要组成部分。在这篇文章中，我将向您展示如何创建一个简单而完整的导航页面，使用 HTML、CSS 和 JavaScript 来实现交互效果。

采用html" title=webstorm>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>&copy; 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_223">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。这个示例展示了如何构建一个简单而功能齐全的导航栏，用户可以通过下拉菜单访问更多链接。希望这篇文章能帮助你理解如何使用这三种技术来构建现代网页。如果你有任何问题或建议，欢迎在评论区留言！


http://www.ppmy.cn/embedded/170438.html

相关文章

【c语言函数精选题】

【c语言函数精选题】

c语言函数精选题 一、易错概念题1.1&#x1f4a1;建立函数的目的1.2&#x1f4a1;函数的定义1.3&#x1f4a1;return语句1.4&#x1f4a1;函数的参数1.5&#x1f4a1;复合语句声明变量 二、代码填空题2.1&#x1f4a1;四舍五入2.2&#x1f4a1;二分法求方程根2.3&#x1f4a1;输…
阅读更多...
电子制造中塑胶件测量困境破解：一体化测量方案登场

电子制造中塑胶件测量困境破解：一体化测量方案登场

在电子制造领域&#xff0c;塑胶件广泛应用于电子产品的外壳、内部结构件等关键部位。从智能手机轻薄的外壳&#xff0c;到笔记本电脑精密的散热模组框架&#xff0c;塑胶件的质量直接关系到电子产品的性能、外观以及用户体验。而在塑胶件生产流程里&#xff0c;完成倒模后的尺…
阅读更多...
神经网络|(十一)|神经元和神经网络

神经网络|(十一)|神经元和神经网络

【1】引言 前序已经了解了基本的神经元知识&#xff0c;相关文章链接为&#xff1a; 神经网络|(一)加权平均法&#xff0c;感知机和神经元-CSDN博客 神经网络|(二)sigmoid神经元函数_sigmoid函数绘制-CSDN博客 神经网络|(三)线性回归基础知识-CSDN博客 把不同的神经元通过…
阅读更多...
MySQL零基础教程16—表连接进阶

MySQL零基础教程16—表连接进阶

复习表别名 之前已经学习过&#xff0c;查询的时候可以使用as来对检索的列进行重命名&#xff0c;这样可以让sql更加简介&#xff0c;增强易读性&#xff08;as可以省略&#xff09; 此外&#xff0c;使用表别名还可以支持在一条select语句中&#xff0c;一个表是被多次使用 …
阅读更多...
解决最长无重复子串问题

解决最长无重复子串问题

在编程面试中&#xff0c;字符串处理常常是考察算法能力的重要部分。今天&#xff0c;我们将探讨一个经典问题——最长无重复子串问题&#xff0c;并给出 Python 代码实现。 问题描述 给定一个字符串 s&#xff0c;你需要找到其中最长的无重复字符的子串&#xff0c;并返回它…
阅读更多...
PyTorch ：梯度详解

PyTorch ：梯度详解

PyTorch 中的 torch.Tensor 梯度详解 PyTorch 是一个广泛使用的深度学习框架&#xff0c;它以其动态计算图和强大的自动微分&#xff08;Autograd&#xff09;机制而闻名。在训练神经网络时&#xff0c;梯度计算是反向传播算法的核心。 目录 Tensor 与 requires_grad 属性动态…
阅读更多...
office或者word排版中，复制/黏贴进来文字不会自动换行，如何处理？

office或者word排版中，复制/黏贴进来文字不会自动换行，如何处理？

李升伟 整理 一、思考与分析 在Office或Word中复制粘贴文字时&#xff0c;文字不会自动换行&#xff0c;需要处理这个问题。首先&#xff0c;我得回想一下常见的原因和解决方法。可能的情况有很多&#xff0c;比如文本带有硬回车、段落格式设置问题&#xff0c;或者文本框的自…
阅读更多...
鸿蒙HarmonyOS-Navagation基本用法

鸿蒙HarmonyOS-Navagation基本用法

Navagation基本用法 Navigation组件是路由导航的根视图容器&#xff0c;一般作为Page页面的根容器使用&#xff0c;其内部默认包含了标题栏&#xff0c;内容栏和公工具栏&#xff0c;其中内容区默认首页显示导航内容&#xff08;Navigation的子组件&#xff09;或非首页显示&am…
阅读更多...
最新文章

Copyright @ 2022~2023