CSS 实现小黑板，打造专属创作空间

2023-11-16 19:48:46

引言

小黑板是一种常见且实用的工具，在教室、会议室和家庭中广泛使用。它可以用来记笔记、写备忘或进行头脑风暴。随着计算机和互联网的普及，人们开始将小黑板搬到了数字世界。使用 CSS，我们可以轻松实现小黑板效果，打造一个专属的创作空间。

实现步骤

创建一个 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="blackboard">
    <h1>小黑板</h1>
    <p>这是一个用 CSS 实现的小黑板。您可以在这里记笔记、写备忘或进行头脑风暴。</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

创建一个 CSS 文件，并添加以下代码：

#blackboard {
  width: 600px;
  height: 400px;
  background-color: black;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 16px;
  padding: 20px;
  margin: 20px auto;
}

#blackboard h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

#blackboard p {
  margin-bottom: 20px;
}

创建一个 JavaScript 文件，并添加以下代码：

// 获取小黑板元素
const blackboard = document.getElementById('blackboard');

// 添加鼠标按下事件监听器
blackboard.addEventListener('mousedown', function(e) {
  // 获取鼠标位置
  const x = e.clientX - blackboard.offsetLeft;
  const y = e.clientY - blackboard.offsetTop;

  // 创建一个新的 div 元素
  const newDiv = document.createElement('div');

  // 设置 div 元素的样式
  newDiv.style.position = 'absolute';
  newDiv.style.left = `${x}px`;
  newDiv.style.top = `${y}px`;
  newDiv.style.width = '10px';
  newDiv.style.height = '10px';
  newDiv.style.backgroundColor = 'white';

  // 将 div 元素添加到小黑板上
  blackboard.appendChild(newDiv);
});

常见问题解答

小黑板的背景颜色可以更改吗？

可以的。在 CSS 文件中，您可以更改 #blackboard 元素的 background-color 属性来更改小黑板的背景颜色。
小黑板上的文字可以编辑吗？

不可以。目前，我们还没有实现小黑板上的文字编辑功能。
小黑板上的图形可以擦除吗？

不可以。目前，我们还没有实现小黑板上的图形擦除功能。