本阶段主要学习一下知识点：
1、先来看一些HTML表单标签，我已经整理出来了，欢迎大家借鉴，欢迎大家补充。
2、标签的基本样式和属性
接下来我们开始做实际练习，效果图如下
代码如下：欢迎同学借鉴，可根据个人进行修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单练习</title>
</head>
<style>
*{
list-style: none;
}
body{
background: url(images/bg.jpg) no-repeat;
background-position: center 0;
}
.bigBox{
width: 600px;
height: 700px;
text-align: center;
margin: 0 auto;
border: 1px solid gray;
background-color: #fff;
opacity: 0.5;
}
h2{
display: inline-block;
text-align: center;
}
ul li{
margin: 20px;
}
.txtBox{
width: 300px;
height: 25px;
}
.logo{
width: 70px;
height: 70px;
}
.btn{
width: 80px;
height: 30px;
margin: 25px 25px 0;
}
</style>
<body>
<form action="#">
<div class="bigBox">
<div>
<img src="images/logo.png" class="logo">
<h2>用户注册</h2>
</div>
<form action="#">
<ul>
<li>
<label>用户账号：</label><input type="text" placeholder="请输入你的名字！" class="txtBox" name="username">
</li>
<li>
<label>用户密码：</label><input type="password" placeholder="请输入你的密码！" class="txtBox" name="pwsd">
</li>
<li>
<label>重置密码：</label><input type="password" placeholder="请输入你的确认密码！" class="txtBox" name="pwsdag">
</li>
<li>
<label>电子邮箱：</label><input type="email" placeholder="请输入你的邮箱！" class="txtBox" name="email">
</li>
<li>
<label>性      别：</label><input type="radio" name="sex" class="sex">男<input type="radio" name="sex">女
</li>
<li>
<label>职      业：</label>
<select style="..." value="1" class="txtBox">
<option value="1">学生</option>
<option value="2">教师</option>
</select>
</li>
<li>
<label>爱      好：</label>
<textarea name="" id="1" cols="36" rows="10"></textarea>
</li>
<button class="btm" type="submit">注册</button>
<button class="btm" type="reset">登录</button>
</ul>
</form>
</div>
</form>
</body>
</html>
以上代码是在老师的讲解下做的练习！！！！
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
