CSS补充 

<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div onclick="Gotop();" style="width: 50px;height: 50px;background-color: black;color: white;position: fixed
    ;bottom: 20px;
    right: 20px;
    ">返回顶部</div>
    <div style="height: 5000px;background-color: #dddddd">safsafas</div>
    <script>
        function Gotop() {
            document.body.scrollTop =0;
            // document.documentElement.scrollTop = 0;
        }
    </script>

</body>
</html>
点返回到头部

要注掉<!--<!DOCTYPE html>-->；document.body.scrollTop =0;才生效。否则使用 document.documentElement.scrollTop = 0;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;width: 700px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black"></div>
    </div>
    <div style="position: relative;width: 700px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;width: 50px;height: 50px;background-color: #4371A6;right: 0;top: 0"></div>
    </div>

    <div style="position: relative;width: 700px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;width: 50px;height: 50px;background-color: #9932CC;left: 0;bottom: 0"></div>
    </div>

</body>
</html>
relative + absolute使用

 

position：
                    fixed  固定在浏览器某个位置
                    absolute 紧跟滑轮滑动。

　　　　　 relative +absolute absolute和relative联合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            background-color: #4371A6;
            height: 48px;
            position: fixed;
            color: #FF7F24;
            top: 0;
            left: 0;
            right: 0;
        }
        .pg-body{
            background-color: lightgray;
            height: 5000px;
            margin-top: 90px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>

</body>
</html>
固定头部，滑动滚动条依然显示

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title4</title>
</head>
<body>
        <div style="z-index: 10;height: 400px;width: 500px;position: fixed;background-color: white;top: 50%;left: 50%;margin-left: -250px
            ;margin-top: -200px">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
        <div style="z-index: 9;osition: fixed;background-color: black;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5;

        "></div>
        <div style="height: 5000px;background-color: olivedrab">safsafas</div>
</body>
</html>
透明度和层级操作优先级

                opcity:0.5 透明度
                z-index：层级操作优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;width: 300px;overflow: auto">
        <img src="../14/html/1.jpg" >
    </div>

</body>
</html>
当image大于div标签大小。overflow使用

overflow：hidden  超过部分隐藏
                 auto    超过部分出现滚动条

 

posted @ 2020-12-03 14:37  安好_世界  阅读(47)  评论(0)  编辑  收藏  举报