本文介绍了一种使用CSS进行网页元素布局的设计方案，包括背景颜色、阴影效果及响应式交互等特性。通过具体的选择器和属性设置，展示了如何实现美观且交互良好的用户界面。
CSS
语言：
CSSSCSS
确定
body {
background-color: #22313f;
}
#keys {
height: 116px;
width: 672px;
padding-right: 10px;
padding-top: 50px;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box {
width: 80px;
height: 80px;
margin-left: 10px;
float: left;
border-radius: 10px;
display: block;
}
#a {
background-color: #e040fb;
box-shadow: 0px 6px 0px #a0f;
}
#b {
background-color: #7c4dff;
box-shadow: 0px 6px 0px #6200ea;
}
#c {
background-color: #448aff;
box-shadow: 0px 6px 0px #2962ff;
}
#d {
background-color: #9ccc65;
box-shadow: 0px 6px 0px #2e7d32;
}
#e {
background-color: #fff176;
box-shadow: 0px 6px 0px #ffd600;
}
#f {
background-color: #ffb74d;
box-shadow: 0px 6px 0px #ff9100;
}
#g {
background-color: #ff7043;
box-shadow: 0px 6px 0px #f4511e;
}
#a:active,
#b:active,
#c:active,
#d:active,
#e:active,
#f:active,
#g:active {
box-shadow: none;
margin-top: 5px;
}
#a:active {
background-color: #a0f;
}
#b:active {
background-color: #6200ea;
}
#c:active {
background-color: #2962ff;
}
#d:active {
background-color: #2e7d32;
}
#e:active {
background-color: #ffd600;
}
#f:active {
background-color: #ff9100;
}
#g:active {
background-color: #f4511e;
}
扫一扫
1772
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
