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

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

article 2025/3/9 19:39:16

文章目录

前言
一、项目结构
二、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 = '';
            }
        });
    });
});