网站搭建-django-学习成绩管理-12-卡片
系统：Windows 10
语言版本：Anaconda3-4.3.0.1-Windows-x86_64
编辑器：JetBrains PyCharm Community Edition 2018.2.2 x64
Django：2.1.4
Python：3.6.0
- 本系列介绍如何搭建一个网站，后端使用django框架
- 今天开始介绍一个单独的项目app
- 主要功能包括：学习成绩查询，数据统计分析
- 涉及前端模块：Datatables、ECharts、JQuery
Part 1：目标
- 对之前的页面稍作优化，使用Bootstrap4中支持的卡片功能
- 将整个背景色修改成一个颜色
- title位置增加一个小图标
修改前
使用卡片
title小图标
Part 2：代码
HTML
{% load staticfiles %}
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<title>成绩查询title>
<style>
.table-center{
text-align: center;
vertical-align: middle;
white-space: wrap;
}
style>
<link rel="shortcut icon" href="/static/pic/favicon.ico">
<script src="{% static 'js/jquery-3.3.1.min.js' %}" type="text/javascript">script>
<script type="text/javascript" src="/static/js/jquery.cookie.js">script>
<link rel="stylesheet" type="text/css" href="{% static 'font_awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}">
<script src="{% static 'bootstrap/js/bootstrap.js'%}" type="text/javascript">script>
<script src="{% static 'bootstrap/js/bootstrap3-typeahead.js'%}" type="text/javascript">script>
<link rel="stylesheet" type="text/css" href="{% static 'datatables/css/jquery.dataTables.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'datatables/css/buttons.dataTables.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'datatables/css/select.dataTables.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'datatables/css/dataTables.checkboxes.css' %}">
<script src="{% static 'datatables/js/jquery.dataTables.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/dataTables.bootstrap4.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/dataTables.responsive.min.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/vfs_fonts.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/dataTables.select.min.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/dataTables.checkboxes.min.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/dataTables.buttons.min.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/buttons.html5.min.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/jszip.min.js'%}" type="text/javascript">script>
<script src="{% static 'datatables/js/vfs_fonts.js'%}" type="text/javascript">script>
<script src="{% static 'js/echarts.js'%}" type="text/javascript">script>
head>
<body style="background-color:lightblue;">
<br/>
<div class='card m-auto bg-light' style="width: 96%;">
<div class='card-body'>
<div class='card-title bg-secondary text-white text-center'>学生成绩查询div>
<div class='card-text'>
<div class="row container-fluid" style="margin-top: 10px;margin-bottom: 10px">
<div class="col-md-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">班级span>
div>
<select id="class-name" class="form-control">
<option value="">option>
{% for class_name in all_class_name %}
<option value="{
{ class_name }}">{
{ class_name }}option>
{% endfor %}
select>
div>
div>
<div class="col-md-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">学生姓名span>
div>
<select id="student-name" class="form-control">
<option value="">option>
{% for student_name in all_student_name %}
<option value="{
{ student_name }}">{
{ student_name }}option>
{% endfor %}
select>
div>
div>
<div class="col-md-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">课程名称span>
div>
<select id="course-name" class="form-control">
<option value="">option>
{% for course_name in all_course_name %}
<option value="{
{ course_name }}">{
{ course_name }}option>
{% endfor %}
select>
div>
div>
div>
<div class="row container-fluid" style="margin-bottom: 10px">
<div class="col-md-4">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">第几次模拟考span>
div>
<select id="exam-info" class="form-control">
<option value="">option>
{% for exam_info in all_exam_info %}
<option value="{
{ exam_info }}">{
{ exam_info }}option>
{% endfor %}
select>
div>
div>
<div class="col-md-4">
<div class="input-group">
<button id="btn-search" type="button" class="btn btn-info">查询button>
div>
div>
div>
div>
div>
div>
<br/>
<div class='card m-auto bg-light' style="width: 96%;">
<div class='card-body'>
<div class='card-title bg-secondary text-white text-center'>查询结果div>
<div class='card-text'>
<div id="table-show" class="container-fluid rounded" style="width: 95%;margin-top: 30px">
<table width="100%" class="table table-condensed table-hover" id="table-query" style="table-layout:auto">
<thead class="thead-light">
<tr style="text-align: center;font-size:12px" id="tr-th">
<th>班级th>
<th>学生姓名th>
<th>第几次模拟考th>
<th>课程名称th>
<th>成绩th>
tr>
thead>
<tbody>
tbody>
table>
div>
div>
div>
div>
<br/>
<script src="{% static 'self-js/sg_first_page.js' %}" type="text/javascript">script>
body>
html>
Part 3：部分代码解读
- 卡片构成
<div class='card m-auto bg-light' style="width: 96%;">
<div class='card-body'>
<div class='card-title bg-secondary text-white text-center'>查询条件div>
<div class='card-text'>
div>
div>
div>
<br/>
代码截图
- 背景色设置，通过style进行设置
<body style="background-color:lightblue;">
- title小图片，将需要使用的图片放在对应的静态文件位置
<!-- favicon.ico 请求 -->
<link rel="shortcut icon" href="/static/pic/favicon.ico">
以上为本次的学习内容，下回见
长按图片识别二维码，关注本公众号
Python 优雅 帅气
