js html css

作者：仯孒①個亾哋杺￠涳孒发布日期:2025-05-19 浏览:71

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS HTML CSS Example</title>
    <style>
        /* CSS部分 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: auto;
            overflow: hidden;
        }
        header {
            background: #35424a;
            color: #ffffff;
            padding-top: 30px;
            min-height: 70px;
            border-bottom: #e8491d 3px solid;
        }
        header h1 {
            float: left;
            margin: 0;
        }
        header nav {
            float: right;
            margin-top: 25px;
        }
        header nav a {
            color: #ffffff;
            text-decoration: none;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <!-- HTML部分 -->
    <header>
        <div class="container">
            <h1>My Website</h1>
            <nav>
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#services">Services</a>
                <a href="#contact">Contact</a>
            </nav>
        </div>
    </header>

    <div class="container">
        <section id="main">
            <h2>Welcome to My Website</h2>
            <p>This is a simple example of how HTML, CSS, and JavaScript can work together.</p>
        </section>
    </div>

    <!-- JS部分 -->
    <script>
        // JavaScript部分
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Page loaded');
            const header = document.querySelector('header');
            header.style.borderBottom = '6px solid #ff0000'; // 修改底部边框颜色

            const links = document.querySelectorAll('header nav a');
            links.forEach(link => {
                link.addEventListener('click', function(event) {
                    event.preventDefault();
                    console.log(`You clicked on ${this.textContent}`);
                });
            });
        });
    </script>
</body>
</html>

解释说明：

HTML部分：
- 定义了页面的基本结构，包括一个头部（header）和一个主要内容区域（section）。
- 头部包含一个标题（h1）和导航链接（nav），这些链接使用了锚点（#）。
CSS部分：
- 设置了页面的样式，例如字体、背景颜色、布局等。
- 使用了类选择器（如.container）和标签选择器（如header）来应用样式。
- 通过浮动属性（float）实现了标题和导航栏的左右排列。
JavaScript部分：
- 使用DOMContentLoaded事件确保脚本在DOM完全加载后执行。
- 修改了头部底部边框的颜色，并为每个导航链接添加了点击事件监听器，当用户点击链接时，会在控制台输出相应的信息。

这个示例展示了如何将HTML、CSS和JavaScript结合在一起创建一个简单的网页。

上一篇：js css html

下一篇：js 判断奇数偶数