没有了 请给我对应的代码 并给出运行方式
时间: 2024-04-10 16:28:44 浏览: 13
以下是一个简单的示例代码,展示了如何使用HTML、CSS和JavaScript来创建界面,并添加了你所描述的页面元素。你可以将代码保存为一个HTML文件,然后在浏览器中打开该文件来运行。
```html
<!DOCTYPE html>
<html>
<head>
<title>界面设计示例</title>
<style>
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
padding-top: 100px;
}
.button {
background-color: black;
color: white;
border: none;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
}
.input-field {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Resource Modeling</h1>
<button class="button">开始</button>
</div>
<script>
var startButton = document.querySelector('.button');
startButton.addEventListener('click', function() {
window.location.href = "page2.html";
});
</script>
</body>
</html>
```
将上述代码保存为一个名为 `index.html` 的文件,并创建一个新的名为 `page2.html` 的文件,用于第二页的内容。在 `page2.html` 中,你可以根据你的需求添加相应的内容和按钮。
要运行这个界面,只需在浏览器中打开 `index.html` 文件即可。你将看到一个黑色背景的页面,其中包含一个标题和一个开始按钮。单击开始按钮将跳转到第二页。
请注意,这只是一个简单的示例代码,你可以根据自己的需求进行修改和扩展。