注: 素材图片路径需要根据实际情况修改
任务3-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册-Q-Walking E&S</title>
</head>
<body>
<!-- 顶部区域start -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="top_line">
<tr>
<td bgcolor="#f7f7f7">
<!-- 此处省略顶部区域代码 -->
</td>
</tr>
</table>
<!-- 顶部区域end -->
<!-- logo和banner start -->
<table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="95"><img src="register/images/logo.jpg" alt=""></td>
<td align="right"><img src="register/images/banner.jpg" alt=""></td>
</tr>
</table>
<!-- logo和banner end -->
<!-- 菜单导航 start -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ce2626">
<tr>
<td>
<!-- 此处省略菜单导航代码 -->
</td>
</tr>
</table>
<!-- 菜单导航 end -->
<!-- 注册部分 start -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f8f8f8">
<tr>
<td>
<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center">
<tr>
<td valign="top"><h2 align="center">用户注册</h2><hr width="90%" align="center" color="#ccc"/></td>
<td width="420" rowspan="2" valign="middle"><img src="images/zhuce_pic.jpg" align="right" alt=""></td>
</tr>
<tr>
<td valign="top">
<form action="#" method="post" enctype="multipart/form-data">
<table width="90%" border="0" cellspacing="0" cellpadding="0" class="reg" align="center">
<tr>
<td width="80">用户名：</td>
<td><input type="text" name="userName" id="userName" value="请输入用户名"></td>
</tr>
<tr>
<td>邮箱地址：</td>
<td><input type="text" name="email" id="email" value="请输入邮箱地址"></td>
</tr>
<tr>
<td>设置密码：</td>
<td><input type="password" name="userPwd" id="userPwd"></td>
</tr>
<tr>
<td> </td>
<td class="gray12">6-20个字符，由字母、数字和符号的两种以上组合。 </td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="userRePwd" id="userRePwd"></td>
</tr>
<tr>
<td>真实姓名：</td>
<td><input type="text" name="realName" id="realName" value="请输入真实姓名"></td>
</tr>
<tr>
<td>您的性别：</td>
<td><input type="radio" name="sex" value="radio" checked>男<input type="radio" name="sex" value="radio">女</td>
</tr>
<tr>
<td>上传头像</td>
<td><input type="file" name="headPic" id="headPic"></td>
</tr>
<tr>
<td>您的手机：</td>
<td><input type="text" name="mobile" id="mobile" value="请输入您的手机号"></td>
</tr>
<tr>
<td>单位名称：</td>
<td><input type="text" name="company" id="company" value="请输入单位名称"></td>
</tr>
<tr>
<td>单位地址：</td>
<td><select name="province">
<option>请选择省份</option>
<option>北京市</option>
<option>上海市</option>
<option>山东省</option>
</select>
<select name="city">
<option>请选择城市</option>
<option>青岛市</option>
<option>济南市</option>
<option>东营市</option>
</select>
<select name="area">
<option>请选择区</option>
<option>四方区</option>
<option>市南区</option>
<option>市北区</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td><input type="text" name="address" id="address" value="请输入街道地址"></td>
</tr>
<tr>
<td>您的爱好：</td>
<td>
<input type="checkbox" name="hobby" value="购物">购物
<input type="checkbox" name="hobby" value="影视">影视
<input type="checkbox" name="hobby" value="餐饮">餐饮
</td>
</tr>
<tr>
<td>协议内容：</td>
<td><textarea cols="30" rows="3"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" value="提交"></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<!-- 三大模块图片 -->
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF" class="padding-bottom">
<tr>
<td align="center"><img src="images/shop.jpg" class="bian" alt=""></td>
<td align="center"><img src="images/movie.jpg" class="bian" alt=""></td>
<td align="center"><img src="images/food.jpg" class="bian" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 注册部分 end -->
<!-- 底部 start -->
<!-- 此处省略版权部分代码 -->
<!-- 底部 end -->
</body>
</html>
运行截图：
任务3-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加商品页面-后台管理系统</title>
</head>
<body>
<div class="place"><span>位置：</span>
<ul class="placeul">
<li><a href="main.html" target="_parent">首页</a></li>
<li><a href="#">添加商品</a></li>
</ul>
</div>
<div class="formbody">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table1">
<tr>
<td><label>商品缩略图<b>*</b></label></td>
<td><input type="file" name="" multiple></td>
</tr>
<tr>
<td><label>商品名称<b>*</b></label></td>
<td><input type="text" name="" class="dfinput" value="请填写商品名称" style="width:518px;"></td>
</tr>
<tr>
<td><label>商品类别<b>*</b></label></td>
<td><select class="select3">
<option>男装</option>
<option>女装</option>
<option>童装</option>
<option>运动</option>
<option>其他</option>
</select>
</td>
</tr>
<tr>
<td><label>商品单价<b>*</b></label></td>
<td><input type="text" name="goodsPrice" class="dfinput" style="width:100px;">元</td>
</tr>
<tr>
<td><label>团购价<b>*</b></label></td>
<td><input type="text" name="groupPrice" class="dfinput" style="width:100px;">元</td>
</tr>
<tr>
<td><label>商品数量<b>*</b></label></td>
<td><input type="text" name="amount" class="dfinput" style="width:100px;">件</td>
</tr>
<tr>
<td><label>发布日期<b>*</b></label></td>
<td><input type="text" name="upTime" class="dfinput" style="width:100px;"></td>
</tr>
<tr>
<td><label>是否审核<b>*</b></label></td>
<td><select name="checkup" class="select3">
<option>已审核</option>
<option>未审核</option>
</select>
</td>
</tr>
<tr>
<td><label>商品描述<b>*</b></label></td>
<td><textarea name="content" rows="3" id="content"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="马上发布" class="btn"></td>
</tr>
</table>
</div>
</body>
</html>
运行截图：
