JavaScript 网页设计入门案例_js 列表里面的标题样式例子-优快云博客

以下是一个简单的 JavaScript 网页设计案例：一个带有交互功能的待办事项列表网页。

1. 页面结构（HTML）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>To - Do List</title>
</head>

<body>
  <h1>My To - Do List</h1>
  <input type="text" id="newTask" placeholder="Add a new task">
  <button onclick="addTask()">Add Task</button>
  <ul id="taskList"></ul>
  <script src="script.js"></script>
</body>

</html>

在这个 HTML 代码中：

定义了一个页面标题My To - Do List。
有一个文本输入框（id="newTask"）用于输入新的待办事项，还有一个按钮，点击按钮时会调用addTask函数（这个函数将在 JavaScript 中定义）来添加任务。
一个无序列表（id="taskList"）用于显示待办事项列表。

2. 样式设计（CSS - 放在 styles.css 文件中）

body {
  font-family: Arial, sans - serif;
  background - color: #f4f4f4;
}

h1 {
  text - align: center;
  color: #333;
}

input[type="text"] {
  padding: 10px;
  width: 300px;
  margin - right: 10px;
}

button {
  padding: 10px 20px;
  background - color: #007BFF;
  color: white;
  border: none;
  border - radius: 5px;
  cursor: pointer;
}

ul {
  list - style - type: none;
  padding: 0;
  width: 300px;
  margin: 20px auto;
}

li {
  background - color: white;
  padding: 10px;
  margin - bottom: 5px;
  border - radius: 5px;
  display: flex;
  justify - content: space - between;
  align - items: center;
}

li button {
  background - color: #FF4136;
  color: white;
  border: none;
  padding: 5px 10px;
  border - radius: 3px;
  cursor: pointer;
}

这段 CSS 代码主要用于设置页面的外观：

整个页面的字体、背景颜色等基本样式。
标题居中显示，颜色为灰色。
输入框和按钮的样式，包括大小、颜色、边框等。
待办事项列表（无序列表）的样式，如去除默认的列表样式、设置背景颜色和间距等，每个列表项（li）也有自己的样式，并且包含一个用于删除任务的按钮样式。

3. 功能实现（JavaScript - 放在 script.js 文件中）

function addTask() {
  var newTask = document.getElementById("newTask").value;
  if (newTask!== "") {
    var taskList = document.getElementById("taskList");
    var listItem = document.createElement("li");
    listItem.innerHTML = newTask + " <button onclick='removeTask(this)'>Delete</button>";
    taskList.appendChild(listItem);
    document.getElementById("newTask").value = "";
  }
}

function removeTask(button) {
  var listItem = button.parentElement;
  var taskList = listItem.parentElement;
  taskList.removeChild(listItem);
}

在 JavaScript 代码中：

addTask函数用于添加新的待办事项。首先获取输入框中的内容，如果内容不为空，则创建一个新的列表项（li）元素，将输入的任务内容和一个删除按钮添加到列表项中，然后将列表项添加到待办事项列表（taskList）中，最后清空输入框。
removeTask函数用于删除任务。它通过获取按钮的父元素（列表项），再获取列表项的父元素（待办事项列表），然后从待办事项列表中删除这个列表项，从而实现删除任务的功能。

这是一个基本的 JavaScript 网页设计案例，通过 HTML 构建页面结构、CSS 设计样式、JavaScript 实现交互功能，创建了一个简单但实用的待办事项列表网页。