Django 小實例S1 簡易學生選課管理系統 第12節——CSS樣式完善
點擊查看教程總目錄
作者自我介紹：b站小UP主，時常直播編程+紅警三，python1對1輔導老師。
課程模塊的邏輯代碼到這里就已經全部完成了。
最后，我們完善下課程模塊的樣式。
1 - 優化課程主頁布局
新建static/css/main.css如下
.main-content {
width: 900px;
margin: 0 auto;
background: #e6e6f0;
}
.main-container {
width: 850px;
margin: 0 auto;
}
.main-content h3{
width: 850px;
}
.main-content .right-button{
float: right;
margin: 0 5px;
}
.main-bar {
width: 850px;
height: 30px;
}
.main-bar .search-form {
display: inline-block;
}
.main-bar .button {
height: 30px;
vertical-align:top;
border:none;
color:#eee;
background:#4a2c98;
font-size: 16px;
border-radius: 5px;
}
.main-bar .input{
width: 150px;
height: 24px;
margin: auto 10px;
vertical-align:top
}
.main-bar .right-button {
float: right;
margin: 0 5px;
}
然后再在templates/course/nav.html中導入這個css文件，
即在</head>之前，添加如下一行代碼：
<link href="{% static 'css/main.css' %}" rel="stylesheet">
由於課程模塊所有模板都是繼承的templates/course/nav.html，所以這個樣式是對所有模板生效的。
不過這里樣式會有一些問題，主頁的中間內容面板沒有縱向填滿，如下圖
而如果給.main-content設置height: 100%;導致了面板縱向超出，在只有一條記錄的情況下頁面還可以下滑，如下圖
所以這里需要調整下導航條和主內容的position屬性，改為fixed。
修改后的static/css/nav.css中的.nav屬性如下
.nav {
background: #4a2c98;
position: fixed;
width: 100%;
color: #ccc;
z-index: 1;
}
修改后的static/css/main.css中的.main-content屬性如下
.main-content {
width: 900px;
margin: 0 auto;
background: #e6e6f0;
min-height: 100%;
position: fixed;
left: 0;
right: 0;
padding: 60px 20px;
top: 0;
}
2 - 優化課程列表樣式
課程模塊中，有一些頁面有表格(table)樣式的列表，這里優化下列表樣式。
新建static/css/list.css如下
table.item-list {
margin: 10px 0;
width: 850px;
}
.item-list th,
.item-list td {
box-sizing: content-box;
width: fit-content;
padding: 3px;
text-align: left;
border-bottom: 1px solid #C0C0C0;
}
.item-list tr:nth-child(even) {
background-color: #dfdfdf;
}
.item-list th {
background-color: #9481c5;
}
/* for course table col width*/
.item-list th.course-no,
.item-list td.course-no {
width: 70px;
}
.item-list th.course-name,
.item-list td.course-name {
width: 150px;
}
.item-list th.course-credit,
.item-list td.course-credit {
width: 40px;
}
.item-list th.course-number,
.item-list td.course-number {
width: 70px;
}
.item-list th.course-year,
.item-list td.course-year {
width: 50px;
}
.item-list th.course-semester,
.item-list td.course-semester {
width: 30px;
}
.item-list th.course-status,
.item-list td.course-status {
width: 100px;
}
.item-list th.course-teacher,
.item-list td.course-teacher {
width: 70px;
}
.item-list th.course-operation,
.item-list td.course-operation {
width: 150px;
}
.item-list th.course-schedule,
.item-list td.course-schedule {
width: 200px
}
.item-list td.course-schedule {
font-size: 10px;
}
.item-list th.course-operation.student-course,
.item-list td.course-operation.student-course {
width: 80px;
}
.item-list th.course-year-semester,
.item-list td.course-year-semester {
width: 70px;
}
需要導入這個css文件的模板有：
templates/course/student/home.htmltemplates/course/teacher/home.htmltemplates/course/teacher/course.html
老師和學生的主頁有課程列表，所以需要導入這個css文件。
而老師的課程詳情頁里有選課的學生列表，所以也需要導入這個css文件。
導入方法為，在block塊中（比如{% block content %}這行后面），添加下面一行代碼：
<link href="{% static 'css/list.css' %}" rel="stylesheet">
3 - 優化表單樣式
課程模塊還有這幾個使用了form表單的頁面需要優化：
templates/course/teacher/create_course.htmltemplates/course/teacher/create_schedule.htmltemplates/course/teacher/score.htmltemplates/course/student/rating.html
新建static/css/form.css如下
.create-update-from {
margin: 10px;
}
.create-update-from p{
padding: 5px;
}
.create-update-from p:nth-child(even) {
background-color: #dfdfdf;
}
.create-update-from p:nth-child(odd) {
background-color: #c8c8d2;
}
.create-update-from p label{
display:inline-block;
width: 200px;
}
.create-update-from .submit-button {
margin-top: 20px;
}
.create-update-from .submit-button input {
width: 80px;
margin-right: 20px;
}
將該css文件導入上面說的需要的四個模板中，導入方法同本文第二部分，
即在block塊中（比如{% block content %}這行后面），添加下面一行代碼：
<link href="{% static 'css/form.css' %}" rel="stylesheet">
4 - 特殊處理學生課程詳情頁
學生課程詳情頁這里打算不像上面那樣簡單的展示，所以做了一個特殊的樣式來展示學生課程詳情信息。
static/css/details.css如下
ul.course-details {
margin: 20px;
list-style: none;
padding: 0 20px;
}
li.course-detail {
min-height: 24px;
padding: 2px;
}
li.course-detail .detail-name {
display: inline-block;
vertical-align: top;
width: 150px;
font-weight: bolder;
}
li.course-detail span.course-schedules {
display: inline-block;
}
ul.course-details li:nth-child(odd) {
background-color: #ccc;
}
ul.course-details li:nth-child(even) {
background-color: #dfdfdf;
}
將該css文件導入templates/course/student/course.html模板中，導入方法同上，
即在block塊中（比如{% block content %}這行后面），添加下面一行代碼：
<link href="{% static 'css/details.css' %}" rel="stylesheet">
5 - static 處理
模板中導入css的link標簽里，使用了模板語法中的static標簽(tag)，
所以使用了static標簽的模板都要在開頭導入這個標簽。
雖然templates/course/nav.html開頭有{% load static %}，
但是繼承它的子模板中如果用到了static標簽，仍然需要再導入一遍。
導入方法為在模板文件的{% extends "course/nav.html" %}這一句后面，添加這樣一行代碼
{% load static %}
補充說明：模板文件中如果出現了繼承語句{% extends "..." %}， 則該繼承語句必須在模板的第一行。所以新增只能在這后面增添。
不過這樣子一個一個增添{% load static %}，還是太過麻煩，尤其是需要改動多個模板文件時。
除了一個一個模板里面添加這個，Django還給我們實現了一種方便快捷的手段：
在設置文件中修改，
在SSCMS/settings.py的TEMPLATES中，給其Django模板（一般是第一個）配置字典中的OPTIONS屬性，添加這樣一個配置關系：
'builtins': ['django.templatetags.static']
修改后的TEMPLATES設置如下
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')]
,
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
'builtins': ['django.templatetags.static']
},
},
]
添加這個后，模板開頭有沒有{% load static %}都可以用static標簽了。
不過最好去除掉無用代碼，刪掉所有之前模板中添加的{% load static %}。
5 - 完結
到這里，本項目就徹底完成了。
完成效果可見：
- 本人b站投稿：https://www.bilibili.com/video/BV1er4y1w7ty
- 本教程第0節：初步介紹與演示