Web前端学习记录(四)

1.用户注册页面:
预览如下:
在这里插入图片描述
在这里插入图片描述
register.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>用户注册-Q-Walking E&S</title>
	<link href="css/register.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<!--顶部区域 start-->
  <table bgcolor="gray" width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td bgcolor="#f7f7f7"><table width="1200" align="center" bgcolor="red" cellspacing="0">
          <tr>
            <td><img src="images/star.jpg">收藏|hi,欢迎来订购<a href="#">[请登录]</a><a href="#">[免费注册]</a></td>
            <td align="right">客户服务<img src="images/arrow.gif">&nbsp;网站导航<img src="images/arrow.gif">&nbsp;<img src="images/shoppingcart.png">我的购物车<span class="shoppingcart">0</span></td>
          </tr>
        </table></td>
      </tr>
    </table>
  <!--顶部区域 end--> 
  <!-- logo+banner区 start -->
  <table width="1200" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td><a href="#"><img src="images/logo.jpg" alt=""></a></td>
      <td align="right"><img src="images/banner.jpg" alt=""></td>
    </tr>
  </table>
  <!-- logo+banner区 end -->
	  <!-- 菜单导航区 start -->
  <table width="100" cellspacing="0" cellpadding="0" bgcolor="#ce2626" height="50" align="center">
    <tr>
      <td><table width="1200" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td width="200" align="center"></td>
          <td width="100" align="center">首页</td>
          <td width="100" align="center">最新上架</td>
          <td width="100" align="center">品牌活动</td>
          <td width="100" align="center">原厂直供</td>
          <td width="100" align="center">团购</td>
          <td width="100" align="center">限时抢购</td>
          <td width="100" align="center">促销打折</td>
          <td width="200" align="center"></td>
        </tr>
      </table></td>
    </tr>
  </table>
  <!-- 菜单导航区 end -->
	<!--注册部分 start-->
	<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f8f8f8">
		<tr>
			<td>
				<table width="1200" 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"/>
						</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 name="userName" type="text" id="userName" value="请输入用户名"/></td>
									</tr>
									<tr>
										<td>邮箱地址:</td>
										<td><input name="email" type="text" id="email" value="请输入邮箱地址"/></td>
									</tr>
									<tr>
										<td>设置密码:</td>
										<td><input name="userPwd" type="password" id="userPwd"/></td>
									</tr>
									<tr>
										<td>&nbsp;</td>
										<td class="gray12">6-12个字符,由字母,数字和符号的两种以上组合。&nbsp;</td>
									</tr>
									<tr>
										<td>确认密码:</td>
										<td><input name="userRePwd" type="password" id="userRePwd"/></td>
									</tr>
									<tr>
										<td>真实姓名:</td>
										<td><input name="realName" type="text" 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 name="mobile" type="text" id="mobile" value="请输入您的手机号"/></td>
									</tr>
									<tr>
										<td>单位名称:</td>
										<td><input name="company" type="text" 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>
										<td>&nbsp;</td>
										<td><input name="address" type="text" id="address" value="请输入街道地址"/></td>
									</tr>
									<tr>
										<td>您的爱好:</td>
										<td><input name="hobby" type="checkbox" value="购物"/>购物
											<input name="hobby" type="checkbox" value="影视"/>影视
											<input name="hobby" type="checkbox" value="餐饮"/>餐饮
										</td>
									</tr>
									<tr>
										<td>协议内容:</td>
										<td><textarea cols="30" row="3"></textarea></td>
									</tr>
									<tr>
										<td>&nbsp;</td>
										<td><input type="submit" name="button" value="提交"/></td>
									</tr>
								</table>
							</form>
						</td>
					</tr>
				</table>
				<!--三大模块图片-->
				<table width="1200" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" align="center" class="padding_bottom">
					<tr>
						<td align="center"><img src="images/shop.jpg" class="bian"/></td>
						<td align="center"><img src="images/movie.jpg" class="bian"/></td>
						<td align="center"><img src="images/food.jpg" class="bian"/></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
	<!--注册部分 end-->
	<!--底部 start-->
 <!--底部 start--><Br/>
  <table width="1200" border="0" cellspacing="0" cellpadding="0" bgcolor="#6a6665" height="35" class="foot_bg" align="center">
    <tr>
      <td class="padding-top"><table width="1200" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="20%" align="center"><img src="images/gray1.jpg" ></td>
            <td width="20%" align="center"><img src="images/gray2.jpg" ></td>
            <td width="20%" align="center"><img src="images/gray3.jpg" ></td>
            <td width="20%" align="center"><img src="images/gray4.jpg" ></td>
            <td width="20%" align="center"><img src="images/gray5.jpg" ></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td bgcolor="#efefef" class="foot_line padding-top"><table width="1200" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
            <td align="center" valign="top"><img src="images/red1.jpg"><br>
              <img src="images/line1.jpg"/></td>
            <td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="font16 padding-bottom">新手指导</td>
                </tr>
                <tr>
                  <td>用户注册</td>
                </tr>
                <tr>
                  <td>电话下单</td>
                </tr>
                <tr>
                  <td>购物流程</td>
                </tr>
                <tr>
                  <td>购物保障</td>
                </tr>
                <tr>
                  <td>服务协议</td>
                </tr>
              </table></td>
            <td align="center" valign="top"><img src="images/red2.jpg"><br>
              <img src="images/line1.jpg"/></td>
            <td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="font16 padding-bottom">支付方式</td>
                </tr>
                <tr>
                  <td>货到付款</td>
                </tr>
                <tr>
                  <td>商城卡支付</td>
                </tr>
                <tr>
                  <td>支付宝、网银支付</td>
                </tr>
                <tr>
                  <td>优惠券抵用</td>
                </tr>
              </table>
            <td align="center" valign="top"><img src="images/red3.jpg"><br>
              <img src="images/line1.jpg"/></td>
            <td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="font16 padding-bottom">配送方式</td>
                </tr>
                <tr>
                  <td>闪电发货</td>
                </tr>
                <tr>
                  <td>满百包邮</td>
                </tr>
                <tr>
                  <td>配送范围及时间</td>
                </tr>
                <tr>
                  <td>商品验收及签收</td>
                </tr>
                <tr>
                  <td>服务协议</td>
                </tr>
              </table></td>
            <td align="center" valign="top"><img src="images/red4.jpg"><br>
              <img src="images/line1.jpg"/></td>
            <td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="font16 padding-bottom">售后服务</td>
                </tr>
                <tr>
                  <td>退换货协议</td>
                </tr>
                <tr>
                  <td>关于发票</td>
                </tr>
                <tr>
                  <td>退换货流程</td>
                </tr>
                <tr>
                  <td>退换货运费</td>
                </tr>
              </table></td>
            <td align="center" valign="top"><img src="images/red5.jpg"><br>
              <img src="images/line1.jpg"/></td>
            <td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="font16 padding-bottom">关于帐号</td>
                </tr>
                <tr>
                  <td>修改个人信息</td>
                </tr>
                <tr>
                  <td>修改密码</td>
                </tr>
                <tr>
                  <td>找回密码</td>
                </tr>
              </table></td>
            <td align="center" valign="top"><img src="images/red6.jpg"><br>
              <img src="images/line1.jpg"/></td>
            <td width="15%" valign="top"><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td class="font16 padding-bottom">优惠活动</td>
                </tr>
                <tr>
                  <td>竞拍须知</td>
                </tr>
                <tr>
                  <td>抢购须知</td>
                </tr>
              </table></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td bgcolor="#efefef" align="center" class="padding-top">Copyright  2015-2020  Q- Walking Fashion E&S 漫步时尚广场(QST教育)版权所有<Br/>
        中国青岛 高新区河东路8888号  青软教育集团    咨询热线:400-658-0166  400-658-1022<br/>
        <img src="images/foot_pic.jpg"></td>
    </tr>
  </table>
  <!--底部 end-->
</body>

</html>

2.后台管理页面的添加商品页面:
预览如下:
在这里插入图片描述
addgoods.html

<!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="text2-2-main.html" target="_parent">首页</a></li>
			<li><a href="#">添加商品</a></li>
		</ul>
	</div>
	<div class="formboby">
		<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table1">
			<tr>
				<td><label>商品缩略图<b>*</b></label></td>
				<td><input type="file" name="" id="" 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 name="" id="" 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="goodsPrice" 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" id="" class="select3">
						<option>已审核</option>
						<option>未审核</option>
					</select>
				</td>
			</tr>
			<tr>
				<td><label>商品描述<b>*</b></label></td>
				<td><textarea name="content" id="content" rows="3"></textarea></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="button" value="马上发布" class="btn"></td>
			</tr>
		</table>
	</div>
</body>

</html>
发布了28 篇原创文章 · 获赞 36 · 访问量 3430

猜你喜欢

转载自blog.csdn.net/weixin_43912621/article/details/104578294