效果图如下:
1、构思:
首先,这事一个表格结构的注册表,总体分为三部分,1.会员登录名和密码,2.姓名和联系方式,3.公司名称和主营业务;我们可以把表格分成表头,表身,表尾;用代码实现为:
先创建一个表格分成三部分:
<table width="1000" align="center" cellpadding="10" cellspacing="0"><!--表格-->
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
说明:<table></table>标签创建出一个大的表格,其中<table>标签的几个重要的元素,width控制表格的宽度;align控制表格的对齐方式;cellpadding控制行中文字在表格中和表格上下边框的距离,cellpadding控制单元格之间的空白。
2、在表格里面使用几个重要的标签进行表格的分解
<tr> 绘制表格的行
<th>表头单元格,用来绘制表头,显示的字会比较大一点。
<td>绘制表格的列
<input>根据不同type属性,来创建文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<style>创建CSS样式
3、跨行跨列
如果需要将内容横跨多个行或列,使用 colspan属性来合并行,和 rowspan 属性来合并列。
最后完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day1注册页面</title>
<script type="text/javascript">
function msg(){
alert("用户名检测完成");
}
</script>
<style type="text/css">
/**设置table颜色**/
table,td,th{
border:1px solid #F2F2F2;
}
/**最后的提交按钮**/
#submitbutton{
height:30px;
width:100px;
background-color:#00CD00;
color:white;/**字体颜色**/
font-size:20px;
}
</style>
</head>
<body>
<table width="1000" align="center" cellpadding="10" cellspacing="0"><!--表格-->
<thead><!-- 表头 -->
<tr style="background:#F8F8FF" height="30"><!--tr 为行 -->
<th align="left" colspan="3">1.会员登录名和密码</th><!-- th定义表头 -->
</tr>
<tr>
<td width="120" align="right">
用户名:
</td>
<td style="color:red">
<input type="text"> *
</td>
<td width="500" style="color:#1E90FF">
<input type="button" value="用户名检测" οnclick="msg()"/>
5-15位,请使用英文(a-z、A-Z)、数字(0-9)
</td>
</tr>
<tr>
<td width="120" align="right">
密码:
</td>
<td style="color:red">
<input type="text"/>*
</td>
<td width="500" align="left" style="color:#1E90FF">
5-15位,请使用英文(a-z)、数字(0-9)注意区分大小写:<br>
密码不能与登录名相同,易记,难猜
</td>
</tr>
<tr>
<td width="120" align="right">
再次输入密码:
</td>
<td style="color:red">
<input type="text"/>*
</td>
<td width="500" style="color:#1E90FF">
两次输入密码必须一致
</td>
</tr>
</thead>
<tbody><!-- 表身 -->
<tr style="background:#F8F8FF">
<th align="left" colspan="3">2.姓名和联系方式</th>
</tr>
<tr>
<td align="right">
真实姓名:
</td>
<td style="color:red">
<input type="text"/>*
</td>
<td>
<input type="radio" name="sex" value="先生"/>先生
<input type="radio" name="sex" value="女士"/>女士
</td>
</tr>
<tr>
<td align="right">
电子邮箱:
</td>
<td style="color:red">
<input type="email"/>*
</td>
<td>
<h style="color:red">非常重要!</h><br/>
<h style="color:#1E90FF">这是客户与您联系的首选方式,请一定填写真实。</h>
</td>
</tr>
<tr>
<td align="right">
固定电话:
</td>
<td style="color:red">
<input type="text"/>*
</td>
<td style="color:#1E90FF">
区号+电话号码
</td>
</tr>
<tr>
<td align="right">
公司所在地:
</td>
<td colspan="2">
<select style="width:70px;height:25px">
<option>北京</option>
<option>广州</option>
<option>湛江</option>
<option>长沙</option>
</select>
<select style="width:70px;height:25px">
<option>北京</option>
<option>广州</option>
<option>湛江</option>
<option>长沙</option>
</select>
</td>
</tr>
<tr>
<td align="right">
街道地址:
</td>
<td colspan="2" style="color:red">
<input type="text" style="height:20px;width:500px"/>*
<h style="color:#1E90FF">填写县区门牌号</h>
</td>
</tr>
<tr>
<td align="right">
传真号码:
</td>
<td colspan="2">
<input type="tel"/>
</td>
</tr>
<tr>
<td align="right">
手机号码:
</td>
<td colspan="2">
<input type="tel"/>
</td>
</tr>
<tr>
<td align="right">
邮政编码:
</td>
<td colspan="2">
<input type="text"/>
</td>
</tr>
</tbody>
<tfoot><!-- 表尾 -->
<tr style="background:#F8F8FF">
<th align="left" colspan="3">3.公司名称和主营业务</th>
</tr>
<tr>
<td align="right">
贵公司名称:
</td>
<td style="color:red">
<input type="text"/>*
</td>
<td style="color:#1E90FF">
请填写在工商局注册的公司/商号全称;<br/>
无商号的个体经营者填写执照上的姓名,如:张三(个体经营)
</td>
</tr>
<tr>
<td align="right">
你的职位:
</td>
<td style="color:red">
<input type="text"/>*
</td>
<td>
</td>
</tr>
<tr>
<td align="right">
主营行业:
</td>
<td>
<select>
<option>电子电工</option>
<option>学生</option>
<option>工程师</option>
</select>
</td>
<td style="color:#1E90FF">
请正确选择,您会收到该行业、该产品的供求信息
</td>
</tr>
<tr>
<td align="right">
主营产品/服务:
</td>
<td colspan="2" style="color:red">
<input type="text"/>*
<h style="color:#1E90FF">3个主要相关产品名/服务名,最少要填一个。例如:太阳帽、布料、拉链</h>
</td>
</tr>
<tr>
<td align="right">
公司网址:
</td>
<td colspan="2">
<input type="url" style="height:18px;width:300px"/>
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
<input type="submit" id="submitbutton" value="确认提交"/>
</td>
</tr>
</tfoot>>
</table>
</body>
</html>