完善Pages

24012401 · Jun 1, 2020 · 1bb7a1a · 1bb7a1a
1 parent 87d2fa6
commit 1bb7a1a
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 6 deletions.
diff --git a/python_web/flasky/main.py b/python_web/flasky/main.py
@@ -10,14 +10,19 @@
 @app.route('/')
 def index():
     # 使用的默认路径是 ./templates/index.html
-    return render_template('index.html', name = 'Test Page')
+    return render_template('index.html', name = 'TestPage')
 
 @app.route('/user/<name>')
 def user(name):
     # 左边的参数表示模板中使用的占位符，右边表示当前作用域中的变量
     # 两边使用相同的变量名很常见，但不是强制要求
     return render_template('user.html', name = name)
 
+@app.route('/r404')
+def r404():
+    # 使用的默认路径是 ./templates/index.html
+    return render_template('404.html')
+
 @app.errorhandler(404)
 def page_not_found(e):
     return render_template('404.html'), 404

diff --git a/python_web/flasky/static/img/BG_A_Default.jpg b/python_web/flasky/static/img/BG_A_Default.jpg
diff --git a/python_web/flasky/static/img/backimg.png b/python_web/flasky/static/img/backimg.png
diff --git a/python_web/flasky/static/img/main.jpg b/python_web/flasky/static/img/main.jpg
diff --git a/python_web/flasky/templates/404.html b/python_web/flasky/templates/404.html
@@ -9,7 +9,7 @@
 </head>
 
 <body style="margin: 0px; font-size: 100%;">
-      <h1 style="background-color: #3498db; text-align: center; margin: 0px; padding-top: 20px; padding-bottom: 20px;">
+      <h1 style="color: white; background-color: #3498db; text-align: center; margin: 0px; padding-top: 20px; padding-bottom: 20px;">
         Create by Flasky </h1>
       <hr style="margin: 0px;">
       <div style="margin-left: 20px; margin-right: 20px">

diff --git a/python_web/flasky/templates/index.html b/python_web/flasky/templates/index.html
@@ -5,19 +5,95 @@
   <title>Flasky测试</title>
   <meta charset="utf-8">
   <meta name="author" content="liukai234">
-  <meta http-equiv="refresh" content="30">
+  <meta http-equiv="refresh" content="1000">
+  <style>
+    body, div, ul, li {
+      margin: 0px;
+      padding: 0px;
+    }
+
+    #nav {
+      border: none;
+    }
+
+    #nav ul{ /* 嵌套选择 */
+      width: 100%;
+      height: 60px;
+    }
+
+    #nav ul li {
+      height: 60px;
+      float: left;
+      list-style: none;
+      background-image: url(static/img/backimg.png);
+      /* padding:0 20px; */
+      text-align: center;
+      line-height: 60px;
+      font-size: 18px
+    }
+
+    #nav ul li a{
+      padding:0 20px;
+      text-decoration: none; 
+      color:darkcyan;
+      display: block;
+      height: 60px;
+    }
+
+    #nav ul li a:hover{
+      background-color: darkcyan;
+      color:white;
+      border-radius: 5px;
+    }
+
+    #nav #logo a{
+      display: block;
+    }
+
+    #nav2 #logo a img{
+      display: block;
+    }
+
+  </style>
 </head>
 
-<body style="margin: 0px; font-size: 100%;">
-      <h1 style="background-color: #3498db; text-align: center; margin: 0px; padding-top: 20px; padding-bottom: 20px;">
-        Create by Flasky </h1>
+<body style="font-size: 100%;">
+      <h1 style="border: none;  color: white; background-color: #3498db; text-align: center; margin: 0px; padding-top: 20px; padding-bottom: 20px;">
+        Create by Flasky
+      </h1>
+      <hr style="margin: 0px;">
+      <div id="nav">
+      <ul>
+        <li>导航到路由</li>
+        <li><a href="{{ url_for('index') }}">/</a></li>
+        <li><a href="#">/user/TestPage</a></li>
+        <li><a href="{{ url_for('r404') }}">/404</a></li>
+      </ul>
       <hr style="margin: 0px;">
       <div style="margin-left: 20px; margin-right: 20px">
         <p style="color:#2c3e50;font-size:20px;">自动化构建工具果真不如手撕来得实在</p>
       </div>
       <div style="margin-left: 20px; margin-right: 20px">
         <p style="color:#2c3e50;font-size:20px;">通过Flasky发送的数据: {{ name }}</p>
       </div>
+      <div style="size: 100%;">
+        <div style="background-color: #3498db; width: 300px; height: 20px; float: left"></div>
+        <div style="background-color: #27ae60; width: 300px; height: 20px; float: left"></div>
+        <div style="background-color: #9b59b6; width: 300px; height: 20px; float: left"></div>
+      </div>
+
+
+      <div id="nav2">
+        <div id="logo">
+          <a href="#">
+            <img src="#">
+          </a>
+        </div>
+        <div id="nav"></div>
+      </div>
+      <div id="banner"></div>
+      <div id="content"></div>
+      <div id="footer"></div>
 </body>
 
 </html>