管理系统页面布局

最新推荐文章于 2024-04-26 15:21:52 发布

Travelling1006

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量430

点赞数

原文链接：http://www.cnblogs.com/talentzemin/p/7890580.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <style>
        * { padding: 0; margin: 0; }
        .header { height: 60px; background: #3B8CFF; }
        .side { position: fixed; width: 220px; top: 60px; bottom: 0; }
        .header h2 { color: #fff; line-height: 60px; margin: 0 10px; }
        .scroll { height: 100%; background: #E9EEF1; overflow-x: hidden; }
            .scroll li { line-height: 60px; text-align: center; border-bottom: 1px solid red; }
        .content { position: absolute; left: 220px; right: 0; }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="header">
            <h2>XXX管理系统</h2>
        </div>
        <div class="side">
            <div class="scroll">
                <ul>
                    <li>菜单A</li>
                    <li>菜单B</li>
                    <li>菜单C</li>
                    <li>菜单D</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单A</li>
                    <li>菜单Z</li>
                </ul>
            </div>
        </div>
        <div class="content">内容区域</div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/talentzemin/p/7890580.html

Travelling1006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
管理系统页面布局

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="key...
复制链接

扫一扫