Web前端学习记录(四)
程序员文章站
2022-04-22 13:38:04
...
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"> 网站导航<img src="images/arrow.gif"> <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> </td>
<td class="gray12">6-12个字符,由字母,数字和符号的两种以上组合。 </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> </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> </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>
下一篇: 文本溢出省略号方案