Blogger Information
Blog 61
fans 0
comment 0
visits 62898
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
纯html写后台小案例
Pengsir
Original
956 people have browsed it

demo1:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>纯html代码开发商城后台管理</title>
</head>
<body>
   <table border="0" cellspacing="0" cellpadding="5" width="960"  align="center">

       <tr>
           <td colspan="2">
               <iframe src="ins/top.html" frameborder="0" name="top" width="100%" height="70" scrolling="no"></iframe>
           </td>
       </tr>
       <tr>
           <td colspan="2"><hr></td>
       </tr>
       <tr>
           <td>
               <iframe src="ins/left.html" frameborder="0" width="250" height="600" name="left" scrolling="no"></iframe>
           </td>
           <td>
               <iframe src="ins/right.html" frameborder="0" width="630" height="600" name="right" scrolling="no"></iframe>
           </td>
       </tr>
       <tr>
           <td colspan="2"><hr></td>
       </tr>
       <tr>
           <td colspan="2">
               <iframe src="ins/foot.html" frameborder="0" name="foot" width="100%" height="100" scrolling="no"></iframe>
           </td>
       </tr>
   </table>
</body>
</html>

left代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>left-menu</title>
</head>
<body>
<ul>
   <h4><img src="../img/2.gif" width="20">用户管理</h4>
       <ul type="none">
           <li><img src="../img/6.gif" width="20"><a href="use.html" target="right">用户查询</a></li>
           <li><img src="../img/7.gif" width="20"><a href="">分类管理</a></li>
       </ul>
   <hr>
   <h4><img src="../img/3.gif" width="20">商品管理</h4>
   <ul type="none">
       <li><img src="../img/8.gif" width="20"><a href="goods.html" target="right">商品查询</a></li>
       <li><img src="../img/9.gif" width="20"><a href="">分类管理</a></li>
   </ul>
   <hr>
   <h4><img src="../img/4.gif" width="20">订单管理</h4>
   <ul type="none">
       <li><img src="../img/10.gif" width="20"><a href="order.html" target="right">订单查询</a></li>
       <li><img src="../img/11.gif" width="20"><a href="">分类管理</a></li>
   </ul>
   <hr>
   <h4><img src="../img/13.gif" width="20">系统设置</h4>
   <ul type="none">
       <li><img src="../img/5.gif" width="20"><a href="system.html" target="right">基本配置</a></li>
       <li><img src="../img/14.gif" width="20"><a href="">高级配置</a></li>
   </ul>
   <hr>
</ul>
</body>
</html>

right代码:

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>后台默认信息表</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center">
   <caption><h3>系统配置信息表</h3></caption>
   <tr>
       <th width="160" bgcolor="#87ceeb">服务器</th>
       <td width="400">Apache 2.8.1</td>
   </tr>
   <tr>
       <th width="160" bgcolor="#87ceeb">PHP版</th>
       <td width="400">PHP5.6+</td>
   </tr>
   <tr>
       <th width="160" bgcolor="#87ceeb">数据库</th>
       <td width="400">MySQL 5.7</td>
   </tr>
   <tr>
       <th width="160" bgcolor="#87ceeb">可用磁盘空间</th>
       <td width="400">395G</td>
   </tr>
   <tr>
       <th width="160" bgcolor="#87ceeb">可用内容</th>
       <td width="400">3.2G</td>
   </tr>
   </table>

</body>
</html>

use代码:

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>用户信息表</title>
</head>
<body>
   <table border="1" cellspacing="0" cellpadding="5" align="center">
       <caption><h2>用户管理<small><a href="">添加</a></small></h2></caption>
       <tr>
           <th>ID</th>
           <th>姓名</th>
           <th>职业</th>
           <th>邮箱</th>
           <th>状态</th>
           <th>注册时间</th>
           <th colspan="2">操作</th>
       </tr>
       <tr align="center">
           <td>1</td>
           <td>红眼</td>
           <td>狂战</td>
           <td>kz@qq.com</td>
           <td>启用</td>
           <td>2015-05-2</td>
           <td><a href="">编辑</a></td>
           <td><a href="">删除</a></td>
       </tr>
       <tr align="center">
           <td>2</td>
           <td>白手</td>
           <td>剑魂</td>
           <td>jh@qq.com</td>
           <td>启用</td>
           <td>2015-05-3</td>
           <td><a href="">编辑</a></td>
           <td><a href="">删除</a></td>
       </tr>
       <tr align="center">
           <td>3</td>
           <td>奶爸</td>
           <td>天启</td>
           <td>tq@qq.com</td>
           <td>启用</td>
           <td>2015-05-4</td>
           <td><a href="">编辑</a></td>
           <td><a href="">删除</a></td>
       </tr>
       <tr align="center">
           <td>4</td>
           <td>奶妈</td>
           <td>天使</td>
           <td>ts@qq.com</td>
           <td>启用</td>
           <td>2015-05-5</td>
           <td><a href="">编辑</a></td>
           <td><a href="">删除</a></td>
       </tr>
       <tr align="center">
           <td>5</td>
           <td>萝莉</td>
           <td>战法</td>
           <td>zf@qq.com</td>
           <td>启用</td>
           <td>2015-05-6</td>
           <td><a href="">编辑</a></td>
           <td><a href="">删除</a></td>
       </tr>
       <tr align="center">
           <td>6</td>
           <td>枪手</td>
           <td>漫游</td>
           <td>my@qq.com</td>
           <td>启用</td>
           <td>2015-05-7</td>
           <td><a href="">编辑</a></td>
           <td><a href="">删除</a></td>
       </tr>
   </table>
