跟着麦叔学flask，感谢b站麦叔

static/css/main.css

@@ -0,0 +1,58 @@
+/* css页面蓝图 */
+
+/* 外部背景 */
+html, body {
+    height: 100%;
+    width: 100%;
+    margin: 0;   /*外边框*/
+    padding: 0;  /*内边框*/
+    overflow: hidden;  /* 防止滚动条 */
+    background-color: #333;  /* 背景颜色 */
+}
+
+/* 内部容器 */
+#app-canvas {
+    width: 1280px; 
+    height: 800px;
+
+    background-color: rgba(147, 185, 255, 0.644);
+    border: 5px solid #0056b3;  /* 定义边框 5px 实线 蓝色 */
+    /* transform-origin: 0 0;   /* 定义缩放起点 左上角 */
+
+    position:fixed; /* 固定页面，不滚动 */
+    left: 50%;       /* 调整左边缘位置到中央 */
+    top: 50%;        /* 调整上边缘位置到中央 */
+
+    padding: 30px;   /* 内部间距 30px */
+
+
+}
+
+header {
+    margin-bottom: 30px;   /* 外部间距 30px */
+    text-align: center;    /* 文字居中 */
+}
+
+h1 {
+    font-size: 48px; 
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+}
+
+#content-area {
+    display: flex;
+    justify-content: space-around;
+    gap: 40px;
+}
+
+/* 自带 */
+.box {
+    width: 500px; 
+    height: 600px;
+    background-color: #ffffffcc;
+    border: 1px solid #ccc;
+    padding: 20px;
+    font-size: 20px;
+    text-align: left;
+    overflow: auto;
+}

static/css/style.css

@@ -0,0 +1,6 @@
+h1 {
+    border: 2px;
+    color:brown;
+    text-align: center;
+    padding: 10px;
+}