编程笔记 html5&css&js 055 CSS颜色表
以下是一个简单的HTML和CSS代码示例，展示了如何创建一个CSS颜色表，并且可以通过点击每个颜色块来查看对应的十六进制颜色代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Color Palette</title>
<style>
.color-box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #000;
line-height: 100px;
text-align: center;
user-select: none;
cursor: pointer;
}
.color-box:hover {
border-color: #fff;
}
</style>
</head>
<body>
<div class="color-box" style="background-color: #ff0000;" data-color="ff0000">FF0000</div>
<div class="color-box" style="background-color: #00ff00;" data-color="00ff00">00FF00</div>
<div class="color-box" style="background-color: #0000ff;" data-color="0000ff">0000FF</div>
<!-- 更多颜色块... -->
<script>
document.querySelectorAll('.color-box').forEach(function(box) {
box.addEventListener('click', function() {
alert('Color HEX: #' + box.dataset.color.toUpperCase());
});
});
</script>
</body>
</html>这段代码中，.color-box 类定义了颜色块的样式，每个颜色块都有一个对应的十六进制颜色代码作为 data-color 属性的值。当用户点击颜色块时，JavaScript会通过 alert 弹出对应颜色的十六进制代码。这个示例提供了一个简单的方法来教学和演示CSS颜色表的使用。
评论已关闭