Blogger Information
Blog 48
fans 2
comment 3
visits 37870
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月20日作业
黑猫警长的博客
Original
641 people have browsed it

感言:
3月15日。课程体验

以前用Adobe Dreamweaver 写代码。虽然也接触过sublime,但是不知道怎么用,根本不知道插件是什么。比如安装插件,竖线光标变横线。所以一直都用DW。

3月16日。新学标签
caption:标签定义表格的标题,每个表格只能规定一个标题,通常标题会居中显示在表格上方,caption元素是 表格 元素的子对象

表格中的 th 标签内部文本默认会加粗居中显示,适合做表头

3月19日。新学标签

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

legend 元素为 <fieldset>元素定义标题。

3月20日。温故知新

iframe 网页框架 

后台首页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>家政后台管理系统</title>
</head>

<body>

<table width="100%" align="center">
  <tr>
    <td colspan="2"><iframe src="inc/header.html" name="header" width="100%" height="70" frameborder="0" scrolling="no" align="center"></iframe></td>
  </tr>
  <tr><td colspan="2"><hr></td></tr>
  <tr>
    <td width="20%" bgcolor="lightyellow"><iframe src="inc/left.html" name="left" height="700" frameborder="0" scrolling="no"></iframe></td>
    <td><iframe src="inc/index_default.html" name="right" width="100%" height="700" frameborder="0" scrolling="no"></iframe></td>
  </tr>
  <tr><td colspan="2"><hr></td></tr>
  <tr>
    <td colspan="2"><iframe src="inc/footer.html" name="footer" width="100%" height="70" frameborder="0" scrolling="no" align="center"></iframe></td>
  </tr>

</table>

</body>
</html>

运行实例 »

头部

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>头部</title>
</head>
<body>
	<table>
		<tr>
			<td align="center"><img src="../images/logo.png" height="70" alt=""></td>
			<td width="1600"><h2>家政行业管理系统</h2></td>
			<td align="right"><a href="">admin</a>    <a href="">退出</a></td>
		</tr>
	</table>
</body>
</html>

运行实例 »

左侧菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>左边菜单</title>
	<style type="text/css">
		ul,li,ol,dl,dt,dd{list-style: none;}
		img{vertical-align: middle;}
	</style>
</head>
<body>
	<h4><img src="../images/user.png" width="30">用户管理</h4>
	<ul>
		<li><a href="user.html" target="right"><img src="../images/list.png" height="25">用户列表</a></li>
		<li><a href="user.html" target="right"><img src="../images/list.png" height="25">分类管理</a></li>
	</ul>
	<hr>
	<h4><img src="../images/order.png" width="30">商品管理</h4>
	<ul>
		<li><a href="goods.html" target="right"><img src="../images/list.png" height="25">商品查询</a></li>
		<li><a href="goods.html" target="right"><img src="../images/list.png" height="25">分类管理</a></li>
	</ul>
	<hr>
	<h4><img src="../images/order.png" width="30">订单管理</h4>
	<ul>
		<li><a href="order.html" target="right"><img src="../images/list.png" height="25">订单管理</a></li>
		<li><a href="order.html" target="right"><img src="../images/list.png" height="25">分类管理</a></li>
	</ul>
	<hr>
	<h4><img src="../images/set.png" width="30">系统设置</h4>
	<ul>
		<li><a href="system.html" target="right"><img src="../images/set.png" height="25">基本配置</a></li>
		<li><a href="system.html" target="right"><img src="../images/hiset.png" height="25">高级配置</a></li>
	</ul>

</body>
</html>

运行实例 »

欢迎页面,默认内容页

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<fieldset>
		<legend>系统信息</legend>

		<table align="" cellpadding="5" cellspacing="0" bgcolor="yellowgreen">
			<tr>
				<th>操作系统</th>
				<td>CentOS Linux 7.2.1511 (Core)</td>
			</tr>
			<tr>
				<th>CPU使用率</th>
				<td>1% / 1核心</td>
			</tr>
			<tr>
				<th>内存使用率</th>
				<td>290 / 992 (MB)</td>
			</tr>
			<tr>
				<th>可用磁盘空间</th>
				<td>6.4G / 40G</td>
			</tr>
			<tr>
				<th>服务器软件</th>
				<td>Apache 2.2</td>
			</tr>
			<tr>
				<th>PHP版本</th>
				<td>PHP 5.5.38</td>
			</tr>
			<tr>
				<th>MySQL 版本</th>
				<td>MySQL 5.5</td>
			</tr>
		</table>
	</fieldset>

</body>
</html>

运行实例 »

底部实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p align="center"><a href="">家政后台管理系统</a>  Copyright  ©  2002-2017 43d.cc 驾云科技 版权所有</p>
</body>
</html>

运行实例 »

用户管理

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户管理</title>
</head>

