zoukankan      html  css  js  c++  java
  • 网页加载-上下幕布分开

    参考网站 网址
    效果图

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        html,body,div,ul,li,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,form,input,textarea,th,td,select{margin:0;padding:0}
        *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
        html,body{min-height:100%}
        body{font-family:Helvetica,Pingfang SC,Microsoft YaHei,STHeiti,Verdana,Arial,Tahoma,sans-serif;font-size:14px;color:#333;background:#fff;position:relative}
        h1,h2,h3,h4,h5,h6{font-weight:normal}
        ul,ol{list-style:none}
        img{border:none;vertical-align:middle}
        a{color:#666;text-decoration:none}
        a:visited{color:#666;text-decoration:none}
        a:hover{color:#666;text-decoration:none}
        a:active{color:#666;text-decoration:none}
        table{border-collapse:collapse;table-layout:fixed}
        input,textarea{outline:none;border:none}
        textarea{resize:none;overflow:auto}
        .clearfix{zoom:1}
        .clearfix:after{content:".";0;height:0;visibility:hidden;display:block;clear:both;overflow:hidden}
        /* 本案例CSS */
    body .pageUp{background: #e4e4e4;position: fixed;height: 50%; 100%;top: -50%;z-index: 9999999;transform: translateY(100%);transition: all 1.2s ease-in-out 0.2s;border-bottom: 1px solid #ccc;}
    body .pageDown{background: #e4e4e4;position: fixed;height: 50%; 100%;bottom: -50%;z-index: 9999999;transform: translateY(-100%);transition: all 1.2s ease-in-out 0.2s;border-top: 1px solid #ccc;}
    body.active .pageUp{transform: translateY(0);}
    body.active .pageDown{transform: translateY(0);}
        </style>
    </head>
    <body>
        <!-- 遮罩框 S-->
        <div class="pageUp"></div>
        <div class="pageDown"></div>
        <!-- 遮罩框 E-->
        <div>导航条</div>
        <div>网站内容</div>
        <div>底部</div>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
        $(function () {
            setTimeout(function () {
                $('body').addClass('active')
            }, 0)
        })
        </script>
    </body>
    </html>
    
  • 相关阅读:
    db2缓冲池调优
    linux下安装rpm出现error: Failed dependencies
    linux下挂载磁盘
    db2 常见错误以及解决方案[ErrorCode SQLState]
    db2数据库表操作错误SQL0668N Operation not allowed for reason code "1" on table "表". SQLSTATE=57016的解决方法
    db2用户权限赋值
    db2查看当前用户模式及当前用户的权限
    loadrunner常用函数整理
    书上的脚本案例
    hdu 1711---KMP
  • 原文地址:https://www.cnblogs.com/suni1024/p/12580385.html
Copyright © 2011-2022 走看看