登录  /  注册
博主信息
博文 18
粉丝 0
评论 0
访问量 9461
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
布局实战2018年8月20日作业
吕小布的博客
原创
535人浏览过

1.jpg

产品管理实例

<!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>

运行实例 »

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

批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学