<body>
  <table width="100%" border="1" cellpadding="5" cellspacing="0">
  <caption><h3>用户管理<small><a href="">添加</a></small></h3></caption>
  <tbody>
    <tr align="center">
      <th>ID</th>
      <th>用户名</th>
      <th>logo</th>
      <th>公司名称</th>
      <th>主营业务</th>
      <th>员工数量</th>
      <th>联系人</th>
      <th>电话</th>
      <th>地址</th>
      <th>信用</th>
      <th>门店状态</th>
      <th>注册时间</th> 
      <th colspan="2">操作</th>
    </tr>
    <tr align="center">
      <td>1</td>
      <td>xinkang</td>
      <td><img src="../images/xkfw.jpg" height="30"></td>
      <td>广州市鑫康家庭服务有限公司</td>
      <td>保姆服务</td>
      <td>1329</td>
      <td>唐小姐</td>
      <td>020-34490783</td>
      <td>广东广州海珠区滨江东122号雅苑新街市二楼K12</td>
      <td><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"></td>
      <td>开启</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td>      
    </tr>
    <tr align="center">
      <td>1</td>
      <td>xinkang</td>
      <td><img src="../images/xkfw.jpg" height="30"></td>
      <td>广州市鑫康家庭服务有限公司</td>
      <td>保姆服务</td>
      <td>1329</td>
      <td>唐小姐</td>
      <td>020-34490783</td>
      <td>广东广州海珠区滨江东122号雅苑新街市二楼K12</td>
      <td><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"></td>
      <td>开启</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td>      
    </tr>
    <tr align="center">
      <td>1</td>
      <td>xinkang</td>
      <td><img src="../images/xkfw.jpg" height="30"></td>
      <td>广州市鑫康家庭服务有限公司</td>
      <td>保姆服务</td>
      <td>1329</td>
      <td>唐小姐</td>
      <td>020-34490783</td>
      <td>广东广州海珠区滨江东122号雅苑新街市二楼K12</td>
      <td><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"></td>
      <td>开启</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td>      
    </tr>
    <tr align="center">
      <td>1</td>
      <td>xinkang</td>
      <td><img src="../images/xkfw.jpg" height="30"></td>
      <td>广州市鑫康家庭服务有限公司</td>
      <td>保姆服务</td>
      <td>1329</td>
      <td>唐小姐</td>
      <td>020-34490783</td>
      <td>广东广州海珠区滨江东122号雅苑新街市二楼K12</td>
      <td><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"></td>
      <td>开启</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td>      
    </tr>
    <tr align="center">
      <td>1</td>
      <td>xinkang</td>
      <td><img src="../images/xkfw.jpg" height="30"></td>
      <td>广州市鑫康家庭服务有限公司</td>
      <td>保姆服务</td>
      <td>1329</td>
      <td>唐小姐</td>
      <td>020-34490783</td>
      <td>广东广州海珠区滨江东122号雅苑新街市二楼K12</td>
      <td><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"></td>
      <td>开启</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td>      
    </tr>
    <tr align="center">
      <td>1</td>
      <td>xinkang</td>
      <td><img src="../images/xkfw.jpg" height="30"></td>
      <td>广州市鑫康家庭服务有限公司</td>
      <td>保姆服务</td>
      <td>1329</td>
      <td>唐小姐</td>
      <td>020-34490783</td>
      <td>广东广州海珠区滨江东122号雅苑新街市二楼K12</td>
      <td><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"></td>
      <td>开启</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td>      
    </tr>
    <tr align="center">
      <td>1</td>
      <td>xinkang</td>
      <td><img src="../images/xkfw.jpg" height="30"></td>
      <td>广州市鑫康家庭服务有限公司</td>
      <td>保姆服务</td>
      <td>1329</td>
      <td>唐小姐</td>
      <td>020-34490783</td>
      <td>广东广州海珠区滨江东122号雅苑新街市二楼K12</td>
      <td><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"><img src="../images/credit.png" width="20"></td>
      <td>开启</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td>      
    </tr>
  </tbody>
</table>

</body>
</html>

运行实例 »

商品管理

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品管理</title>
</head>

<body><table width="100%" border="1" cellpadding="5" cellspacing="0">
  <caption><h3>商品管理<small><a href="">添加</a></small></h3></caption>
  <tbody>
    <tr align="center">
      <th>ID</th>
      <th>所属分类</th>
      <th>名称</th>
      <th>缩略图</th>
      <th>价格</th>
      <th>佣金</th>
      <th>库存</th>
      <th>状态</th>
      <th>添加时间</th>
      <th colspan="2">操作</th>
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
    <tr align="center">
      <td>2268576</td>
      <td>手机数码</td>
      <td>Apple iPad mini</td>
      <td><img src="../images/iPad.jpg" height="30"></td>
      <td>¥3999.00</td>
      <td>¥79.98</td>
      <td>18913</td>
      <td>上架</td>
      <td>2018-3-21</td>
      <td><a href=""><img src="../images/edit.png" width="30"></a></td>
      <td><a href=""><img src="../images/del.png" width="30"></a></td> 
    </tr>
  </tbody>
</table>

</body>
</html>

运行实例 »

订单管理

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>家政员信息表</title>
</head>

