CSS消息列表的盒子怎么寫(xiě)

在CSS中，我們可以使用各種樣式來(lái)創(chuàng)建一個(gè)消息列表的盒子，這個(gè)盒子可以是一個(gè)簡(jiǎn)單的div元素，通過(guò)CSS樣式來(lái)裝飾它，使其看起來(lái)像一個(gè)消息列表的盒子。

我們需要在HTML中創(chuàng)建一個(gè)div元素，這個(gè)元素將作為消息列表的容器。

<div id="message-list-box"></div>

我們可以在CSS中為這個(gè)div元素添加一些樣式，使其看起來(lái)像一個(gè)消息列表的盒子。

#message-list-box {
  width: 300px;
  height: 500px;
  border: 1px solid #000;
  padding: 10px;
  margin: 20px;
  box-shadow: 5px 5px 10px #888;
}

這個(gè)樣式將創(chuàng)建一個(gè)寬度為300像素、高度為500像素的盒子，并給它添加了一些邊框、內(nèi)邊距和外邊距，還給它添加了一個(gè)盒陰影，使其看起來(lái)更加立體。

我們需要在JavaScript中添加一些邏輯來(lái)動(dòng)態(tài)地向這個(gè)盒子中添加消息列表。

var messageList = [
  { text: "這是一條消息", time: "2023-03-16 12:00:00" },
  { text: "這是另一條消息", time: "2023-03-16 12:30:00" },
  { text: "這是一條新的消息", time: "2023-03-16 12:45:00" }
];
var box = document.getElementById("message-list-box");
for (var i = 0; i < messageList.length; i++) {
  var message = messageList[i];
  var listItem = document.createElement("li");
  listItem.innerHTML = message.text + " - " + message.time;
  box.appendChild(listItem);
}

這個(gè)JavaScript代碼將創(chuàng)建一個(gè)消息列表數(shù)組，并動(dòng)態(tài)地向盒子中添加每個(gè)消息列表項(xiàng)，每個(gè)消息列表項(xiàng)都是一個(gè)li元素，包含消息的文本和時(shí)間。

我們可以使用CSS樣式來(lái)創(chuàng)建一個(gè)消息列表的盒子，并使用JavaScript來(lái)動(dòng)態(tài)地向其中添加消息列表。