博主信息
博文 20
粉丝 2
评论 0
访问量 18402
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
0320作业-html框架实例
麦小糖的博客
原创
1209人浏览过

一、代码:

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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学