0320作业-html框架实例 - 第一阶段前端基础

Home > List of blog posts > 0320作业-html框架实例

Blogger Information

Blog 20

fans 2

comment 0

visits 14999

Special Recommendation

More>

Related recommendations

实例

<!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

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0409作业-在线相册管理器

2018-04-14 15:50:36