欢迎各位复制粘贴
往下看
网页body内容:
<body>
<div class="one">
<h1>用户注册</h1>
<form id="form1" name="form1" method="post" action="">
<p>账号:
<input type="text" name="textfield" id="textfield" />
</p>
<p>密码:
<input type="password" name="textfield2" id="textfield2" />
</p>
<p>性别:
男 <input type="radio" name="sex" value="男">
女 <input type="radio" name="sex" value="女">
</p>
<p>注册日期:
<input type="date"/>
</p>
<p>收入:
<select name="select" id="select">
<option selected="selected">3万</option>
<option>4万</option>
<option>5万</option>
<option>6万</option>
</select>
</p>
<p>爱好:
<input type="checkbox"/><label>看电影
<input type="checkbox"/></label>听歌
<label><input type="checkbox"/></label>游泳
<label><input type="checkbox" /> </label>跑步
</p>
<p>职业:
<span class="STYLE1">
<select name="select2" id="select2">
<option selected="selected">律师</option>
<option>教师</option>
<option>公务员</option>
<option>学生</option>
</select>
</span> </p>
<p>年龄:
<input type="number" value="19" />
</p>
<p>电子邮箱:
<input type="email" name="email"/>
</p>
<p>个人介绍 :
<textarea name="textarea"cols="29" rows="5"></textarea>
</p>
<p>
<input type="submit" name="button" value="提交" />
<input type="reset" name="button2" value="重置" />
</div>
<div class="foot">
<h2>制作人:is xiaobai </h2>
</div>
</body>
没加css时效果图
网页css内容:
<style>
h1{
font-family: 华文新魏;
text-align: center;
font-size: 40px;
}
body{
text-align: left;
background-image: url(../图片/RC.jfif);/*括号里是图片路径*/
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.one{
height: 650px;
width: 350px;
padding-left: 10px;
border: dashed 1px rgb(214, 168, 160);/*添加边框样式 边框粗细 边框颜色*/
margin: 0 auto;/*使表单居中*/
border-radius: 30px;
background-color: rgba(214, 136, 136, 0.3)
}
input[type=text]{
height: 25px;
width: 170px;
}
input[type=password]{
height: 25px;
width: 170px;
}
input[type=submit]{
height: 40px;
width: 70px;
color: rgb(87, 226, 226);
font-size: unset;
background-color: rgb(134, 125, 125);
}
input[type=reset]{
height: 40px;
width: 70px;
color: rgb(87, 226, 226);
font-size: unset;
background-color: rgb(134, 125, 125);
}
.foot{
color: #55585a;
text-align: right;
font-family: 华文新魏;
font-size: 20px;
}
</style>
完整效果图
谢谢大家 看完本人成果,
刚学没多久 希望在这记录自己的成长。