网站搭建-django-学习成绩管理-12-卡片

本系列教程将指导您如何利用django框架搭建一个网站，专注于后端开发。本文将介绍一个独立的项目应用，主要功能包括学习成绩查询和数据统计分析。前端模块将使用datatables、echarts和jquery来增强用户体验。

Part 1：目标

为了优化之前的页面，我们将利用Bootstrap4提供的卡片功能进行改进。具体改进包括将整个背景色设为统一的颜色，并在标题位置添加一个小图标。

修改前：

使用卡片后：

标题处的小图标：

Part 2：代码

上班人导航

上班人必备的职场办公导航网站

下载

HTML代码如下：

{% load staticfiles %}
<meta charset="utf-8"></meta>
<meta content="width=device-width,initial-scale=1,shrink-to-fit=no" name="viewport"></meta>
<title>成绩查询</title>
<style>
    .table-center{
        text-align: center;
        vertical-align: middle;
        white-space: wrap;
    }
</style>
<link href="/static/pic/favicon.ico" rel="shortcut icon"></link>
<link href="{% static 'font_awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css"></link>
<link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css"></link>
<link href="{% static 'datatables/css/jquery.dataTables.css' %}" rel="stylesheet" type="text/css"></link>
<link href="{% static 'datatables/css/buttons.dataTables.min.css' %}" rel="stylesheet" type="text/css"></link>
<link href="{% static 'datatables/css/select.dataTables.min.css' %}" rel="stylesheet" type="text/css"></link>
<link href="{% static 'datatables/css/dataTables.checkboxes.css' %}" rel="stylesheet" type="text/css"></link>
<br></br>
<div class="card">
    <div class="card-header">
        学生成绩查询
        <i class="fa fa-search"></i>
    </div>
    <div class="card-body">
        班级
        {% for class_name in all_class_name %}
            {{ class_name }}
        {% endfor %}
        <br></br>
        学生姓名
        {% for student_name in all_student_name %}
            {{ student_name }}
        {% endfor %}
        <br></br>
        课程名称
        {% for course_name in all_course_name %}
            {{ course_name }}
        {% endfor %}
        <br></br>
        第几次模拟考
        {% for exam_info in all_exam_info %}
            {{ exam_info }}
        {% endfor %}
        <br></br>
        <button type="button" class="btn btn-primary">查询</button>
    </div>
</div>
<br></br>
<div class="card">
    <div class="card-header">
        查询结果
    </div>
    <div class="card-body">
        <table class="table table-condensed table-hover" id="table-query" style="table-layout:auto" width="100%">
            <thead class="thead-light">
                <tr id="tr-th" style="text-align: center;font-size:12px">
                    <th>班级</th>
                    <th>学生姓名</th>
                    <th>第几次模拟考</th>
                    <th>课程名称</th>
                    <th>成绩</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
<br></br>

Part 3：部分代码解读

1. 卡片构成

卡片的结构由以下部分组成：

<div class="card">
    <div class="card-header">
        查询条件
        <i class="fa fa-search"></i>
    </div>
    <div class="card-body">
        <!-- 具体内容 -->
    </div>
</div>

2. 背景色设置

通过

style

<div class="card" style="background-color: #f8f9fa;">
    <!-- 卡片内容 -->
</div>

3. 标题小图片

将需要使用的图片放置在对应的静态文件位置，并通过以下代码添加到标题中：

<link href="/static/pic/favicon.ico" rel="shortcut icon"></link>