日漫网站设计html+css+js

作者：飞吻狂魔发布日期:2026-02-11 浏览:89

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日漫网站设计</title>
    <style>
        /* CSS部分 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }

        nav {
            background-color: #444;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        nav a:hover {
            background-color: #ddd;
            color: black;
        }

        .container {
            padding: 20px;
        }

        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 20px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- HTML部分 -->
    <header>
        <h1>日漫天堂</h1>
    </header>

    <nav>
        <a href="#home">首页</a>
        <a href="#manga">漫画</a>
        <a href="#news">新闻</a>
        <a href="#about">关于我们</a>
    </nav>

    <div class="container">
        <h2>欢迎来到日漫天堂</h2>
        <p>这里汇聚了最新的日漫资讯和漫画资源。</p>
    </div>

    <footer>
        <p>&copy; 2023 日漫天堂. All rights reserved.</p>
    </footer>

    <!-- JavaScript部分 -->
    <script>
        // JS部分：简单的交互效果，比如导航栏的高亮显示
        document.querySelectorAll('nav a').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelectorAll('nav a').forEach(a => a.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>

解释说明：

HTML部分:
- header 标签用于定义页面的标题部分。
- nav 标签用于定义导航栏，包含多个链接。
- div.container 包含页面的主要内容。
- footer 标签用于定义页面底部的内容。
CSS部分:
- 使用了基本的样式来设置页面的布局、颜色和字体。
- nav a:hover 设置了鼠标悬停时的样式变化。
- footer 设置为固定在页面底部。
JavaScript部分:
- 添加了一个简单的交互效果，点击导航栏中的链接时，会高亮显示当前选中的链接。

上一篇：js去除html标签

下一篇：js设置css样式