请编写一份带有css样式和js功能的html页面
时间: 2024-02-28 15:54:24 浏览: 15
好的,以下是一份简单的带有CSS样式和JS功能的HTML页面:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的页面</title>
<style>
body {
background-color: #f2f2f2;
font-family: sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
h1 {
color: #333;
font-size: 36px;
margin: 40px 0 20px;
text-align: center;
}
p {
color: #666;
line-height: 1.5;
margin: 0 0 20px;
text-align: justify;
}
button {
background-color: #007bff;
border: none;
border-radius: 20px;
color: #fff;
cursor: pointer;
font-size: 20px;
padding: 10px 20px;
}
button:hover {
background-color: #0069d9;
}
</style>
</head>
<body>
<h1>欢迎来到我的页面</h1>
<p>这是一个简单的页面,用于演示如何添加CSS样式和JS功能。</p>
<button id="myButton">点击我</button>
<script>
// 获取按钮元素
var myButton = document.getElementById("myButton");
// 添加点击事件
myButton.addEventListener("click", function() {
alert("你点击了按钮!");
});
</script>
</body>
</html>
```
这份代码包含了一个标题、一段文字、一个按钮以及一个JS函数。CSS样式用于美化页面,JS函数用于添加按钮的点击事件。当用户点击按钮时,将会弹出一个提示框,显示“你点击了按钮!”的信息。