Răsfoiți Sursa

add footer in html page

wangweimin 5 ani în urmă
părinte
comite
fb04d8e926
2 a modificat fișierele cu 36 adăugiri și 5 ștergeri
  1. 30 3
      pywebio/html/css/app.css
  2. 6 2
      pywebio/html/index.html

+ 30 - 3
pywebio/html/css/app.css

@@ -1,6 +1,30 @@
 .container {
     margin: 45px auto;
     max-width: 880px;
+    min-height: calc(100vh - 70px);
+}
+
+.footer {
+    height: 50px;
+    text-align: center;
+    color: gray;
+    background-color: #efefef;
+    line-height: 50px; /*设置line-height与父级元素的height相等, 以实现垂直居中*/
+    margin: 0 auto;
+}
+
+.footer hr {
+    margin-bottom: 0.5rem;
+}
+
+.footer a:visited {
+    color: #9B59B6;
+}
+
+.footer a {
+    color: #2980B9;
+    text-decoration: none;
+    cursor: pointer;
 }
 
 #input-container {
@@ -55,13 +79,16 @@
 .no-fix-height #input-container {
     margin: 0 10px;
 }
-.no-fix-height #input-container h5.card-header{
+
+.no-fix-height #input-container h5.card-header {
     padding: .4rem 1.25rem;
 }
-h5.card-header:empty{
+
+h5.card-header:empty {
     padding: 0 !important;
     border-bottom: 0 !important;
 }
-button{
+
+button {
     margin-bottom: 8px;
 }

+ 6 - 2
pywebio/html/index.html

@@ -2,7 +2,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>Interactive notebook</title>
+    <title>PyWebIO</title>
 
     <link href="css/mditor.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
@@ -17,7 +17,7 @@
     <div tabindex="1" class="mditor preview">
         <div class="head">
             <ul class="toolbar">
-                <span id="title">Interactive notebook</span>
+                <span id="title">PyWebIO</span>
             </ul>
         </div>
         <div class="body">
@@ -34,6 +34,10 @@
     </div>
 </div>
 
+<footer class="footer">
+    Powered by <a href="https://github.com/wang0618/PyWebIO" target="_blank">PyWebIO</a>
+</footer>
+
 <script src="js/mustache.min.js"></script>
 
 <script src="js/codemirror.js"></script>