html颜色选择器代码
<!DOCTYPE html>
<html>
<head>
<title>HTML颜色选择器</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.color-box {
width: 150px;
height: 150px;
margin: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.color-box:hover {
transform: scale(1.1);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h1>HTML颜色选择器</h1>
<div class="container">
<div class="color-box" style="background-color: #000000;">#000000</div>
<div class="color-box" style="background-color: #ffffff;">#ffffff</div>
<div class="color-box" style="background-color: #ff0000;">#ff0000</div>
<div class="color-box" style="background-color: #00ff00;">#00ff00</div>
<div class="color-box" style="background-color: #0000ff;">#0000ff</div>
<div class="color-box" style="background-color: #ffff00;">#ffff00</div>
<div class="color-box" style="background-color: #ff00ff;">#ff00ff</div>
<div class="color-box" style="background-color: #00ffff;">#00ffff</div>
<div class="color-box" style="background-color: #800000;">#800000</div>
<div class="color-box" style="background-color: #008000;">#008000</div>
<div class="color-box" style="background-color: #000080;">#000080</div>
<div class="color-box" style="background-color: #808000;">#808000</div>
<div class="color-box" style="background-color: #800080;">#800080</div>
<div class="color-box" style="background-color: #008080;">#008080</div>
<div class="color-box" style="background-color: #c0c0c0;">#c0c0c0</div>
<div class="color-box" style="background-color: #808080;">#808080</div>
</div>
</body>
</html>
这是一个基本的HTML颜色选择器代码，其中包含了一些预定义的颜色值，可以根据需要进行修改和添加。代码中使用了flex布局和CSS过渡效果，使得颜色框在鼠标悬停时有一个放大和阴影效果，增强了用户体验。可以将这个代码嵌入到网页中，作为一个简单的颜色选择器，方便用户选择和使用颜色。
