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

news2025/3/9 16:21:50

文章目录

  • 前言
  • 一、项目结构
  • 二、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>&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

<!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.coloradmin.cn/o/2312220.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

AI编程： 一个案例对比CPU和GPU在深度学习方面的性能差异

AI编程： 一个案例对比CPU和GPU在深度学习方面的性能差异

背景 字节跳动正式发布中国首个AI原生集成开发环境工具&#xff08;AI IDE&#xff09;——AI编程工具Trae国内版。 该工具模型搭载doubao-1.5-pro&#xff0c;支持切换满血版DeepSeek R1&V3&#xff0c; 可以帮助各阶段开发者与AI流畅协作&#xff0c;更快、更高质量地完…
阅读更多...
第11章 web应用程序安全(网络安全防御实战--蓝军武器库)

第11章 web应用程序安全(网络安全防御实战--蓝军武器库)

网络安全防御实战--蓝军武器库是2020年出版的&#xff0c;已经过去3年时间了&#xff0c;最近利用闲暇时间&#xff0c;抓紧吸收&#xff0c;总的来说&#xff0c;第11章开始学习利用web应用程序安全&#xff0c;主要讲信息收集、dns以及burpsuite&#xff0c;现在的资产测绘也…
阅读更多...
GitHub上传项目

GitHub上传项目

总结&#xff08;有基础的话直接执行这几步&#xff0c;就不需要再往下看了&#xff09;&#xff1a; git init 修改git的config文件&#xff1a;添加:[user]:name你的github用户名 email你注册github的用户名 git branch -m master main git remote add origin 你的URL gi…
阅读更多...
DIY Tomcat：手写一个简易Servlet容器

DIY Tomcat：手写一个简易Servlet容器

在Java Web开发领域&#xff0c;Tomcat堪称经典&#xff0c;它作为Servlet容器&#xff0c;承载着无数Web应用的运行。今天&#xff0c;我将带大家一同探索如何手写一个简易的Tomcat&#xff0c;深入理解其底层原理。 一、背景知识 在开始之前&#xff0c;我们需要对几个关键…
阅读更多...
基于ssm的物资进销存(全套)

基于ssm的物资进销存(全套)

现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本货物进销管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信息&#…
阅读更多...
【CVPR2025】 EVSSM：用状态空间模型高效去模糊

【CVPR2025】 EVSSM：用状态空间模型高效去模糊

Efficient Visual State Space Model for Image Deblurring 论文信息 题目&#xff1a; Efficient Visual State Space Model for Image Deblurring 用于图像去模糊的高效视觉状态空间模型 源码&#xff1a;https://github.com/kkkls/EVSSM 创新点 提出了高效视觉状态空间模型…
阅读更多...
动态规划--斐波那契类型

动态规划--斐波那契类型

目录 前言 1 第N个斐波那契数 2 爬楼梯 3 三步问题 4 使用最小花费爬楼梯 5 解码方法 总结 前言 本篇所讲的几个题目都是与斐波那契数的做法与思路类似的题目&#xff0c;所以直接放在一块解决了。 同时&#xff0c;由于第一次接触动态规划&#xff0c;我们也会讲解一…
阅读更多...
《Python实战进阶》No16: Plotly 交互式图表制作指南

《Python实战进阶》No16: Plotly 交互式图表制作指南

No16: Plotly 交互式图表制作指南 Plotly是一款用来做数据分析和可视化的在线平台&#xff0c;功能真的是非常强大&#xff0c;它主要有以下特点&#xff1a; 图形多样化&#xff1a;在线绘制多种图形&#xff0c;比如柱状图、饼图、直方图、饼图、气泡图、桑基图、股票图、旭…
阅读更多...
代码随想录算法训练营第22天 | 组合总和 分割回文串

代码随想录算法训练营第22天 | 组合总和 分割回文串

39. 组合总和 39. 组合总和 - 力扣&#xff08;LeetCode&#xff09; 题目链接/文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;带你学透回溯算法-组合总和&#xff08;对应「leetcode」力扣题目&#xff1a;39.组合总和&#xff09;| 回溯法精讲&#xff01;_哔哩哔哩_…
阅读更多...
DeepSeek 医疗大模型微调实战讨论版（第一部分）

DeepSeek 医疗大模型微调实战讨论版（第一部分）

