Django 小實例S1 簡易學生選課管理系統 8 CSS樣式優化

Django 小實例S1 簡易學生選課管理系統 第8節——CSS樣式優化
點擊查看教程總目錄
作者自我介紹：b站小UP主，時常直播編程+紅警三，python1對1輔導老師。

前面的幾節下來，用戶模塊基本功能已經完成了，但是網頁的樣式十分簡陋。
所以這里需要對樣式進行美化。
前端網頁美化樣式，需要使用CSS，沒聽過CSS的推薦閱讀下
CSS 簡介
CSS 語法

首先，需要在項目的static文件夾下，新建文件夾css用於存放css文件。

同時需要修改下設置，把這個css文件夾放到STATICFILES_DIRS中，使得 Django也會在那里查找靜態文件。

即在SSCMS/settings.py末尾添加如下代碼

STATICFILES_DIRS = [
   os.path.join(BASE_DIR, "static"),
]

1 優化登錄頁樣式

先為登錄頁面添加樣式，在css文件夾下新建login.css如下

body {
    margin: 0;
}

.main-container {
    position: absolute;
    width: 100%;
    height:100%;
    background: #4a2c964d;
    background: linear-gradient(rgba(230, 100, 101, 0.2), rgba(145, 152, 229, 0.3)),
        linear-gradient(#9198e560, #4a2c9880);
}

.main-header {
    height: 45%;
    text-align: center;
    font-size: 40px;
    color: #4a2c98;
}

.main-header .main-title {
    font-size: 50px;
    margin-top: 5%;
}

.main-header .welcome-message {
    font-size: 26px;
    margin-top: 60px;
    color: #ff5722;
}

.login-container {
    height: 40%;
    width: 400px;
    margin: 0 auto;
    background: #eee;
    border-radius: 10px;
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, .33);
    overflow: hidden;
}

.login-container .login-kind {
    padding-top: 10%;
    font-size: 30px
}

.login-container .login-kind a {
    text-decoration: none;
    background: #4a2c98;
    color: #eeeeee;
    padding: 10px;
    text-align: center;
    display: block;
    width:50%;
    margin: 0 auto;
    border-radius: 10px;
}


/* for login detail page  */
.login-kind-title {
    height: auto;
    padding: 2%;
    text-align: center;
    color: #4d2f99;
    width: 96%;
    font-size: 22px;
    display: block;
    background: #ccc;
    overflow: hidden
}


.login-container .form p,
.login-container .form .submit-button {
    widht: 90%;
    padding-top: 4%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans", 
        Verdana, Arial, sans-serif;

}


.login-container .form p label {
    padding-right: 10px;
    width: 80px;
}

.login-container .form p input {
    clear: both;
    padding: 8px;
    width: 60%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-container .form .submit-button,
.login-container .return-button {
    margin: 5px auto 0;
    padding-top: 20px;
}

.submit-button input,
.submit-button a {
    border: none;
    text-decoration: none;
    font-size: 18px;
    background: #4a2c98;
    color: #eeeeee;
    padding: 5px 0;
    text-align: center;
    display: block;
    width: 30%;
    margin: 5px 10px;
    border-radius: 10px
}

.return-button a{
    border: none;
    text-decoration: none;
    font-size: 18px;
    background: #cccccc;
    color: #4a2c98;
    padding: 5px 0;
    text-align: center;
    display: block;
    width: 30%;
    margin: 0 auto;
    border-radius: 10px;
}

並在templates/user/background.html的第8行和第九行之間，
即</title>之后、</head>之前，添加一行如下代碼

    <link href="{% static 'css/login.css' %}" rel="stylesheet">

即可導入css文件。
注意：要使用{% static 'css/login.css' %}語法，必須在模板文件中先使用語句{% load static %}，這個之前就已經寫在templates/user/background.html中了，所以不需要再寫一遍。

運行項目，此時登錄主頁效果如下圖

學生登錄詳情頁效果如下圖

2 優化注冊頁面樣式

注冊頁面和用戶信息修改頁面，核心內容都是表單，且基本相似。
所以注冊頁面的樣式也可以給用戶信息修改頁面的樣式一起設置

新建static/css/register.css如下

.register-container {
    height: 40%;
    width: 500px;
    margin: 100px auto;
    background: #eee;
    border-radius: 10px;
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.33);
    overflow: hidden;
}


.register-container .register-title {
    height: auto;
    padding: 2%;
    justify-content: center;
    text-align: center;
    color: #ccc;
    width: 96%;
    font-size: 22px;
    display: block;
    background: #4d2f99;
    overflow: hidden;
}

.register-container .form p {
    width: 90%;
    padding-top: 15px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Roboto", "Lucida Grande", "DejaVu Sans", "Bitstream Vera Sans",
        Verdana, Arial, sans-serif;
    word-break: break-all;
    flex-flow: wrap;
}

.register-container .form p label {
    padding-right: 10px;
    width: 80px;
}


.register-container .form p input,
.register-container .form p select {
    clear: both;
    padding: 8px;
    width: 60%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.register-container .form p span.helptext {
    color: slategrey;
}

.register-container .form p .submit-button {
    border: none;
    text-decoration: none;
    font-size: 18px;
    background: #4a2c98;
    color: #eeeeee;
    padding: 5px 0;
    text-align: center;
    display: block;
    width: 30%;
    margin: 0 10px 30px;
    border-radius: 10px;
}

.register-container .return-button {
    padding-left: 20px;
    padding-bottom: 10px;
}

在templates/user/register.html和templates/user/update.html中，
head標簽之前（即<head>之前），添加下面一行代碼導入static。

{% load static %}

head標簽內部最后（即</head>之前），添加下面一行代碼。

    <link href="{% static 'css/register.css' %}" rel="stylesheet">

運行項目，此時注冊頁面效果如下圖

用戶信息修改頁面效果如下圖

3 - 修改主頁樣式

修改登錄后的主頁樣式，即未來的課程主頁的樣式
添加static/css/nav.css如下

body,p {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
}

body {
    background: #ccc;
}

.nav {
    background: #4a2c98;
    width: 100%;
}

.nav a {
    color: #ccc;
    text-decoration: unset;
}

.nav .nav-title,
.nav .name-logo,
.nav .log-out  {
    display: inline-block;
    margin: 5px;
}

.nav p {
    display: inline-block;
    float: left;
    padding-left: 10px;
}

.nav .nav-title {
    font-size: 24px;
    line-height: 26px;
    height: 26px;
    vertical-align: top;
}


.nav p.main-title {
    margin-right: 10px;
}

.nav p.sub-title {
    border-left: 3px solid #cccccc;
}

.nav .name-logo,
.nav .log-out  {
    float: right;
    margin: 8px 5px 0;
    vertical-align: top;
}

.nav .name-logo .user-name {
    background: #ccc;
    border-radius: 50%;
    width: 24px;
    height: 24px;

    text-align: center;
    line-height: 24px;
    font-size: 16px;
    font-weight: bold;
}

.nav .name-logo .user-name a {
    color: #4a2c98;
}

.nav .log-out a {
    margin: 5px;
    background: #ccc;
    color: #4a2c98;
    border-radius: 5px;
    text-decoration: none;
    padding: 0 5px;
}

在templates/course/nav.html中，
head標簽內部最后（即</head>之前），添加下面一行代碼。

<link href="{% static 'css/nav.css' %}" rel="stylesheet">

運行項目，此時登錄成功后主頁效果如下

4 小結

到這里，用戶模塊就算徹底完成了，同時也額外完成了課程模塊的主頁，因為這個和用戶主頁是同一個頁面。

未來將完成課程模塊。