<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>My Interactive Web Page</title> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { text-align: center; color: #333; } p { font-size: 18px; line-height: 1.5; margin-bottom: 20px; } .container { max-width: 800px; margin: 0 auto; padding: 20px; } .button { display: inline-block; padding: 10px 20px; background-color: #333; color: #fff; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; transition: background-color 0.3s ease; cursor: pointer; } .button:hover { background-color: #666; } </style></head><body> <div class="container"> <h1>Welcome to my interactive web page</h1> <p>This is a simple web page that demonstrates how to use HTML, CSS, and JavaScript to create an interactive user experience.</p> <p>Click the button below to change the background color of the page:</p> <button class="button" onclick="changeBackgroundColor()">Change Color</button> </div> <script> function changeBackgroundColor() { var body = document.querySelector('body'); body.style.backgroundColor = getRandomColor(); } function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } </script></body></html>根据以上代码插入适当的代码,显示更多的内容
时间: 2024-02-10 22:17:45 浏览: 129
-doctype-html-html-lang-en-dir-ltr-head-meta-name:
可以在<div class="container">标签后面添加更多的HTML内容,例如:
<div class="container">
<h1>Welcome to my interactive web page</h1>
<p>This is a simple web page that demonstrates how to use HTML, CSS, and JavaScript to create an interactive user experience.</p>
<p>Click the button below to change the background color of the page:</p>
<button class="button" onclick="changeBackgroundColor()">Change Color</button>
<p>Here is some more content:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>You can add as much content as you want here!</p>
</div>
阅读全文