javascript学习笔记---页面布局1

最新推荐文章于 2022-03-27 13:03:39 发布

xiaoa~

最新推荐文章于 2022-03-27 13:03:39 发布

阅读量360

点赞数 1

分类专栏： javascript学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79331839

版权

javascript学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        .pg-header{
            background-color:red;
            height:100px;
            opacity:0.5;
        }
        .pg-content .menu{
            background-color:yellow;
            position:absolute;
            left: 0;
            top: 100px;
            bottom: 0;
            width: 200px;
        }
        .pg-content .content{
            /*background-color:blue;*/
            position:absolute;
            left: 200px;
            top: 100px;
            right: 0px;
            bottom: 0px;
            min-width:500px;
            /*overflow:auto;    !*position:fixed,将屏幕始终固定；且div中内容大于一个屏幕，用overflow才能有滚动条，如果用position:absolute，会把当前div第一次固定到一个屏幕，只要div内容大于一个屏幕就能有滚动条。其实，左侧的菜单，不管position是不是absolute或fixed，只要设置了overflow就能自动出现滚动，然后菜单还是固定的*!*/
        }
        .left{
            float:left;
        }
        .right{
            float:right;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu">菜单</div>

        <div class="content">
            <div style="background-color:purple;">        <!--把p标签都包裹在这个div下，把这个div赋予颜色，那么p标签就都有颜色了，不要再content的样式中写颜色，因为要达到menu固定，content有滚动条，所以不用overflow，在content中写只能赋予一个屏幕的颜色（因为position：absolute）-->
            <p style="margin:0">123
            </p><p>asdsfaaaaaaaaaaaaaaa</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p>
            <p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p>
            <p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p>
            <p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p>
            <p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p>
            <p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p>
            <p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p>asdsf</p><p style="margin:0">asdsf</p>
            </div>

        </div>

    </div>
    <!--<div style="position:absolute;right:0;bottom:0;width:50px;height:50px;background-color:red">aaa</div>-->

</body>
</html>