欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

入门：MVC 模型

最编程 2024-03-22 09:22:21
...

<!DOCTYPE html>

<html>

<head>

    <title>列表页</title>

    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">

    <script type="text/javascript" src="layui/layui.js"></script>

    <style type="text/css">

        .header{width:100%;height: 50px;line-height: 50px;background: #2e6da4;color:#ffffff;}

        .title{margin-left: 20px;font-size: 20px;}

        .userinfo{float: right;margin-right: 10px;}

        .userinfo a{color:#ffffff;}

        .menu{width: 200px;background:#333744;position:absolute;}

        .main{position: absolute;left:200px;right:0px;}


        .layui-collapse{border: none;}

        .layui-colla-item{border-top:none;}

        .layui-colla-title{background:#42485b;color:#ffffff;}

        .layui-colla-content{border-top:none;padding:0px;}


        .content span{background: #009688;margin-left: 30px;padding: 10px;color:#ffffff;}

        .content div{border-bottom: solid 2px #009688;margin-top: 8px;}

        .content button{float: right;margin-top: -5px;}

    </style>

</head>

<body>

    <div>

        <span><span style="font-size: 20px;">XXX</span>--后台管理系统</span>

        <span>【欧阳克】<span><a href="javascript:;">退出</a></span></span>

    </div>

    <div id="menu">

        <div lay-accordion>

            <div>

                <h2>商城管理</h2>

                <div class="layui-colla-content layui-show">

                    <ul class="layui-nav layui-nav-tree" lay-filter="test">

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                    </ul>

                </div>

            </div>

            <div>

                <h2>商城管理</h2>

                <div>

                    <ul class="layui-nav layui-nav-tree" lay-filter="test">

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                    </ul>

                </div>

            </div>

            <div>

                <h2>商城管理</h2>

                <div>

                    <ul class="layui-nav layui-nav-tree" lay-filter="test">

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                        <li><a href="list.html">商品列表</a></li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

    <div style="padding:10px;">

        <div>

            <span>商品列表</span>

            <div></div>

        </div>

        <table>

            <thead>

                <tr>

                    <th>ID</th>

                    <th>商品标题</th>

                    <th>分类</th>

                    <th>价格</th>

                    <th>状态</th>

                    <th>添加时间</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>1</td>

                    <td>熙世界2019秋冬新款长袖杏色上衣连帽宽松刺绣文艺落肩袖加厚卫衣BF风</td>

                    <td>女装</td>

                    <td>189</td>

                    <td>开启</td>

                    <td>2019-12-12</td>

                </tr>

                <tr>

                    <td>2</td>

                    <td>秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女</td>

                    <td>女装</td>

                    <td>699</td>

                    <td>开启</td>

                    <td>2019-12-12</td>

                </tr>

                <tr>

                    <td>3</td>

                    <td>秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女</td>

                    <td>女装</td>

                    <td>699</td>

                    <td>开启</td>

                    <td>2019-12-12</td>

                </tr>

                <tr>

                    <td>4</td>

                    <td>秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女</td>

                    <td>女装</td>

                    <td>699</td>

                    <td>开启</td>

                    <td>2019-12-12</td>

                </tr>

                <tr>

                    <td>5</td>

                    <td>秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女</td>

                    <td>女装</td>

                    <td>699</td>

                    <td>关闭</td>

                    <td>2019-12-12</td>

                </tr>

                <tr>

                    <td>6</td>

                    <td>秋水伊人双面呢冬装2019年新款女装气质西装领撞色羊毛大衣外套女</td>

                    <td>女装</td>

                    <td>699</td>

                    <td>开启</td>

                    <td>2019-12-12</td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

</html>

<script>

    layui.use(['element','layer','laypage'], function(){

        var element = layui.element;

        var laypage = layui.laypage;

        $ = layui.jquery;

        layer = layui.layer;

        resetMenuHeight();

    });

    // 重新设置菜单容器高度

    function resetMenuHeight(){

        var height = document.documentElement.clientHeight - 50;

        $('#menu').height(height);

    }

</script>

上一篇： 为什么杭州方言与邻近的吴语相冲突？

下一篇： 改变历史的希望之潮

推荐阅读