調整樣式

css/style.css

@@ -6,10 +6,14 @@ table {
 }
 
 th, td {
-    padding: 10px 20px;
+    padding: 5px 5px;
     border: 1px solid #000;
 }
 
+hr {
+    border: 1px solid #2c6a99;
+}
+
 a:link {
     color: #000000;
 }
@@ -23,13 +27,13 @@ a:visited {
 /* 已訪問超連結 */
 
 a:hover {
-    color: #1aff00;
+    color: #1070c4;
 }
 
 /* 滑鼠移動到超連結上 */
 
 a:active {
-    color: #396035;
+    color: #0d5da3;
 }
 
 /* 滑鼠點選時 */
@@ -37,19 +41,31 @@ a:active {
 h1 {
     text-align: center;
     font-weight: bold;
-    font-family: 'Arial Black', system-ui
+    font-family: 'Arial Black', system-ui;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 h2 {
     text-align: center;
     font-weight: bold;
-    font-family: 'Arial Black', system-ui
+    font-family: 'Arial Black', system-ui;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 h3 {
     text-align: center;
     font-weight: bold;
-    font-family: 'Arial Black', system-ui
+    font-family: 'Arial Black', system-ui;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 h4 {
@@ -62,40 +78,98 @@ h4 {
     margin-right: 0;
 }
 
+h5 {
+    text-align: center;
+    font-weight: bold;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 0;
+    margin-right: 0;
+}
+
 p {
     text-align: center;
     font-weight: bold;
     font-family: 'Arial', system-ui
 }
 
-.center {
-    margin-left: auto;
-    margin-right: auto;
-    font-weight: bold;
-    font-family: 'Arial', system-ui
+input[type="text"], input[type="number"] {
+    width: 100%;
+    max-width: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border-width: 1px;
+    border-color: #07407d;
+    background-color: #ffffff;
+    color: #000000;
+    box-sizing: border-box;
+    border-style: solid;
+    border-radius: 5px;
 }
 
-input[type="text"] {
-    width: 100%;
-    outline: #1aff00;
-}
-
-input[type="number"] {
-    width: 100%;
-    outline: #1aff00;
+input[type="text"], input[type="number"] {
+    outline:none;
 }
 
 input[type="date"] {
-    width: 50%;
-    height: 30px;
-    font-size: medium;
-    font-weight: bold;
-    font-family: 'Arial', system-ui
+    padding: 5px;
+    font-size: 16px;
+    border-width: 1px;
+    border-color: #07407d;
+    background-color: #ffffff;
+    color: #000000;
+    border-style: solid;
+    border-radius: 5px;
+    box-shadow: 0px 0px 5px rgba(66,66,66,.75);
+    text-shadow: -50px 0px 0px rgba(66,66,66,.0);
 }
 
-button {
-    width: 40%;
+input[type="date"] {
+    outline:none;
+}
+
+/*button {
+    width: auto;
     height: 30px;
     font-weight: bold;
     font-family: 'Arial', system-ui
+}*/
+
+button {
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    padding: 8px 20px;
+    border: 1px solid #07407d;
+    border-radius: 8px;
+    background: #4ab1ff;
+    background: -webkit-gradient(linear, left top, left bottom, from(#4ab1ff), to(#0d5da3));
+    background: -moz-linear-gradient(top, #4ab1ff, #0d5da3);
+    background: linear-gradient(to bottom, #4ab1ff, #0d5da3);
+    text-shadow: #591717 1px 1px 1px;
+    font: normal normal bold 15px arial;
+    color: #ffffff;
+    text-decoration: none;
+}
+button:hover,
+button:focus {
+    border: 1px solid #0b66c8;
+    background: #59d4ff;
+    background: -webkit-gradient(linear, left top, left bottom, from(#59d4ff), to(#1070c4));
+    background: -moz-linear-gradient(top, #59d4ff, #1070c4);
+    background: linear-gradient(to bottom, #59d4ff, #1070c4);
+    color: #ffffff;
+    text-decoration: none;
+}
+button:active {
+    background: #2c6a99;
+    background: -webkit-gradient(linear, left top, left bottom, from(#2c6a99), to(#0d5da3));
+    background: -moz-linear-gradient(top, #2c6a99, #0d5da3);
+    background: linear-gradient(to bottom, #2c6a99, #0d5da3);
+}
+
+.center {
+    width: fit-content;
+    height: 40px;
+    margin: 0 auto;
 }