HTML简单后台界面基础+跳转简单商城界面

于 2019-08-20 23:49:59 发布
阅读量2.2k 收藏 8
点赞数 1
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuyao_Xu/article/details/99897518
版权

总共分五个文件
images图片就不放上来了，明白原理即可

后台主页框架

<html>
	<head>
		<title>Home</title>
		<meta charset="utf-8">
	</head>
	
	<frameset rows="20%,*">
		
		<frameset cols="20%,*">
			<frame></frame>
			<frame src="Title.html"></frame>
		</frameset>
		
		<frameset cols="20%,40%,*">
			<frame></frame>
			<frame src="register01.html" name="register"></frame>
			<frame src="register02.html" name="register"></frame>
		</frameset>

	</frameset>

</html>

后台界面导航

<html>
	<head>
		<title>选项</title>
		<meta charset="utf-8">
	</head>
	
	<body>
		<a href="register01.html" target="register">登录</a>
		<br>
		<a href="register02.html" target="register">注册</a>
	</body>

</html>

后台系统登录界面

<html>
	<head>
		<title>
			用户登录界面
		</title>
		<meta charset="utf-8">
	</head>
	<body>
		
		<form action="shop.html" target="_black" align="center">
			<p>账号：<input name="username" maxlength="10" placeholder="请输入用户名"></p>
			<p>密码：<input type="password" name="pwd" placeholder="请输入密码"></p>
			
			<p>
				<input type="submit" value="登录">
				<input type="hidden" name="id" value="100">
			</p>
		
		</form>
		
	</body>

</html>

后台注册界面

<html>
	<head>
		<title>
			用户注册界面
		</title>
		<meta charset="utf-8">
	</head>
	<body>

		<form action="register01.html" target="_black" align="center">
			<p>账号：<input name="username" maxlength="10" placeholder="请输入用户名"></p>
			<p>密码：<input type="password" name="pwd" placeholder="请输入密码"></p>
			<p>确认：<input type="password" name="rpwd" placeholder="请确认密码"></p>
			<p>手机号：<input name="phone" maxlength="11" placeholder="请输入十一位手机号"></p>
			
			<p>
				<input type="submit" value="登录">
				<input type="reset" value="重置">
				<input type="hidden" name="id" value="100">

			</p>
		
		</form>
		
	</body>

</html>

商城界面

<html>
	<head>
		<meta charset="utf-8">
		<title>title</title>
	</head>
	
	<body bgcolor="red">
		<table align="center"><!-- 主体框架 五行一列 -->
			<tr><!-- 第一行 -->
				<td>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td><img src="images/header_logo1.png"></td>
							<td><img src="images/header_text1.png"></td>
							<td><img src="images/header_text2.png"></td>
						</tr>
					</table>
				</td>
			
			</tr>
			
			<tr><!-- 第二行 -->
				<td>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td>
								<img src="images/midleup.jpg" width="1352">
								<br>
								<br>
							</td>
						</tr>
					</table>
				</td>
			
			</tr>
			
			<tr><!-- 第三行 -->
				<td>
					<table bgcolor="blue" width="650" height="350" align="left" cellspacing="0">
						<tr>
							<td>
								<img src="images/left01.jpg" width="255" height="180">
								<img src="images/left02.jpg" width="125" height="180">
								<img src="images/left03.jpg" width="125" height="180">
								<img src="images/left04.jpg" width="125" height="180">
							</td>
						</tr>
						<tr>
							<td>
								<img src="images/left11.jpg" width="125" height="180">
								<img src="images/left12.jpg" width="125" height="180">
								<img src="images/left13.jpg" width="125" height="180">
								<img src="images/left14.jpg" width="125" height="180">
								<img src="images/left15.jpg" width="125" height="180">
							</td>
						</tr>
					</table>

					<table bgcolor="pink" width="650" height="350" align="right" cellspacing="0">
						<tr>
							<td>
								<img src="images/right01.jpg" width="255" height="180">
								<img src="images/right02.png" width="125" height="180">
								<img src="images/right03.png" width="125" height="180">
								<img src="images/right04.png" width="125" height="180">
							</td>
						</tr>
						<tr>
							<td>
								<img src="images/right11.png" width="125" height="180">
								<img src="images/right12.png" width="125" height="180">
								<img src="images/right13.png" width="125" height="180">
								<img src="images/right14.png" width="125" height="180">
								<img src="images/right15.png" width="125" height="180">
							</td>
						</tr>
					</table>
				</td>
			
			</tr>
			
			<tr><!-- 第四行 -->
				<td>
					<br>
					<img src="images/boom.jpg" width="1352">
				</td>
			
			</tr>
			
			<tr><!-- 第五行 -->
				<td>
				
				</td>
			
			</tr>
		
		</table>
	
	</body>

</html>

商场效果图

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值