html5&css&js代码 015 列表元素
HTML5, CSS 和 JavaScript 代码示例，用于创建一个带有动态效果的简单列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple List</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
background-color: #f9f9f9;
border-bottom: 1px solid #eee;
padding: 10px;
transition: all 0.3s;
}
li:hover {
background-color: #eee;
}
</style>
</head>
<body>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script>
// JavaScript 代码用于添加新列表项
function addNewItem() {
var list = document.getElementById("myList");
var newItem = document.createElement("li");
newItem.innerHTML = "New Item";
list.appendChild(newItem);
}
</script>
<button onclick="addNewItem()">Add New Item</button>
</body>
</html>这段代码展示了如何创建一个简单的列表，并使用CSS为列表元素添加了一些样式。同时，使用JavaScript可以添加新的列表项。还有一个按钮用于触发添加新列表项的动作。这个示例简单直观，适合作为初学者学习HTML、CSS 和 JavaScript 列表处理的教学资料。
评论已关闭