该图就是最终要完成的效果,简单分析一下改图的整体结构,以及需要用到的标签及属性。这里我是直接创建一个表单,然后在表单中创建一个十行一列的表格。以下为最终效果的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="img/bg.jpg">
<form action="" method="get">
<table border="0" cellspacing="0">
<tr>
<td height="30">
邮箱账号: <input type="text" name="邮箱账号">
<!--创建邮箱下拉选框-->
<select>
<option>QQ.com</option>
<option>163.com</option>
<option>jd.com</option>
<option>126.com</option>
</select>
</td>
</tr>
<tr>
<td height="30">
昵称: <input type="text" name="昵称" placeholder="请输入昵称">
</td>
</tr>
<tr>
<td height="30">
密码: <input type="password" name="password" placeholder="请输入密码">
</td>
</tr>
<tr>
<td height="30">
确认密码: <input type="password" name="repassword" placeholder="确认密码">
</td>
</tr>
<tr>
<td height="30">
性别: <input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女
</td>
</tr>
<tr>
<td height="30">
生日
<!--创建年历下拉选框-->
<select>
<option value="1">公历</option>
<option value="2">农历</option>
</select>
<!--创建年份下拉选框-->
<select name="year">
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3" selected="selected">2003</option>
<option value="4">2004</option>
</select>
<!--创建月份下拉选框-->
<select name="month">
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5" selected="selceted">五月</option>
</select>
<!--创建具体天数下拉选框-->
<select name="day">
<option value="1">一日</option>
<option value="2">二日</option>
<option value="3">三日</option>
<option value="4">四日</option>
<option value="5" selected="selected">五日</option>
</select>
<!--通过定义option标签中selected的值为selected即可使得该项为默认展示的项-->
</td>
</tr>
<tr>
<td height="30">
所在地
<!--创建国籍下拉选框-->
<select name="国籍">
<option value="1">中国</option>
<option value="2">美国</option>
<option value="3">俄罗斯</option>
</select>
<!--创建省份下拉选框-->
<select>
<option value="1">北京</option>
<option value="2" selected="selected">湖南</option>
<option value="3">湖北</option>
<option value="4">江苏</option>
</select>
<!--创建市级下拉选框-->
<select>
<option value="1" selected="selected">长沙</option>
<option value="2">东城区</option>
<option value="3">武汉</option>
<option value="4">南京</option>
</select>
</td>
</tr>
<tr>
<td height="30">
验证码 <input type="text" name="验证码" placeholder="请输入验证码">
<input type="image" src="img/getimage.jpg" height="30">
</td>
</tr>
<tr>
<td height="50">
<input type="checkbox" name="选择框" value="re">
<font>我已阅读并同意各项<a href="">服务条款</a></font>
</td>
</tr>
<tr>
<td align="center">
<input type="image" src="img/btn.jpg" height="40">
</td>
</tr>
</table>
</form>
</body>
</html>