python之CSS简单的页面布局

页面布局：
    主站：
            <div class='pg-header'>
                <div style='width:980px;margin:0 auto'>
                    内容自动居中
                </div>
            </div>
            <div class='pg-content'></div>
            <div class='pg-footer'></div>
    后台管理布局：
            position:
                fixed        永远固定在窗口的某个位置
                relative    单独无意义
                absolute    单独应用是，首开页面的定位是按照定义的指定位置，但是不随滚动条而固定在窗口的位置
                
        
        布局方式：a.（菜单栏固定不变，内容页随滚动条而变化）（position:fixed的运用还有overflow:auto的运用）
                        <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <style>
                        /*去掉间距*/
                        body{
                            margin:0;
                        }
                        /*因为float可能经常用到，所以单独分开来写*/
                        .left{
                            float:left;
                        }
                        .right{
                            float:right;
                        }
                        .pg-header{
                            height:48px;
                            background-color:blue;
                            color:white;
                        }
                        .pg-content .menu{
                            position: fixed;
                            top:48px;
                            left:0;
                            bottom:0;
                            width:200px;
                            background-color: #dddddd;
                        }
                        .pg-content .content{
                            position: fixed;
                            top:48px;
                            right:0;
                            bottom:0;
                            left:200px;
                            background-color: purple;
                            /*只让内容页出现滚动条，其他固定不变*/
                            overflow: auto;
                        }
                    </style>
                </head>
                <body>
                    <div class="pg-header"></div>
                    <div class="pg-content">
                        <div class="menu left">a</div>
                        <div class="content left">
                            <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                            <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                            <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                            <p>这是一个测试</p><p>这是一个测试</p>
                            <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p><p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                            <p>这是一个测试</p>
                        </div>
                    </div>
                    <div class="pg-footer"></div>
                </body>
                </html>
                
                
                b.（菜单栏和页面都随滚动条而变化）（position:absolute的单独运用）（左右滚动条的实现）
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Title</title>
                        <style>
                            /*去掉间距*/
                            body{
                                margin:0;
                            }
                            /*因为float可能经常用到，所以单独分开来写*/
                            .left{
                                float:left;
                            }
                            .right{
                                float:right;
                            }
                            .pg-header{
                                height:48px;
                                background-color:blue;
                                color:white;
                            }
                            .pg-content .menu{
                                position:absolute;
                                top:48px;
                                left:0;
                                bottom:0;
                                width:200px;
                                background-color: #dddddd;
                            }
                            .pg-content .content{
                                position:absolute;
                                top:48px;
                                left:200px;
                                right:0;
                                bottom:0;
                                /*内容页宽度像素小于980px时出现左右滚动条*/
                                min-width: 980px;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="pg-header"></div>
                        <div class="pg-content">
                            <div class="menu left">a</div>
                            <div class="content left">
                                    <div style="background-color: purple;">
                                        <p style="margin:0;">这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                                        <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                                        <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                                        <p>这是一个测试</p><p>这是一个测试</p>
                                        <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p><p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                        <p>这是一个测试</p>
                                    </div>
                            </div>
                            </div>

                        </div>
                        <div class="pg-footer"></div>
                    </body>
                    </html>
                    
                    
                c.菜单下拉框的实现（hover的两点运用）
                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <title>Title</title>
                    <style>
                        /*去掉间距*/
                        body{
                            margin:0;
                        }
                        /*因为float可能经常用到，所以单独分开来写*/
                        .left{
                            float:left;
                        }
                        .right{
                            float:right;
                        }
                        .pg-header{
                            height:48px;
                            background-color:blue;
                            color:white;
                            line-height: 48px;
                        }
                        .pg-header .logo{
                            width:200px;
                            background-color: cadetblue;
                            text-align: center;
                        }
                        .pg-header .user{
                            width:160px;
                            background-color: wheat;
                            height:48px;
                        }
                        .pg-header .user:hover{
                            background-color:blueviolet;
                        }
                        .pg-header .user .a img{
                            margin-top:4px;border-radius:50px;height:40px;width:40px;
                        }
                        .pg-header .user .b {
                            position: absolute;
                            top: 48px;
                            right: 20px;
                            width:160px;
                            z-index: 20;
                            background-color: white;
                            color:black;
                            display:none;
                        }
                        /*鼠标移动对应位置下拉框的实现*/
                        .pg-header .user:hover .b{
                            display:block;
                        }
                        .pg-header .user .b a{
                            /*让a标签独自占一行*/
                            display: block;
                        }

                        .pg-content .menu{
                            position:absolute;
                            top:48px;
                            left:0;
                            bottom:0;
                            width:200px;
                            background-color: #dddddd;
                        }
                        .pg-content .content{
                            position:absolute;
                            top:48px;
                            left:200px;
                            right:0;
                            bottom:0;
                            /*内容页宽度像素小于980px时出现左右滚动条*/
                            min-width: 980px;
                            /*为了菜单栏下拉框能显示，必须设置级数，否则下拉框菜单会被content覆盖*/
                            z-index: 9;
                        }
                    </style>
                </head>
                <body>
                    <div class="pg-header">
                        <div class="logo left">
                            功能菜单
                        </div>
                        <div class="user right" style="position:relative">
                            <a class="a" href="#">
                                <img src="m3.png">
                            </a>
                            <!--默认b是隐藏的-->
                            <div class="b">
                                <a>我的资料</a>
                                <a>注销</a>
                            </div>
                        </div>
                    </div>
                    <div class="pg-content">
                        <div class="menu left">a</div>
                        <div class="content left">
                                <div style="background-color: purple;">
                                    <p style="margin:0;">这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                                    <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                                    <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                                    <p>这是一个测试</p><p>这是一个测试</p>
                                    <p>这是一个测试</p><p>这是一个测试</p><p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p><p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                    <p>这是一个测试</p>
                                </div>
                        </div>
                        </div>

                    </div>
                    <div class="pg-footer"></div>
                </body>
                </html>
python之CSS简单的页面布局

猜你喜欢
