Question

我似乎无法折叠页面上的顶部和左侧空格。我浏览了整个页面，检查了我的风格，并认为我抓住了我的js中的所有内容。我将所有内容归零，但我仍然没有让它工作。这是浏览器默认添加的内容吗？有人能告诉我我在这里失踪了吗？谢谢！

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>MAKECODEPLAY</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="//use.typekit.net/uwk8rac.js"></script>
        <script>try{Typekit.load({ async: true });}catch(e){}</script>

        <style>

            html {
                background-color: "#555761";
                background: "#555761";
            }

            body {
                font-family: "brandon-grotesque";
                font-wieght: 100;
                font-style: normal;
                color: #656771;
                bgcolor: "#555761";
            }

            p {
                font-family: "brandon-grotesque";
                font-wieght: 100;
                font-style: normal;
                color: #656771;
            }

            a {
                color: #555761;
            }

            a:link {
                color: #555761;
                text-decoration: none;
            }

            a:visited {
                color: #555761;
                text-decoration: none;
            }

            a:hover {
                color: #656771;
                text-decoration: none;
            }

            a:active {
                color: #555761;
                text-decoration: none;
            }

            /* Auto center content in window */
            #stage {
                width:100%; 
                margin: 0 auto;
                padding: 0;
                } 

            #stage canvas, #overlay {
                position: absolute;
                margin: 0 auto;
                padding: 0;
                }

            #overlay {
                margin: 0 auto;
                padding: 0;
            }

            #overlay p {
                color: #333;
                font-family: "museo-sans";
                font-weight: 900;
                font-style: normal;
                font-size: 14px;
            }

            .centered {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                }

            .centered-bottom {
                position: fixed;
                bottom: 3%;
                left: 50%;
                transform: translate(-50%, -0%);
            }


        </style>

    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div id="stage">
            <canvas id="canvas"></canvas>
            <div class="centered">
                <img src="img/makecodeplay-logo.png" alt="MAKECODEPLAY" height="70" width="771"></div>
            <div class="centered" style="margin-top:50px;">
                <p>SITE COMING SOON</p></div>
            <div class="centered-bottom">
                <footer>
                    <small>&copy; Copyright 2015, MAKECODEPLAY</small>
                </footer>
            </div>
        </div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var canvas = document.getElementById('canvas');
            var makecodeplay = canvas.getContext('2d');
            canvas.width=window.innerWidth;
            canvas.height=window.innerHeight;

            makecodeplay.clearRect(0, 0, canvas.width, canvas.height);
            makecodeplay.fillStyle = "rgb(55,57,61)";
            makecodeplay.fillRect(0, 0, canvas.width, canvas.height);

            function randomPaint(inX, inY) {

                var x = Math.floor(Math.random() * canvas.width);
                var y = Math.floor(Math.random() * canvas.height);
                var r, g, b;
                r = Math.floor(Math.random() * 255);
                g = Math.floor(Math.random() * 255);
                b = Math.floor(Math.random() * 255);
                makecodeplay.beginPath();
                makecodeplay.fillStyle = "rgba(35,37,41,0.3)";
                makecodeplay.fillRect(0, 0, canvas.width, canvas.height);
                makecodeplay.fill();
                makecodeplay.closePath();

                makecodeplay.beginPath();
                makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
                makecodeplay.lineWidth = 10;
                makecodeplay.moveTo(inX, inY);
                makecodeplay.lineTo(x, y);
                makecodeplay.stroke();
                makecodeplay.closePath();

                makecodeplay.beginPath();
                makecodeplay.strokeStyle = "rgba(" + r + "," + g + "," + b + ",0.1)";
                makecodeplay.lineWidth = 4;
                makecodeplay.moveTo(inX, inY);
                makecodeplay.lineTo(x, y);
                makecodeplay.stroke();
                makecodeplay.closePath();

                makecodeplay.beginPath();
                makecodeplay.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
                makecodeplay.lineWidth = 1;
                makecodeplay.moveTo(inX, inY);
                makecodeplay.lineTo(x, y);
                makecodeplay.stroke();
                makecodeplay.closePath();

              setTimeout(function () {
                    randomPaint(x, y)
                }, 100);
            }

            randomPaint(1, 1);

        </script>

    </body>
</html>

Answer 1

将此添加到css。

html, body{
    padding: 0;
    margin: 0;
}

无法摆脱页面上的顶部和左侧空白

1 个答案: