博客列表 >0320作业-html框架实例

0320作业-html框架实例

麦小糖的博客
麦小糖的博客原创
2018年03月21日 17:25:191008浏览

一、代码:

1、index.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PHP中文网后台管理系统</title>
</head>
<body>
	<table border="0" cellspace="1" cellpadding="5" align="center" width="960">
		<!-- 头部 -->
		<tr>
			<td colspan="2">
				<iframe src="inc/top.html" name="top" height="70" width="100%"
				align="center" frameborder="0" scrolling="no"></iframe>
			</td>
		</tr>
		<!-- 分割线 -->
		<tr><td colspan="2" width="100%"><hr></td></tr>

		<!-- 中间分左右两部分 -->
		<tr>
			<!-- 左侧菜单栏 -->
			<td>
				<iframe src="inc/left.html" name="left" height="600" width="140"
				align="center" frameborder="0" scrolling="no"></iframe>
			</td>
			<!-- 右侧展示栏 -->
			<td>
				<iframe src="inc/default.html" name="right" height="600" width="800"
				align="left" frameborder="0" scrolling="no"></iframe>
			</td>
		</tr>

		<!-- 分割线 -->
		<tr><td colspan="2" width="100%"><hr></td></tr>

		<!-- 底部信息栏 -->
		<tr>
			<td colspan="2" align="center">
				<iframe src="inc/footer.html" name="footer" width="100%" height="70" align="center" frameborder="0" scrolling="no"></iframe>
			</td>
		</tr>
	</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、头部 top.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>top</title>
</head>
<body>
	<table border="0">
		<tr>
			<td valign="middle"><img src="../images/logo.jpg" width="40"></td>
			<td valign="middle" width="650">
				<h2 align="left">PHP中文网后台管理系统</h2>
			</td>
			<td align="right">
				<p>
					<a href="">admin</a>    
					<a href="">退出</a>
				</p>			
			</td>
		</tr>
	</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、左侧菜单 left.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>left</title>
</head>
<body>
	<h4><img src="../images/user.jpg" width="30">用户管理</h4>
	<ul type="none">
		<li>
			<img src="../images/file.jpg" width="20"><a href="user.html" target="right">用户查询</a>
		</li>
		<li><img src="../images/file.jpg" width="20"><a href="">分类管理</a></li>
	</ul>

	<h4><img src="../images/folder.jpg" width="30">商品管理</h4>
	<ul type="none">
		<li>
			<img src="../images/file.jpg" width="20"><a href="foods.html" target="right">商品信息</a>
		</li>
		<li><img src="../images/file.jpg" width="20"><a href="">分类管理</a></li>
	</ul>

	<h4><img src="../images/folder.jpg" width="30">订单管理</h4>
	<ul type="none">
		<li>
			<img src="../images/file.jpg" width="20"><a href="order.html" target="right">订单查询</a>
		</li>
		<li><img src="../images/file.jpg" width="20"><a href="">分类管理</a></li>
	</ul>

	<h4><img src="../images/set.jpg" width="30">系统设置</h4>
	<ul type="none">
		<li>
			<img src="../images/file.jpg" width="20"><a href="system.html" target="right">普通配置</a>
		</li>
		<li><img src="../images/file.jpg" width="20"><a href="">高级配置</a></li>
	</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4、右侧默认 default.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>默认后台首页</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="5" align="center">
		<caption><h3>系统配置信息表</h3></caption>
		<tr>
			<th width="160" bgcolor="lightcyan">服务器</th>
			<td width="400">Apache 2.8.1</td>
		</tr>
		<tr>
			<th bgcolor="lightcyan">PHP版本</th>
			<td>PHP5.6+</td>
		</tr>
		<tr>
			<th bgcolor="lightcyan">数据库</th>
			<td>MySQL 5.7</td>
		</tr>
		<tr>
			<th bgcolor="lightcyan">可用磁盘空间</th>
			<td>395G</td>
		</tr>
		<tr>
			<th bgcolor="lightcyan">可用内存</th>
			<td>3.2G</td>
		</tr>
	</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

5、用户信息 user.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用户信息</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="10" width="600" align="center">
		<caption><h2>用户信息表</h2></caption>
		<thead>
			
			<tr bgcolor="skyblue">
				<th>ID</th>
				<th>姓名</th>
				<th>性别</th>
				<th>爱好</th>
				<th>电话</th>
				<th>QQ号</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr align="center">
				<td>01</td>
				<td>张三</td>
				<td>女</td>
				<td>看电影</td>
				<td>13211111111</td>
				<td>354656</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>02</td>
				<td>李四</td>
				<td>男</td>
				<td>打网球</td>
				<td>15290347583</td>
				<td>2255566</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>03</td>
				<td>王五</td>
				<td>女</td>
				<td>画画</td>
				<td>15809485859</td>
				<td>86544323</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>04</td>
				<td>钱六</td>
				<td>男</td>
				<td>游泳</td>
				<td>18957555524</td>
				<td>97899324</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>05</td>
				<td>赵七</td>
				<td>男</td>
				<td>打篮球</td>
				<td>15657485524</td>
				<td>97899324</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
		</tbody>
		<tfoot></tfoot>
	</table>
	<p align="center">
		<a href="">首页</a>
		<a href="">上一页</a>
		<a href="">1</a>
		<a href="">2</a>
		<a href="">3</a>
		<a href="">...</a>
		<a href="">下一页</a>
		<a href="">尾页</a>
	</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

6、商品信息 foods.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品信息</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="10" width="600" align="center">
		<caption><h2>商品信息表</h2></caption>
		<thead>
			
			<tr bgcolor="skyblue">
				<th>商品ID</th>
				<th>商品</th>
				<th>价格</th>
				<th>存储条件</th>
				<th>商品编码</th>
				<th>条码</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr align="center">
				<td>01</td>
				<td>可乐</td>
				<td>199</td>
				<td>常温</td>
				<td>13211111111</td>
				<td>354656</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>02</td>
				<td>雪碧</td>
				<td>56</td>
				<td>冷冻</td>
				<td>15290347583</td>
				<td>2255566</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>03</td>
				<td>酸奶</td>
				<td>88</td>
				<td>冷藏</td>
				<td>15809485859</td>
				<td>86544323</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>04</td>
				<td>椰汁</td>
				<td>99</td>
				<td>常温</td>
				<td>18957555524</td>
				<td>97899324</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>05</td>
				<td>橙汁</td>
				<td>66</td>
				<td>冷冻</td>
				<td>15657485524</td>
				<td>97899324</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
		</tbody>
		<tfoot></tfoot>
	</table>
	<p align="center">
		<a href="">首页</a>
		<a href="">上一页</a>
		<a href="">1</a>
		<a href="">2</a>
		<a href="">3</a>
		<a href="">...</a>
		<a href="">下一页</a>
		<a href="">尾页</a>
	</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

7、订单信息 order.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>订单信息</title>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="10" width="600" align="center">
		<caption><h2>订单信息表</h2></caption>
		<thead>
			
			<tr bgcolor="skyblue">
				<th>订单ID</th>
				<th>商品</th>
				<th>价格</th>
				<th>存储条件</th>
				<th>商品编码</th>
				<th>条码</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr align="center">
				<td>01</td>
				<td>可乐</td>
				<td>199</td>
				<td>常温</td>
				<td>13211111111</td>
				<td>354656</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>02</td>
				<td>雪碧</td>
				<td>56</td>
				<td>冷冻</td>
				<td>15290347583</td>
				<td>2255566</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>03</td>
				<td>酸奶</td>
				<td>88</td>
				<td>冷藏</td>
				<td>15809485859</td>
				<td>86544323</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>04</td>
				<td>椰汁</td>
				<td>99</td>
				<td>常温</td>
				<td>18957555524</td>
				<td>97899324</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
			<tr align="center">
				<td>05</td>
				<td>橙汁</td>
				<td>66</td>
				<td>冷冻</td>
				<td>15657485524</td>
				<td>97899324</td>
				<td><img src="../images/edit.jpg" width="20" alt="编辑" title="编辑">   <img src="../images/del.jpg" width="20" alt="删除" title="删除"></td>
			</tr>
		</tbody>
		<tfoot></tfoot>
	</table>
	<p align="center">
		<a href="">首页</a>
		<a href="">上一页</a>
		<a href="">1</a>
		<a href="">2</a>
		<a href="">3</a>
		<a href="">...</a>
		<a href="">下一页</a>
		<a href="">尾页</a>
	</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

8、系统设置 system.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>系统信息</title>
</head>
<body>
	<table border="0" cellspacing="0" cellpadding="5" align="center">
		<caption>
			<h3>系统配置信息表</h3>
		</caption>
		<tr>
			<td width="160" align="right"><label for="title">网站标题:</label></td>
			<td width="400" align="left"><input type="text" id="title" name="title" value="" placeholder="不多于28个字符" size="48"></td>
		</tr>
		<tr>
			<td align="right"><label for="keywords">网站关键字:</label></td>
			<td align="left"><input type="text" id="keywords" name="keywords" value="" placeholder="不多于40个字符" size="48"></td>
		</tr>
		<tr>
			<td valign="middle" align="right"><label for="desc">网站描述:</label></td>
			<td align="left"><textarea id="desc" name="desc" rows="5" cols="50" placeholder="不多于120个字符"></textarea></td>
		</tr>
		<tr>
			<td align="center" colspan="2">
				<input type="image" name="submit" src="../images/submit.jpg" width="90">
			</td>
		</tr>
	</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

9、底部 footer.html

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>footer</title>
</head>
<body>
	<p align="center">
		<a href="">PHP中文网(www.php.cn)在线商城</a>  ©版权所有  
		<a href="">备案号:皖ICP-*******</a>
	</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、手写代码:

3.20作业.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议