Correction status:qualified
Teacher's comments:
后台管理页面基本布局
<!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布局,时间原因未做过多的修饰
h5标签更加语义化用法还和之前的布局一样