以下是一个幼儿园手工制作留声机的成品摆放示例:
.container {
margin-top: 50px;
}
.record-player {
width: 200px;
height: 200px;
background-color: #333;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
position: relative;
}
.player-body {
width: 80%;
height: 80%;
background-color: #555;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.speaker-grille {
width: 40%;
height: 40%;
background-color: #777;
border-radius: 5px;
position: absolute;
top: 10%;
left: 10%;
}
.turntable {
width: 60%;
height: 60%;
background-color: #999;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.record {
width: 80%;
height: 80%;
background-color: #bbb;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.grooves {
width: 90%;
height: 90%;
border-radius: 50%;
border: 2px solid #ddd;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spindle {
width: 20%;
height: 20%;
background-color: #333;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tone-arm {
width: 30%;
height: 50%;
position: absolute;
top: 30%;
left: 10%;
}
.arm {
width: 100%;
height: 80%;
background-color: #333;
border-radius: 5px;
}
.cartridge {
width: 50%;
height: 20%;
background-color: #555;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.player-base {
width: 90%;
height: 20%;
background-color: #333;
border-radius: 5px;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
}
.knobs {
width: 40%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.knob {
width: 30%;
height: 50%;
background-color: #555;
border-radius: 50%;
float: left;
margin: 0 10%;
}
这个 HTML 代码创建了三个 1:1 比例的手工制作留声机模型,使用 CSS 定义了它们的外观和样式。这些留声机可以摆放在幼儿园教室的桌子或其他适当的位置上,供孩子们观察和探索。通过这种方式,孩子们可以直观地了解留声机的结构和工作原理,同时也可以发挥创意,装饰自己的作品。
查看详情
查看详情