搜索
简帛阁>技术文章>《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-3

《Web前端设计与开发-HTML+CSS+JavaScript+HTML 5+jQuery》-漫步时尚广场代码-3

第三章

  • 任务3-1
  • 任务3-2

注: 素材图片路径需要根据实际情况修改

任务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>&nbsp;</td>
										<td class="gray12">6-20个字符,由字母、数字和符号的两种以上组合。&nbsp;</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>&nbsp;</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>&nbsp;</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">位置:
		<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>

运行截图:
任务3-2

第三章任务31任务32注:素材图片路径需要根据实际情况修改任务31<!DOCTYPEhtml><htmllangen><head><metacharsetUT
Web前端设计开发课后任务漫步时尚广场任务源码第二章任务21任务22tophtmllefthtmlshop_searchhtmlfoodlisthtmlmainhtml第二章注:素材图片路径需要根据
Web前端设计开发课后任务漫步时尚广场代码第一章任务11任务12任务13任务14第一章图片素材路径根据实际情况进行修改任务11<!菜单导航栏start><divclassnav_b
Web前端设计开发课后任务漫步时尚广场任务第五章源码前台模块shoppingShow_goodshtmlshoppingShow_goods_byScripthtml后台模块css文件topcss
Web前端设计开发课后任务漫步时尚广场任务源码第四章任务41任务42第四章注:素材图片路径需要根据实际情况修改任务41<!DOCTYPEhtmlPUBLIC//W3C//DTDXHTML10T
&x1f345;作者主页:Java李杨勇&x1f345;简介:Java领域优质创作者&x1f3c6;、【java李杨勇】公号作者✌简历模板、学习资料、面试题库【关注我,都给你】&x1f345;文末获
每一个学习前端的人对于前端三剑客《html+css+JavaScript》都不会陌生,可以说这是前端的世界,就没有前端解决不了的,而在前端的世界里就没有javascript实现不了的。关于JavaS
章一:css复杂选择器,权重计算问题,css基础属性并列选择器:多个限制条件,选中一个元素,并且不加空格写在一起。如:divdemo{}分组选择器如:em,strong,p{}
菜单中有的项目有夏季菜单,需要添加一个三角形,这个三角形是利用两个边框不同颜色产生的楔形制作的设置盒子的高度和宽度均为0,边框合适的大小,透明颜色,对应边设置高度、颜色<!DOCTYPEhtml
1、HTML简介HTML指的超文本标记语言(HyperTextMarkupLanguage),是一种用来描述网页的语言。超文本指的是除了可以包含文字之外,还可以包含图片、链接、音乐、视频、程序等内容。