js css html

作者：尒忸旳迣鎅゛沬卜鋽旳凄涼发布日期:2025-05-28 浏览:132

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS CSS HTML Example</title>
    <style>
        /* CSS部分：设置背景颜色和文本样式 */
        body {
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        .container {
            width: 50%;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
    <!-- HTML部分：页面结构 -->
    <div class="container">
        <h1>欢迎来到我的网页</h1>
        <p>这是一个使用HTML、CSS和JavaScript创建的简单示例。</p>
        <button id="myButton">点击我</button>
    </div>

    <!-- JavaScript部分：添加交互功能 -->
    <script>
        // 获取按钮元素
        const button = document.getElementById('myButton');

        // 添加点击事件监听器
        button.addEventListener('click', function() {
            alert('你点击了按钮！');
        });
    </script>
</body>
</html>

解释说明：

HTML部分：定义了页面的基本结构，包括一个标题 (<h1>), 一段文本 (<p>), 和一个按钮 (<button>).
CSS部分：通过内联 <style> 标签定义样式，设置了页面的背景颜色、字体、容器的宽度和阴影效果等。
JavaScript部分：通过 <script> 标签添加了一个简单的交互功能，当用户点击按钮时会弹出一个提示框。

上一篇：js display

下一篇：js html css