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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章