Question

＆＃13;

body {
    background-color: black; 
    margin: 0;
    padding: 0;
    overflow: hidden; 
}
div#controller {
    display: none; 
}
div#instructions {
    font-size: 20px;
    color: white; 
    position: static;
    text-align: center; 
}

@media only screen and (max-width: 480px) {
    div#instructions {
        display: none; 
    }
    div#controller { 
        display: flex; 
        position: relative;
        background-color: grey;
        opacity: 0.6;
        height: 33%;
        width: 80%;
    }
    div#controller.dpad {
        width: 60%; 
    }    
}

@media only screen and (max-width: 768px) {
    div#instructions {
        display: none; 
    }
    div#controller {
        display: flex;
        position: relative;
        top: 300px;  
        background-color: grey; 
        opacity: 0.6; 
        height: 50%;
        width: 80%;
    }
    div#controller.dpad {
        width: 33%;
    } 
}

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        
        <!-- The CSS is missing! Your mission is to re-create it -->
        <link rel="stylesheet" href="env3d.css" />
        
        <script src="http://css.operatoroverload.com/exercise/bundle.js"></script>
        <script src="http://css.operatoroverload.com/exercise/game.js"></script>        
        
        <script type="text/javascript">         

         function playGame() {
             console.log("playGame");
             var game = new Game();

             game.setup();
             
             var env;
             if (game.env) {
                 env = game.env;
             } else {
                 env = new env3d.Env();
             }
            
             env.loop = game.loop.bind(game);             
             env.start();
         }
         
         window.addEventListener('load', function() {
            playGame();
         });
         
         document.addEventListener("contextmenu", function(e) {
             e.preventDefault();
         });         
         
        </script>
         
    </head>
    <body>
        <div id="controller">
            <div class="dpad">
                <button env3d-key="KEY_UP">UP</button>
                <button env3d-key="KEY_LEFT">LEFT</button>
                <button env3d-key="KEY_RIGHT">RIGHT</button>
                <button env3d-key="KEY_DOWN">DOWN</button>
            </div>
            <button env3d-key="KEY_A">A</button>
            <button env3d-key="KEY_Z">Z</button>            
        </div>
        <div id="instructions">Use arrow keys to change camera angle, A to zoom in, Z to zoom out.</div>
        <div id="env3d"></div>        
    </body>
    
</html>

＆＃13;

我有一个小小的项目要完成。但是，我完全坚持如何仅使用CSS对移动控制器进行编码。我不能把它看起来像图片。

任何人都可以指出我正确的方向去哪儿？

谢谢！对你的帮助表示感谢！：）

Answer 1

老兄，我们在同一个网络开发课上。

您需要哪些帮助？

首先，您必须调整屏幕底部的#controller和.dpad div的大小并将其定位。您需要使用position，width和height属性。

然后您必须将按钮放在其容器div中（也可以使用position，width和height）。您可以使用here.

中描述的element>element，attribute=value和/或:nth-child()选择器分别选择每个按钮

如果您需要，this页面会解释如何通过为元素position: relative (or absolute);，top: 50%;和transform: translateY(-50%);提供属性来垂直居中。（水平居中将为position: relative (or absolute);，left: 50%;和transform: translateX(-50%);

希望这能帮到你！

如何设计＆＃34; D-PAD＆＃34;控制器只使用CSS看起来像这样？

1 个答案: