html css js网页设计

作者：妖孽少年发布日期:2026-07-25 浏览:89

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML CSS JS 网页设计示例</title>
    <style>
        /* 简单的CSS样式 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎来到 HTML CSS JS 网页设计示例</h1>
        <p>这是一个简单的网页设计示例，结合了 HTML、CSS 和 JavaScript。</p>
        <button id="myButton">点击我</button>
        <p id="message"></p>
    </div>

    <script>
        // 简单的JavaScript代码
        document.getElementById('myButton').addEventListener('click', function() {
            document.getElementById('message').textContent = '你点击了按钮！';
        });
    </script>
</body>
</html>

解释说明：

HTML部分:
- 定义了一个基本的HTML结构，包括<head>和<body>标签。
- 在<body>中创建了一个包含标题、段落和按钮的容器。
CSS部分:
- 使用内联<style>标签定义了一些简单的样式规则。
- 设置了页面的整体样式（如字体、背景颜色等），并为按钮添加了交互效果（如鼠标悬停时改变背景颜色）。
JavaScript部分:
- 使用<script>标签添加了一段简单的JavaScript代码。
- 当用户点击按钮时，会触发一个事件监听器，将一段文本显示在页面上。

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

上一篇：js html转pdf

下一篇：js转html