20221023baseUI

d1bc583b · 62734f01072d6f2fb9e3f9db · 781f1098 · d1bc583b · d1bc583b
隐藏空白更改
内联并排

Showing with 63 addition and 4 deletion

index.html index.html +10 -1

src/style.css src/style.css +53 -3

未找到文件。
--- a/index.html
+++ b/index.html
@@ -9,7 +9,16 @@
 </head>
 <body>
    <div class="app">
-        <h1>纵横四方</h1>
+        <div class="title">纵横四方</div>
+        <div class="game">
+            <div class="box top"></div>
+            <div class="box left"></div>
+            <div class="box right"></div>
+            <div class="box bottom"></div>
+        </div>
+        <div class="info">
+            <h1>操作面板</h1>
+        </div>
    </div>
 </body>
 </html>
\ No newline at end of file
--- a/src/style.css
+++ b/src/style.css
+*{
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+}
+ul{
+    list-style: none;
+}
 .app{
+    margin: 0px auto;
+    width: 80%;
+    height: 100vh;
+    background-color: lightblue;
+}
+.title{
+    font-size: 0.5rem;
    text-align: center;
+    height: 8vh;
+    line-height: 8vh;
+}
+.game{
+    width: 100%;
+    height: 70vh;
+    border-top: 1px solid gray;
+    border-bottom: 1px solid gray;
+}
+.info{
+    width: 100%;
+    height: 22vh;
+    line-height: 22vh;
+}
+.box{
+    width: 33.3%;
+    height: 23.3vh;
+    background-color: gray;
+    position: relative;
+    float: left;
+}
+.top{
+    left: 33.3%;
+}
+.left{
+    left: -33.3%;
+    top:23.3vh;
+    background-color: red;
+}
+.right{
+    right: 0px;
+    top: 23.3vh;
+    background-color: aqua;
+}
+.bottom{
+    left: 33.3%;
+    top:23.3vh;
+    background-color: blueviolet;
 }
-.app img{
-    margin-top: 32px;
-}
\ No newline at end of file