帮我再写一个比较实用的html页面吧
时间: 2023-08-28 19:20:51 浏览: 41
当然可以!以下是一个简单的实用的HTML页面示例,内容是一个待办事项列表。
```html
<!doctype html>
<html>
<head>
<title>待办事项列表</title>
<style>
body {
background-color: #F9F9F9;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: #333;
font-size: 36px;
margin-top: 50px;
}
.todo-list {
display: inline-block;
margin-top: 30px;
text-align: left;
border: 1px solid #CCC;
padding: 10px;
border-radius: 5px;
background-color: #FFF;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 500px;
width: 100%;
}
.todo-item {
margin-bottom: 10px;
padding-left: 20px;
position: relative;
line-height: 1.5;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.todo-item input[type="checkbox"] {
position: absolute;
left: 0;
top: 2px;
}
.todo-item.completed label {
text-decoration: line-through;
color: #999;
}
.todo-item button {
border: none;
background-color: transparent;
color: #999;
cursor: pointer;
font-size: 14px;
position: absolute;
right: 0;
top: 0;
}
.todo-item button:hover {
color: #333;
text-decoration: underline;
}
.todo-item input[type="text"] {
border: none;
border-bottom: 1px solid #CCC;
font-size: 16px;
padding: 5px;
width: 80%;
}
.todo-item input[type="text"]:focus {
border-color: #333;
outline: none;
}
</style>
</head>
<body>
<h1>我的待办事项</h1>
<div class="todo-list">
<div class="todo-item">
<input type="checkbox" id="item1">
<label for="item1">学习HTML</label>
<button class="delete-btn" title="删除该项">X</button>
</div>
<div class="todo-item">
<input type="checkbox" id="item2">
<label for="item2">学习CSS</label>
<button class="delete-btn" title="删除该项">X</button>
</div>
<div class="todo-item">
<input type="checkbox" id="item3" checked>
<label for="item3">学习JavaScript</label>
<button class="delete-btn" title="删除该项">X</button>
</div>
<div class="todo-item">
<input type="checkbox" id="item4">
<label for="item4">学习Python</label>
<button class="delete-btn" title="删除该项">X</button>
</div>
<div class="todo-item">
<input type="checkbox" id="item5">
<label for="item5">学习机器学习</label>
<button class="delete-btn" title="删除该项">X</button>
</div>
<div class="todo-item">
<input type="text" placeholder="添加新的待办事项" id="new-item">
<button class="add-btn">添加</button>
</div>
</div>
<script>
// 删除待办事项
var deleteButtons = document.querySelectorAll('.delete-btn');
deleteButtons.forEach(function(button) {
button.addEventListener('click', function(event) {
event.target.parentNode.remove();
});
});
// 添加新的待办事项
var addButton = document.querySelector('.add-btn');
var newItemInput = document.querySelector('#new-item');
addButton.addEventListener('click', function() {
if (newItemInput.value.trim() !== '') {
var newItem = document.createElement('div');
newItem.classList.add('todo-item');
newItem.innerHTML = '<input type="checkbox"><label>' + newItemInput.value.trim() + '</label><button class="delete-btn" title="删除该项">X</button>';
document.querySelector('.todo-list').insertBefore(newItem, newItemInput.parentNode);
newItemInput.value = '';
// 给新的删除按钮添加事件监听器
newItem.querySelector('.delete-btn').addEventListener('click', function(event) {
event.target.parentNode.remove();
});
}
});
</script>
</body>
</html>
```
这个HTML页面包括一个标题、一个实用的待办事项列表,用户可以添加、删除和标记完成待办事项。整个页面都有一个样式,使它易于阅读和浏览。在页面底部的JavaScript代码中,我们使用了DOM API来添加事件监听器并响应用户的交互。