css移动端form |css3 盒布局

css引入图标，css 改变icon背景，css预编程是什么，css 块占满屏幕，table表格css属性设置颜色，css选择器覆盖顺序，css3 盒布局 css移动端form |css3 盒布局

// 设置输入框样式
input[type=text], input[type=email], input[type=password] {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 6px;
border: 1px solid #ccc;
box-sizing: border-box;
margin-bottom: 20px;
}
// 设置按钮样式
button[type=submit] {
width: 100%;
background-color: #4CAF50;
color: #fff;
padding: 14px 20px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
}

这些样式可以实现输入框和按钮的基础样式。另外，大家也可以通过CSS的媒体查询来适配不同的屏幕尺寸。例如：

// 在移动端设置输入框样式
@media screen and (max-width: 599px) {
input[type=text], input[type=email], input[type=password] {
font-size: 14px;
padding: 8px;
}
}
// 在移动端设置按钮样式
@media screen and (max-width: 599px) {
button[type=submit] {
font-size: 14px;
padding: 12px 16px;
}
}

这样，大家就可以在不同设备上实现更好的适配效果，让form表单具有更好的可用性。