css简单表单 |css 背景平铺简写

下面是一个简单的CSS表单示例，展示了如何通过CSS样式设计来创建一个简单的表单：

<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<input type="submit" value="登录">
</form>

以上是HTML表单代码，下面是CSS样式代码：

form {
display: inline-block;
width: 300px;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
border-radius: 5px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 3px;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}

通过以上CSS样式设计，大家可以让表单更加美观与易用，用户可以更方便地输入内容，并点击提交按钮进行提交。

总的来说，CSS表单样式的设计可以让网页更加美观、易用，使用户使用网站更加便捷。所以，对于网页制作人员来说，熟练掌握CSS表单样式设计技巧，是一个不可或缺的技能。