<body><table width="100%" border="1" cellpadding="5" cellspacing="0">
  <caption><h3>订单管理<small><a href="">添加</a></small></h3></caption>
  <tbody>
    <tr align="center">
      <td>ID</td>
      <td>姓名</td>
      <td>籍贯</td>
      <td>学历</td>
      <td>出生日期</td>
      <td>婚姻状况</td>
      <td>身份证号码</td>
      <td>意向工作</td>
      <td>工作经验</td>
      <td>实名认证</td>
      <td>所属公司</td>      
      <td>照片</td>
      <td>状态</td>
      <td colspan="2">操作</td>
    </tr>
    <tr align="center">
      <td>1</td>
      <td>江伊帆</td>
      <td>广东</td>
      <td>中专</td>
      <td>1995-05-10</td>
      <td>未婚</td>
      <td>4401**19950510****</td>
      <td> 育婴师/早教 </td>
      <td>1</td>
      <td><img src="../images/SFZcredit.png" alt="已实名" title="已实名"></td>
      <td>金贝家政连锁服务机构</td>      
      <td><img src="../images/1.jpg" height="80"></td>
      <td>已派单</td>
      <td><a href="">编辑</a></td>
      <td><a href="">删除</a></td>
    </tr>
    <tr align="center">
      <td>1</td>
      <td>江伊帆</td>
      <td>广东</td>
      <td>中专</td>
      <td>1995-05-10</td>
      <td>未婚</td>
      <td>4401**19950510****</td>
      <td> 育婴师/早教 </td>
      <td>1</td>
      <td><img src="../images/SFZcredit_no.png" alt="未实名" title="未实名"></td>
      <td>金贝家政连锁服务机构</td>      
      <td><img src="../images/2.jpg" height="80"></td>
      <td>未派单</td>
      <td><a href="">编辑</a></td>
      <td><a href="">删除</a></td>
    </tr>
    <tr align="center">
      <td>1</td>
      <td>江伊帆</td>
      <td>广东</td>
      <td>中专</td>
      <td>1995-05-10</td>
      <td>未婚</td>
      <td>4401**19950510****</td>
      <td> 育婴师/早教 </td>
      <td>1</td>
      <td><img src="../images/SFZcredit.png" alt="已实名" title="已实名"></td>
      <td>金贝家政连锁服务机构</td>      
      <td><img src="../images/3.jpg" height="80"></td>
      <td>已派单</td>
      <td><a href="">编辑</a></td>
      <td><a href="">删除</a></td>
    </tr>
    <tr align="center">
      <td>1</td>
      <td>江伊帆</td>
      <td>广东</td>
      <td>中专</td>
      <td>1995-05-10</td>
      <td>未婚</td>
      <td>4401**19950510****</td>
      <td> 育婴师/早教 </td>
      <td>1</td>
      <td><img src="../images/SFZcredit.png" alt="已实名" title="已实名"></td>
      <td>金贝家政连锁服务机构</td>      
      <td><img src="../images/4.jpg" height="80"></td>
      <td>已派单</td>
      <td><a href="">编辑</a></td>
      <td><a href="">删除</a></td>
    </tr>
    <tr align="center">
      <td>1</td>
      <td>江伊帆</td>
      <td>广东</td>
      <td>中专</td>
      <td>1995-05-10</td>
      <td>未婚</td>
      <td>4401**19950510****</td>
      <td> 育婴师/早教 </td>
      <td>1</td>
      <td><img src="../images/SFZcredit_no.png" alt="未实名" title="未实名"></td>
      <td>金贝家政连锁服务机构</td>      
      <td><img src="../images/5.jpg" height="80"></td>
      <td>未派单</td>
      <td><a href="">编辑</a></td>
      <td><a href="">删除</a></td>
    </tr>
  </tbody>
</table>

</body>
</html>

运行实例 »

站点基本信息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="" method="POST">
	<fieldset>
		<legend>基本配置</legend>
		<table align="" cellpadding="10" cellspacing="0" bgcolor="yellowgreen">
			<tr>
				<th>网站名称:</th>
				<td><input type="" name="" placeholder="广州家政行业管理系统"></td>
			</tr>
			<tr>
				<th>站点关键字:</th>
				<td><input type="" name="" placeholder="家政系统,免费家政系统,家政经营,家政管理软件,云管理,家政SAAS系统,家政会员管理,家政客户管理,家政平台"></td>
			</tr>			
			<tr>
				<th>站点描述:</th>
				<td><textarea rows="4" cols="40" placeholder="全平台家政员实名认证,信用等级管理,客户评价公开,找优质门店、安心保姆,尽在广州百家社区服务有限公司!" style="padding: 10px"></textarea></td>
			</tr>
			<tr>
				<th>网站备案号:</th>
				<td><input type="" name=""></td>
			</tr>
			<tr><td colspan="2" align="center"><input type="image" name="sbumit" src="../images/submit.png" height="40"></td></tr>
		</table>
	</fieldset>
</form>
</body>
</html>

运行实例 »

运行效果图片

未标题-1.jpg

未标题-2.jpg

未标题-3.jpg

未标题-4.jpg

未标题-5.jpg









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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!