Figg
/
ColorTubes
보기 1
좋아요 0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 Activity
소스 검색

un peu de css

pull/2/head
demisel 7 달 전
부모
07097d72c9
커밋
b31f6481e5
2개의 변경된 파일과 42개의 추가작업 그리고 20개의 파일을 삭제
분할 보기 변경상태 보기
  1. 29
    9
      css/style.css
  2. 13
    11
      index.html

+ 29
- 9
css/style.css 파일 보기 

@@ -3,19 +3,39 @@ body {
3 3 
 	margin: 0;
4 4 
 }
5 5
6 
-menu {
7 
-	padding: 0;
8 
-	margin: 5px;
6 
+.menuitem label::after {
7 
+	content: " :";
9 8 
 }
10 9
11 
-menuitem {
12 
-	margin-right: 10px;
10 
+.menuitem input {
11 
+	max-width: 50px;
13 12 
 }
14 13
15 
-menuitem label::after {
16 
-	content: " :";
14 
+.row {
15 
+	display: flex;
16 
+	flex-direction: row;
17 17 
 }
18 18
19 
-menuitem input {
20 
-	max-width: 50px;
19 
+.w-max {
20 
+	width: max-content;
21 
+}
22 
+
23 
+.justify-evenly {
24 
+	justify-content: space-evenly;
25 
+}
26 
+
27 
+.justify-center {
28 
+	justify-content: center;
29 
+}
30 
+
31 
+.border {
32 
+	border: 1px solid black;
33 
+}
34 
+
35 
+.p-2 {
36 
+	padding: 0.5rem;
37 
+}
38 
+
39 
+.m-2 {
40 
+	margin: 0.5rem;
21 41 
 }

+ 13
- 11
index.html 파일 보기 

@@ -15,26 +15,28 @@
15 15 
 </head>
16 16
17 17 
 <body>
18 
-	<menu>
19 
-		<menuitem>
18 
+	<div class="row w-full justify-evenly border p-2 m-2">
19 
+		<span class="menuitem">
20 20 
 			<label>Tubes Number</label>
21 21 
 			<input type="number" size="5" id="tbNumber" value="10">
22 
-		</menuitem>
23 
-		<menuitem>
22 
+		</span>
23 
+		<span class="menuitem">
24 24 
 			<label>Tubes Levels</label>
25 25 
 			<input type="number" size="5" id="tbLevel" value="6">
26 
-		</menuitem>
27 
-		<menuitem>
26 
+		</span>
27 
+		<span class="menuitem">
28 28 
 			<label>Padding</label>
29 29 
 			<input type="number" size="5" id="padding" value="10">
30 
-		</menuitem>
31 
-		<menuitem>
30 
+		</span>
31 
+		<span class="menuitem">
32 32 
 			<label>Tube Size</label>
33 33 
 			<input type="number" size="5" id="tbSize" value="50">
34 
-		</menuitem>
34 
+		</span>
35 35 
 		<button type="button" onclick="newGame()">New game</button>
36 
-	</menu>
37 
-	<main oncontextmenu="return false;">
36 
+	</div>
37 
+	<div class="row justify-center">
38 
+		<main oncontextmenu="return false;">
39 
+	</div>
38 40 
 	</main>
39 41 
 </body>
40 42

Write Preview
Loading…
취소
저장