正心全栈编程-文档站

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;
}