首先上最终页面效果图:
下面是制作的详细步骤:
1.添加个人信息
个人信息
姓名:
邮件地址:
此时会出现如下效果页面:
2.在个人信息后面添加性别选择信息
请选择性别
男
女
此时会出现如下效果页面:
3.添加意见输入框和提交按钮(下面加粗代码),完整表单的代码如下所示:
个人信息
姓名:
邮件地址:
请选择性别
男
女
意见
请提出意见及建议:
提交
此时会出现如下效果页面:
4.利用css样式修饰表单,第一步:设置页面背景颜色、去掉字段集的边框、修饰字段集标题文字、最后将包含字段集的类.fieldset-wrapper设置背景为白色。
body{
background-color:#D9F7F3;}
fieldset{
border:0;
}
legend{
font-weight:bold;
color:#777;}
.fieldset-wrapper{
background-color:#fff;}
此时会出现如下效果页面:
5.第二步,拉开上下区块的间距:.
.fieldset-wrapper {
background-color:#fff;
margin-top: 10px;
}
6.设置姓名、邮件地址、意见和它们的输入框两行显示,并且最大宽度为20em。
为了区别于性别中的label和input,我们它们加上不同的类,field-text 和field:
class="field-text">
姓名:
class="field-text">
邮件地址:
... ...
class="field">
男
class="field">
女
... ...
class="field-text">
请提出意见及建议:
添加css代码如下:
.field-text{
max-width:20em;}
.field-text label,.field-text input,.field-text textarea{
width:100%;
}
此时会出现如下效果页面:
7.修饰input和textarea输入框,边框为1px大小的灰色线,具有内边距和圆角边框效果:
.field-text input,.field-text textarea{
padding:.375em;
border:1px solid #ccc;
border-radius:.25em;}
此时会出现如下效果页面:
8.输入框获得聚焦效果:蓝色边框且周围有蓝色阴影
.field-text input:focus,.field-text textarea:focus{
box-shadow:0 0 .5em rgba(93, 162, 248, 0.5);
border-color: #5da2f8;
}
此时会出现如下效果页面:
9.拉开性别的单选按钮和文字的间距
.field input {
margin-right: 0.75em;
}
10.最后:修饰提交按钮
button{
border:0;
padding:.5em 1em;
cursor:pointer;
border-radius:.25em;
color:#fff;
background-color:#173b6d;
font-size:1em;
}
至此,该案例便完成了:
领取专属 10元无门槛券
私享最新 技术干货