zoukankan html css js c++ java

day5 页面布局

1.主站

        <div class='pg-header'>
            <div style='980px;margin:0 auto;'>
                内容自动居中
            </div>
        </div>


        <div class='pg-content'></div>


        <div class='pg-footer'></div>

2.后台管理布局

position：

fixed --永远固定在窗口的某个位置

relative --单独无意义

absolute --第一次定位，可以在指定位置，滚轮滚动时，不在了

　　c ：通用模板

 　　overflow: auto;       //在a和b模板中进行切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0 ;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
             200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            overflow: auto;       //在a和b模板中进行切换
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>

    <div class="pg-content">
        <div class="menu left">aaa</div>

        <div class="content left">
            <!--<div style="position: fixed;bottom: 0;right: 0; 50px;height: 50px">返回顶部</div>-->
            <!--<div style="position: absolute;bottom: 0;right: 0; 50px;height: 50px">返回顶部</div>-->
            <div style="background-color: mediumpurple;">
            <p style="margin: 0;">ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>

            </div>
        </div>
    </div>

    <div class="pg-footer"></div>
</body>
</html>

　　a 模板：左侧菜单跟随滚动条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0 ;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg-content .menu{
             20%;
            background-color: #dddddd;
            min- 200px;
            height: 500px;
        }
        .pg-content .content{
             80%;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>

    <div class="pg-content">
        <div class="menu left">aaa</div>

        <div class="content left">
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
        </div>
    </div>

    <div class="pg-footer"></div>
</body>
</html>

View Code

　　 b模板左侧以及上不动 ****

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0 ;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .pg-content .menu{
            position: fixed;
            top:48px;
            left: 0;
            bottom: 0;
             200px;background-color: #dddddd;
        }
        .pg-content .content{
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: mediumpurple;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>

    <div class="pg-content">
        <div class="menu left">aaa</div>

        <div class="content left">
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
        </div>
    </div>

    <div class="pg-footer"></div>
</body>
</html>

View Code

3.后台布局练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <style>
        body{
            margin: 0 ;
        }
        .left{
            float: left;
        }
        .right{
            float: right;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
            line-height: 48px;
        }
        .pg-header .logo{
            200px;
            background-color: cadetblue;
            text-align: center;
        }
        .pg-header .icons{
            padding: 0 20px;
        }
        .pg-header .icons:hover{
            background-color: #204982;
        }

        .pg-header .user{
            /* 160px;*/
            /*background-color: wheat;*/
            margin-right: 60px;
            padding: 0 20px;
            height: 48px;
            color: white;
        }
        .pg-header .user:hover{
            background-color: #204982;
        }

        .pg-header .user .a img{
            height: 40px;
             40px;
            margin-top: 4px;
            border-radius: 50%;
        }
        .pg-header .user .b{
            z-index:20;
            position: absolute;
            top: 48px;
            right: -42px;
            background-color:white;
            color: black;
             144px;
            display: none;
        }
        .pg-header .user:hover .b{
            display: block;
        }
        .pg-header .user .b a{
            display: block;
        }
        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
             200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            overflow: auto;
            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="22.png" />
            </a>
            <div  class="b" >
                <a>我的资料</a>
                <a>注销</a>
            </div>
        </div>

            <div class="icons right">
                <i class="fa fa-envelope-o" aria-hidden="true"></i>
                <span>5</span>
            </div>
            <div class="icons right">
                <i class="fa fa-bell-o" aria-hidden="true"></i>

            </div>
    </div>

    <div class="pg-content">
        <div class="menu left">aaa</div>

        <div class="content left">
            <!--<div style="position: fixed;bottom: 0;right: 0; 50px;height: 50px">返回顶部</div>-->
            <!--<div style="position: absolute;bottom: 0;right: 0; 50px;height: 50px">返回顶部</div>-->
            <div style="background-color: mediumpurple;">
            <p style="margin: 0;">ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>
            <p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p><p>ssss</p>

            </div>
        </div>
    </div>

    <div class="pg-footer"></div>
</body>
</html>

View Code

查看全文

相关阅读:
【Android游戏开发之八】游戏中添加音频详解MediaPlayer与SoundPool的利弊以及各个在游戏中的用途！
【Android游戏开发之九】（细节处理）触屏事件中的Bug解决方案以及禁止横屏和竖屏切换!
【Android游戏开发之七】（游戏开发中需要的样式）再次剖析游戏开发中对SurfaceView中添加组件方案！
前端要给力之：URL应该有多长？
【Android游戏开发之三】剖析 SurfaceView ！ Callback以及SurfaceHolder!!
charactersFound方法中的陷阱
 前端要给力之：分解对象构造过程new()
结合UIImageView实现图片的移动和缩放
 【Android游戏开发之一】设置全屏以及绘画简单的图形
 扩展BaseAdapter实现在ListView中浏览文件

原文地址：https://www.cnblogs.com/venicid/p/7772742.html

day5 页面布局

1.主站

2.后台管理布局

c ： 通用模板

3.后台布局练习

　　c ：通用模板