产品管理实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品管理</title> <style type="text/css"> table{ width: 700px; margin: auto; border-collapse: collapse; text-align: center; } table,tr,td{ border:1px solid black; } table caption{ margin:30px auto; font-weight: bold; font-size: 25px; } table tr:first-child{ background-color: #66CCFF; } table tr td{ padding: 10px; } table tr td a{ text-decoration: none; color: #666666; } table tr td a:hover { color: lightsalmon; text-decoration-line: underline; } p{ text-align: center; } p a:first-child{width:60px;} p a:last-child{width:60px;} p a{ display: inline-block; width: 28px; height: 24px; border: 1px solid black; margin-left: 2px; line-height: 24px; text-decoration: none; } .more{border:none;} .active{ background-color: lightblue; } </style> </head> <body> <table> <caption>产品管理</caption> <tr> <td>ID</td> <td>图片</td> <td>板块</td> <td>所属分类</td> <td>操作</td> </tr> <tr> <td>1</td> <td><img src="http://09imgmini.eastday.com/mobile/20180822/20180822075037_64df8e3d522e224dfe37e1cab7a73c2c_1.jpeg" alt="" width="50"></td> <td><a href="">事实新闻</a></td> <td>新闻</td> <td><a href="http://xinwen.eastday.com/a/180822075037282.html?qid=news.baidu.com">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>2</td> <td><img src="https://t1.huanqiu.cn/978816477b87508bb8f0c18687b45c7f.jpg" alt="" width="50"></td> <td><a href="">国际新闻</a></td> <td>新闻</td> <td><a href="https://3w.huanqiu.com/a/73af74037f51/7FxZ2cSpQFG?agt=8">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>3</td> <td><img src="https://t1.huanqiu.cn/c53bf758879cc6ec79595bb41034e581.jpg" alt="" width="50"></td> <td><a href="">当地新闻</a></td> <td>新闻</td> <td><a href="https://3w.huanqiu.com/a/4e2d56fd65b095fb7f51/7Fze4iRa4WA?agt=8">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>4</td> <td><img src="http://p1.img.cctvpic.com/photoworkspace/contentimg/2018/08/21/2018082120204115490.jpg" alt="" width="50"></td> <td><a href="">其他新闻</a></td> <td>新闻</td> <td><a href="http://news.cctv.com/2018/08/21/ARTICZ6oShpIR66aobA1dXl6180821.shtml">编辑</a> | <a href="">删除</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"> table{ width: 700px; margin: auto; border-collapse: collapse; text-align: center; } table,tr,td{ border:1px solid black; } table caption{ margin:30px auto; font-weight: bold; font-size: 25px; } table tr:first-child{ background-color: #66CCFF; } table tr td{ padding: 10px; } table tr td a{ text-decoration: none; color: #666666; } table tr td a:hover { color: lightsalmon; text-decoration-line: underline; } p{ text-align: center; } p a:first-child{width:60px;} p a:last-child{width:60px;} p a{ display: inline-block; width: 28px; height: 24px; border: 1px solid black; margin-left: 2px; line-height: 24px; text-decoration: none; } .more{border:none;} .active{ background-color: lightblue; } .disable{ color: red;} </style> </head> <body> <table> <caption>分类管理</caption> <tr> <td>ID</td> <td>分类名称</td> <td>层级</td> <td>是否启用</td> <td>操作</td> </tr> <tr> <td>1</td> <td>事实新闻</td> <td>顶级</td> <td>启用</td> <td><a href="">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>2</td> <td>娱乐新闻</td> <td>顶级</td> <td class="disable">禁用</td> <td><a href="">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>3</td> <td>当地新闻</td> <td>顶级</td> <td>启用</td> <td><a href="">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>4</td> <td>热点新闻</td> <td>顶级</td> <td class="disable">禁用</td> <td><a href="">编辑</a> | <a href="">删除</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"> table{ width: 700px; margin: auto; border-collapse: collapse; text-align: center; } table,tr,td{ border:1px solid black; } table caption{ margin:30px auto; font-weight: bold; font-size: 25px; } table tr:first-child{ background-color: #66CCFF; } table tr td{ padding: 10px; } table tr td a{ text-decoration: none; color: #666666; } table tr td a:hover { color: lightsalmon; text-decoration-line: underline; } p{ text-align: center; } p a:first-child{width:60px;} p a:last-child{width:60px;} p a{ display: inline-block; width: 28px; height: 24px; border: 1px solid black; margin-left: 2px; line-height: 24px; text-decoration: none; } .more{border:none;} .active{ background-color: lightblue; } </style> </head> <body> <table> <caption>文档管理</caption> <tr> <td>ID</td> <td>标题图片</td> <td>文档标题</td> <td>所属分类</td> <td>操作</td> </tr> <tr> <td>1</td> <td><img src="http://09imgmini.eastday.com/mobile/20180822/20180822075037_64df8e3d522e224dfe37e1cab7a73c2c_1.jpeg" alt="" width="50"></td> <td><a href="">事关每个人!你的社保将发生重大变化 赶紧看看</a></td> <td>新闻</td> <td><a href="http://xinwen.eastday.com/a/180822075037282.html?qid=news.baidu.com">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>2</td> <td><img src="https://t1.huanqiu.cn/978816477b87508bb8f0c18687b45c7f.jpg" alt="" width="50"></td> <td><a href="">秘鲁一客机出故障紧急迫降 机身摩擦跑道火花四溅</a></td> <td>新闻</td> <td><a href="https://3w.huanqiu.com/a/73af74037f51/7FxZ2cSpQFG?agt=8">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>3</td> <td><img src="https://t1.huanqiu.cn/c53bf758879cc6ec79595bb41034e581.jpg" alt="" width="50"></td> <td><a href="">探亲假一次最多能休45天!这些假期你享受过吗?市</a></td> <td>新闻</td> <td><a href="https://3w.huanqiu.com/a/4e2d56fd65b095fb7f51/7Fze4iRa4WA?agt=8">编辑</a> | <a href="">删除</a></td> </tr> <tr> <td>4</td> <td><img src="http://p1.img.cctvpic.com/photoworkspace/contentimg/2018/08/21/2018082120204115490.jpg" alt="" width="50"></td> <td><a href="">周福德:用医术创造生命奇迹 用医德泽被杏林</a></td> <td>新闻</td> <td><a href="http://news.cctv.com/2018/08/21/ARTICZ6oShpIR66aobA1dXl6180821.shtml">编辑</a> | <a href="">删除</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>
运行实例 »
点击 "运行实例" 按钮查看在线实例