正心全栈编程-文档站

Appearance

静态页面编写 ​

首先先实现页面的编写

在课程开始之前，静态页面已经编写好了，但是为了在学习的时候能够对相关知识掌握的更加熟练一些，课程内我们还是对对应的逻辑再走一遍。

首先编写后端路由

python
# filename: forum/views/index.py

from flask import Blueprint, current_app, render_template

index_bp = Blueprint("index", __name__, url_prefix='/')


@index_bp.route("/")
def index():
    return render_template("forum/index.html")

然后返回页面内容

html
<!--index.html-->
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>正心论坛</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <script src="/static/layui/layui.js"></script>
  </head>
  <body></body>
</html>

需要提前下载 layui 的静态文件 layui.dev

页面头部 ​

1、没有登录之前不显示个人信息，只显示左上角的登录按钮。

html
<div class="header">
  <div class="header-demo">
    <a href="/" class="logo"> 正心全栈论坛 </a>

    <!--中间分类栏-->
    <ul class="menu">
      <li class="active" data-cid="0"><a href="javascript:;">最新</a></li>
      <li data-cid="1"><a href="javascript:;">基础</a></li>
      <li data-cid="2"><a href="javascript:;">爬虫</a></li>
      <li data-cid="3"><a href="javascript:;">数据分析</a></li>
      <li data-cid="4"><a href="javascript:;">全栈</a></li>
      <li data-cid="5"><a href="javascript:;">交流区</a></li>
    </ul>

    <!--登录注册栏-->
    <div class="login">
      <a href="javascript:;" class="login_btn">登录</a> /
      <a href="javascript:;" class="register_btn">注册</a>
    </div>

    <!-- 用户登录后显示下面 -->
    <div class="login" style="display: none">
      <img src="/static/images/person01.png" class="login-pic" alt="" />
      <a href="#">用户张三</a>
      <a href="#">退出</a>
    </div>
  </div>
</div>
css
* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/*页面头部导航栏*/
.header {
  height: 59px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

.header .header-demo {
  width: 1200px;
  height: 59px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header .header-demo .logo {
  font-size: 22px;
  width: 140px;
  height: 33px;
  line-height: 59px;
}

.header .header-demo .menu {
  /*菜单栏*/
  display: flex;
  flex-direction: row;
  width: 600px;
  height: 59px;
  line-height: 59px;
  font-size: 14px;
  color: #666;
}

.menu li {
  height: 59px;
  padding: 0 30px;
}

.menu li:hover {
  border-bottom: 2px solid #16baaa;
}

.menu li.active a {
  color: #16baaa;
  height: 59px;
}

.menu li.active {
  border-bottom: 2px solid #16baaa;
  color: #16baaa;
}

.header .login {
  line-height: 59px;
  font-size: 14px;
  color: #666;
}

.header .login a:hover {
  color: #16baaa;
}

.header-demo .login-pic {
  /*退出显示内容*/
  height: 30px;
  line-height: 59px;
  margin-right: 5px;
}

页面中间部分 ​

html
<div class="main">
  <!--占位 页面主要内容-->
</div>
css
.main {
  min-height: calc(100% - 151px); /* 减去页脚的高度 */
}

.main {
  /*内容组件栏*/
  width: 1200px;
  overflow: hidden;
  margin: 20px auto 0;
  display: flex;
  gap: 10px;
}

.login_form,
.register_form {
  padding: 20px;
}

页面尾部 ​

html
<!--页脚栏-->
<div class="footer">
  <div class="footer-links">
    <a href="">关于我们</a>
    <span>|</span>
    <a href="">联系我们</a>
    <span>|</span>
    <a href="">招聘人才</a>
    <span>|</span>
    <a href="">友情链接</a>
  </div>
  <p class="copyright">CopyRight © 2024 正心全栈编程 All Rights Reserved</p>
  <p class="copyright">电话：010-****888 湘 ICP 备*******8号</p>
</div>
css
.footer {
  background: #262f38;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
}

.footer_links span {
  margin: 0 5px;
}

.footer-links {
  color: #fff;
  font-size: 12px;
}

.footer-links a,
.footer-links span {
  color: #fff;
  font-size: 12px;
}