创建动态网页

测试智商的网站 3个月前 (09-10) 阅读数 639 #在线测试

在现代网页开发中，HTML、CSS 和 JavaScript 是构建动态网页的三个核心技术。本文将通过一个简单的示例，展示如何使用这些技术创建一个具有基本动态功能的网页。我们将创建一个包含按钮的网页，点击按钮后，页面上的文本内容会发生变化。

1. HTML 结构

首先，我们需要一个基本的 HTML 结构来定义页面的内容和布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态网页示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 id="greeting">欢迎来到我的网页！</h1>
        <button id="changeGreetingBtn">点击我改变问候语</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS 样式

接下来，使用 CSS 来美化网页的外观。我们将添加一个简单的样式表来调整文本和按钮的样式。

创建动态网页

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
}

h1 {
    color: #333;
    font-size: 2rem;
    margin-bottom: 1rem;
}

button {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

3. JavaScript 功能

最后，使用 JavaScript 来实现动态功能。我们将编写一个简单的脚本来更改按钮被点击时页面上的文本内容。

// script.js
document.getElementById('changeGreetingBtn').addEventListener('click', function() {
    const greetings = ['你好！', '欢迎光临！', '很高兴见到你！'];
    const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
    document.getElementById('greeting').textContent = randomGreeting;
});