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

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

博主信息

博文 16

粉丝 0

访问量 13598

专题推荐

更多>

实例

<!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标签更加语义化用法还和之前的布局一样

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

bootstrap用户登录-2018年9月26日

2018-09-26 10:11:37