DeepSeek医疗大模型微调实战指南第一部分 DeepSeek 作为一款具有独特优势的大模型，在医疗领域展现出了巨大的应用潜力。它采用了先进的混合专家架构（MoE），能够根据输入数据的特性选择性激活部分专家，避免了不必要的计算，极大地提高了计算效率和模型精度 。这种架构使得 …
阅读更多...
lvgl在ubuntu中模拟运行

lvgl在ubuntu中模拟运行

文章目录 前言具体的步骤 前言 lvgl是一个图像UI的开源框架&#xff0c;用于嵌入式的设备之中。 在学习lvgl时&#xff0c;我们最好是现在PC上模拟运行&#xff0c;所以我们学习lvgl的第一步可以说是在我们的电脑上搭建模拟的运行环境。 参考官方的操作 lvgl在ubuntu上模拟运…
阅读更多...
Unity引擎使用HybridCLR(华佗)热更新

Unity引擎使用HybridCLR(华佗)热更新

大家好&#xff0c;我是阿赵。   阿赵我做手机游戏已经有十几年时间了。记得刚开始从做页游的公司转到去做手游的公司&#xff0c;在面试的时候很重要的一个点&#xff0c;就是会不会用Lua。使用Lua的原因很简单&#xff0c;就是为了热更新。   热更新游戏内容很重要。如果…
阅读更多...
Vue项目通过内嵌iframe访问另一个vue页面，获取token适配后端鉴权(以内嵌若依项目举例)

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

vue3 vite项目安装eslint

npm install eslint -D 安装eslint库 npx eslint --init 初始化配置&#xff0c;按项目实际情况选 自动生成eslint.config.js&#xff0c;可以添加自定义rules 安装ESLint插件 此时打开vue文件就会标红有问题的位置 安装prettier npm install prettier eslint-config-pr…
阅读更多...
Excel·VBA江西省预算一体化工资表一键处理

Excel·VBA江西省预算一体化工资表一键处理

每月制作工资表导出为Excel后都需要调整格式&#xff0c;删除0数据的列、对工资表项目进行排序、打印设置等等&#xff0c;有些单位还分有“行政”、“事业”2个工资表就需要操作2次。显然&#xff0c;这种重复操作的问题&#xff0c;可以使用VBA代码解决 目录 代码使用说明1&a…
阅读更多...
【A2DP】SBC 编解码器互操作性要求详解

【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…
阅读更多...
R软件线性模型与lmer混合效应模型对生态学龙类智力测试数据层级结构应用

R软件线性模型与lmer混合效应模型对生态学龙类智力测试数据层级结构应用

全文链接&#xff1a;https://tecdat.cn/?p40925 在生态与生物学研究中&#xff0c;数据常呈现复杂结构特征。例如不同种群、采样点或时间序列的观测数据间往往存在相关性&#xff08;点击文末“阅读原文”获取完整代码、数据、文档&#xff09;。 传统线性模型在处理这类非独…
阅读更多...
打造智能聊天体验：前端集成 DeepSeek AI 助你快速上手

打造智能聊天体验：前端集成 DeepSeek AI 助你快速上手

DeepSeek AI 聊天助手集成指南 先看完整效果&#xff1a; PixPin_2025-02-19_09-15-59 效果图&#xff1a; 目录 项目概述功能特点环境准备项目结构组件详解 ChatContainerChatInputMessageBubbleTypeWriter 核心代码示例使用指南常见问题 项目概述 基于 Vue 3 TypeScrip…
阅读更多...
C语言-语法

C语言-语法

数据类型 字符串 C中字符串拼接不用+号，直接使用空格。 char* str = "hello" "world"; 换行链接，加上\就不会报错 char* longStr = "00000000000000000000000000000\ 00000000000000000000000000000"; typedef C 语言提供了 typedef …
阅读更多...
Unity组件TrailRenderer屏幕滑动拖尾

Unity组件TrailRenderer屏幕滑动拖尾

Unity组件TrailRenderer屏幕滑动拖尾 介绍制作总结 介绍 今天要做一个拖动效果&#xff0c;正好用到了TrailRenderer这个组件&#xff0c;正好分享一下 效果参考如下&#xff1a; 制作 1.创建空物体TrailObject添加组件TrailRenderer 下面的材质可以根据自己想要制作的效果去…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023