</body>
</html>

top代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>top</title>
</head>
<body>
   <table border="0">
       <tr>
           <td valign="middle"><img src="../img/1.gif"  width="40"></td>
           <td valign="middle" width="650"><h1>后台商城管理系统</h1></td>
           <td align="right"><a href="">admin</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="">退出</a></td>
       </tr>
   </table>
</body>
</html>

foot代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>foot</title>
</head>
<body>
   <p align="center">
       <a href="">php中文网二期纯html后台管理开发小案例</a>
        &copy版权所有
<a href="">备案号:皖ICP***</a>
   </p>
</body>
</html

good代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>商品信息表</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center">
   <caption><h2>用户管理<small><a href="">添加</a></small></h2></caption>
   <tr>
       <th>ID</th>
       <th>名称</th>
       <th>数量</th>
       <th>价格</th>
       <th>状态</th>
       <th>注册时间</th>
       <th colspan="2">操作</th>
   </tr>
   <tr align="center">
       <td>1</td>
       <td>荒古太刀</td>
       <td>1</td>
       <td>200</td>
       <td>正常</td>
       <td>2015-05-2</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>2</td>
       <td>深渊晶石</td>
       <td>900</td>
       <td>10</td>
       <td>正常</td>
       <td>2015-05-3</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>3</td>
       <td>时装</td>
       <td>100</td>
       <td>20</td>
       <td>正常</td>
       <td>2015-05-4</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>4</td>
       <td>增幅卷</td>
       <td>6000</td>
       <td>30</td>
       <td>下架</td>
       <td>2015-05-5</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>5</td>
       <td>保护卷</td>
       <td>9000</td>
       <td>50</td>
       <td>正常</td>
       <td>2015-05-6</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>6</td>
       <td>深渊宝典</td>
       <td>1</td>
       <td>2</td>
       <td>下架</td>
       <td>2015-05-7</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
</table>
</body>
</html>

order代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>订单</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center">
   <caption><h2>订单管理<small><a href="">添加</a></small></h2></caption>
   <tr>
       <th>ID</th>
       <th>名称</th>
       <th>数量</th>
       <th>价格</th>
       <th>状态</th>
       <th>订购时间</th>
       <th colspan="2">操作</th>
   </tr>
   <tr align="center">
       <td>1</td>
       <td>荒古太刀</td>
       <td>1</td>
       <td>200</td>
       <td>正常</td>
       <td>2015-05-2</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>2</td>
       <td>深渊晶石</td>
       <td>900</td>
       <td>10</td>
       <td>正常</td>
       <td>2015-05-3</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>3</td>
       <td>时装</td>
       <td>100</td>
       <td>20</td>
       <td>正常</td>
       <td>2015-05-4</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>4</td>
       <td>增幅卷</td>
       <td>6000</td>
       <td>30</td>
       <td>下架</td>
       <td>2015-05-5</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>5</td>
       <td>保护卷</td>
       <td>9000</td>
       <td>50</td>
       <td>正常</td>
       <td>2015-05-6</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
   <tr align="center">
       <td>6</td>
       <td>深渊宝典</td>
       <td>1</td>
       <td>2</td>
       <td>下架</td>
       <td>2015-05-7</td>
       <td><a href="">编辑</a></td>
       <td><a href="">删除</a></td>
   </tr>
</table>
</body>
</html>

system代码:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>系统配置信息表</title>
</head>
<body>
   <table border="0" cellspacing="0" cellpadding="5" align="center">
       <caption><h2>系统配置信息表</h2></caption>
   <tr>
       <td colspan="2"><hr></td>
   </tr>
   <tr>
       <td width="140" align="right">网站标题</td>
       <td width="600" align="left"><input type="text" name="title" placeholder="不少于10个字符"></td>
   </tr>
   <br>
   <tr>
       <td width="440" align="right">网站关键字</td>
       <td width="600" align="left"><input type="text" name="title" placeholder="不少于5个字符"></td>
   </tr>
   <br>
   <tr>
       <td align="right">网站描述:</td>
       <td align="left"><textarea name="commit" id="" cols="60" rows="5" placeholder="不多于200个字符"></textarea></td>
   </tr>
       <tr>
           <td colspan="2" align="center">
               <input type="image" name="submit" src="../img/20.jpg" width="200">
           </td>
       </tr>
   </table>

</body>
</html>

运行效果图:

01.png02.png03.png04.png

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