zoukankan html css js c++ java

CSS补充

<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div onclick="Gotop();" style=" 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>

点返回到头部

要注掉；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; 700px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute;left: 0;bottom: 0; 50px;height: 50px;background-color: black"></div>
    </div>
    <div style="position: relative; 700px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute; 50px;height: 50px;background-color: #4371A6;right: 0;top: 0"></div>
    </div>

    <div style="position: relative; 700px;height: 200px;border: 1px solid red;margin: 0 auto">
        <div style="position: absolute; 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; 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; 300px;overflow: auto">
        <img src="../14/html/1.jpg" >
    </div>

</body>
</html>

当image大于div标签大小。overflow使用

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

查看全文

相关阅读:
构造函数创建对象和Object.create（）实现继承
 DIV伸缩盒子box
阿里巴巴面试题
 在字符串上添加一些方法，让字符串具有新添加方法的功能
 JQuery常用函数及功能小结－－转载
 滚动公告，永远只显示一条
 JS自定义属性兼容
 手机端touchstart,touchmove,touchend事件，优化用户划入某个可以点击LI的效果
 图片预加载问题
 多联动导航

原文地址：https://www.cnblogs.com/anhao-world/p/14079256.html