search

博客列表 >后台管理页面布局-2018年8月21日

后台管理页面布局-2018年8月21日

兔子的博客
兔子的博客原创
2018年08月21日 16:01:58661浏览

后台管理页面基本布局

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文档管理</title>
	<style type="text/css">
*{margin: 0;padding: 0}
table, th, td {border: 1px solid #000;}
table {width: 650px;margin: auto;border-collapse: collapse;text-align: center; }
h2{width: 650px;margin: 0 auto;text-align: center;line-height: 40px;}
	p{overflow: hidden;width: 350px;margin: 0 auto}
p a{width: 30px;height: 20px;background: #ccc;line-height: 20px;display: block;float: left;margin:10px;font-size: 10px;text-align: center; }
	</style>


</head>
<body>
	<h2>文档管理</h2>
	<table>
		<tr>
			<th>ID</th>
			<th>标题图片</th>
			<th>文档标题</th>
			<th>所属分类</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534847345376&di=67e605253c153a639c56976ba187d58a&imgtype=0&src=http%3A%2F%2Fa.vpimg4.com%2Fupload%2Fmerchandise%2F114800%2FCU-IPHONE5S-16G-BK-1.jpg" style="width: 50px;"></td>
			<td>Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</td>
			<td>启用</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
		<tr>
			<td>1</td>
			<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534847345376&di=67e605253c153a639c56976ba187d58a&imgtype=0&src=http%3A%2F%2Fa.vpimg4.com%2Fupload%2Fmerchandise%2F114800%2FCU-IPHONE5S-16G-BK-1.jpg" style="width: 50px;"></td>
			<td>Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</td>
			<td>启用</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
		<tr>
			<td>1</td>
			<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534847345376&di=67e605253c153a639c56976ba187d58a&imgtype=0&src=http%3A%2F%2Fa.vpimg4.com%2Fupload%2Fmerchandise%2F114800%2FCU-IPHONE5S-16G-BK-1.jpg" style="width: 50px;"></td>
			<td>Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</td>
			<td>启用</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
		<tr>
			<td>1</td>
			<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534847345376&di=67e605253c153a639c56976ba187d58a&imgtype=0&src=http%3A%2F%2Fa.vpimg4.com%2Fupload%2Fmerchandise%2F114800%2FCU-IPHONE5S-16G-BK-1.jpg" style="width: 50px;"></td>
			<td>Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</td>
			<td>启用</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
	</table>
	<p>
    <a href="">首页</a>
    <a href="" class="active">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="" class="more">...</a>
    <a href="">尾页</a>
</p>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>分类管理</title>
	<style type="text/css">
*{margin: 0;padding: 0}
table, th, td {border: 1px solid #000;}
table {width: 650px;margin: auto;border-collapse: collapse;text-align: center; }
h2{width: 650px;margin: 0 auto;text-align: center;line-height: 40px;}
p{overflow: hidden;width: 350px;margin: 0 auto}
p a{width: 30px;height: 20px;background: #ccc;line-height: 20px;display: block;float: left;margin:10px;font-size: 10px;text-align: center; }
	</style>


</head>
<body>
	<h2>分类管理</h2>
	<table>
		<tr>
			<th>ID</th>
			<th>分类名称</th>
			<th>层级</th>
			<th>是否启用</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td>手机</td>
			<td>顶级</td>
			<td>启用</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
		<tr>
			<td>1</td>
			<td>手机</td>
			<td>顶级</td>
			<td>启用</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
		<tr>
			<td>1</td>
			<td>手机</td>
			<td>顶级</td>
			<td>启用</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
		<tr>
			<td>1</td>
			<td>手机</td>
			<td>顶级</td>
			<td>启用</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
	</table>
	<p>
    <a href="">首页</a>
    <a href="" class="active">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="" class="more">...</a>
    <a href="">尾页</a>
</p>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>产品管理</title>
	<style type="text/css">
*{margin: 0;padding: 0}
table, th, td {border: 1px solid #000;}
table {width: 650px;margin: auto;border-collapse: collapse;text-align: center;}
h2{width: 650px;margin: 0 auto;text-align: center;line-height: 40px;}
p{overflow: hidden;width: 350px;margin: 0 auto}
p a{width: 30px;height: 20px;background: #ccc;line-height: 20px;display: block;float: left;margin:10px;font-size: 10px;text-align: center; }
	</style>

</head>
<body>
	<h2>分类管理</h2>
	<table>
		<tr>
			<th>ID</th>
			<th>图片</th>
			<th>型号</th>
			<th>价格</th>
			<th>操作</th>
		</tr>
		<tr>
			<td>1</td>
			<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534847345376&di=67e605253c153a639c56976ba187d58a&imgtype=0&src=http%3A%2F%2Fa.vpimg4.com%2Fupload%2Fmerchandise%2F114800%2FCU-IPHONE5S-16G-BK-1.jpg" style="width: 50px;"></td>
			<td>iPhone X</td>
			<td>5888</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
			<tr>
			<td>1</td>
			<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534847345376&di=67e605253c153a639c56976ba187d58a&imgtype=0&src=http%3A%2F%2Fa.vpimg4.com%2Fupload%2Fmerchandise%2F114800%2FCU-IPHONE5S-16G-BK-1.jpg" style="width: 50px;"></td>
			<td>iPhone X</td>
			<td>5888</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
			<tr>
			<td>1</td>
			<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534847345376&di=67e605253c153a639c56976ba187d58a&imgtype=0&src=http%3A%2F%2Fa.vpimg4.com%2Fupload%2Fmerchandise%2F114800%2FCU-IPHONE5S-16G-BK-1.jpg" style="width: 50px;"></td>
			<td>iPhone X</td>
			<td>5888</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
			<tr>
			<td>1</td>
			<td><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534847345376&di=67e605253c153a639c56976ba187d58a&imgtype=0&src=http%3A%2F%2Fa.vpimg4.com%2Fupload%2Fmerchandise%2F114800%2FCU-IPHONE5S-16G-BK-1.jpg" style="width: 50px;"></td>
			<td>iPhone X</td>
			<td>5888</td>
			<td><a href=javascript:;>编辑</a> | <a href=javascript:;>删除</a></td>
		</tr>
	</table>
	<p>
    <a href="">首页</a>
    <a href="" class="active">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="" class="more">...</a>
    <a href="">尾页</a>
</p>
</body>
</html>

运行实例 »

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

这几个页面大同小异，都是采用的table布局，时间原因未做过多的修饰

QQ截图20180821155628.png

h5标签更加语义化用法还和之前的布局一样

上一条：0820-页面布局实战《网站管理后台的模板开发》下一条：H5新增标签，后台系统实战
后台管理页面
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多