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.htmltemplates/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 小结

到这里,用户模块就算彻底完成了,同时也额外完成了课程模块的主页,因为这个和用户主页是同一个页面。

未来将完成课程模块。

Django 小实例S1 简易学生选课管理系统 8 CSS样式优化的更多相关文章

  1. Django 小实例S1 简易学生选课管理系统 12 CSS样式完善

    Django 小实例S1 简易学生选课管理系统 第12节--CSS样式完善 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 课程模块的逻辑代码到这里 ...

  2. Django 小实例S1 简易学生选课管理系统 11 学生课程业务实现

    Django 小实例S1 简易学生选课管理系统 第11节--学生课程业务实现 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 课程模块中,学生需要拥 ...

  3. Django 小实例S1 简易学生选课管理系统 10 老师课程业务实现

    Django 小实例S1 简易学生选课管理系统 第10节--老师课程业务实现 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 课程模块中,老师将要使 ...

  4. Django 小实例S1 简易学生选课管理系统 9 创建课程模型(model)

    Django 小实例S1 简易学生选课管理系统 第9节--创建课程模型(model) 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 对于课程模块, ...

  5. Django 小实例S1 简易学生选课管理系统 7 修改个人信息

    Django 小实例S1 简易学生选课管理系统 第7节--修改个人信息 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 用户模块除了注册登录之外,还 ...

  6. Django 小实例S1 简易学生选课管理系统 6 实现登录逻辑

    Django 小实例S1 简易学生选课管理系统 第6节--实现登录逻辑 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 1 业务逻辑 本教程第四节里 ...

  7. Django 小实例S1 简易学生选课管理系统 2 新建项目(project)并进行设置

    Django 小实例S1 简易学生选课管理系统 第2节--新建项目(project)并进行设置 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 0 ...

  8. Django 小实例S1 简易学生选课管理系统 3 创建用户模型(model)

    Django 小实例S1 简易学生选课管理系统 第3节--创建用户模型(model) 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 本文涉及到的新 ...

  9. Django 小实例S1 简易学生选课管理系统 4 实现登录页面

    Django 小实例S1 简易学生选课管理系统 第4节--实现登录页面 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 本文涉及到的新的额外知识点: ...

随机推荐

  1. 我的Python学习记录

    Python日期时间处理:time模块.datetime模块 Python提供了两个标准日期时间处理模块:--time.datetime模块. 那么,这两个模块的功能有什么相同和共同之处呢? 一般来说 ...

  2. NER为什么那么难

    命名实体识别(Name Entity Recognition) 是自然语言处理中一个比较基础的问题.要解决的问题是,从unstructure的文本当中找到实体并归类.当然我这么定义已经有了一定的bia ...

  3. javascriptRemke之深入迭代

    javascriptRemke之深入迭代 前言:"迭代"意为按照顺序反复多次执行一段程序,ECMAscript6中新增了两个高级特性:迭代器与生成器,使用这两个特性能更高效地实现迭 ...

  4. HAOI2012高速公路bzoj2752 (线段树,数学)

    题目大意: 给定一个长度为n的链,一共m次操作 对于每次操作 \(C\ l\ r\ x\)表示将第l个点到第r个点之间的所有道路的权值增加v \(Q\ l\ r\)在第l个到第r个点里等概率随机取出两 ...

  5. NX9.0和NX10.0做自定义操作可以用的函数

    NX9.0:LIBUFUNX.DLL int UF_OPER_ask_check_geom(void *,int *,unsigned int * *) int UF_OPER_ask_first_o ...

  6. part1 软件测试基础知识面试题(含答案)

    1.你的测试职业发展是什么? 测试经验越多,测试能力越高.所以我的职业发展是需要时间积累的,一步步向着高级测试工程师奔去.而且我也有初步的职业规划,前3年积累测试经验,按如何做好测试工程师的要点去要求 ...

  7. 我们一起来回顾一下Synchronized关键字吧

    多线程一直Java开发中的难点,也是面试中的常客,趁着还有时间,打算巩固一下JUC方面知识,我想机会随处可见,但始终都是留给有准备的人的,希望我们都能加油!!! 沉下去,再浮上来,我想我们会变的不一样 ...

  8. [Beta]the Agiles Scrum Meeting 10

    会议时间:2020.5.25 21:00 1.每个人的工作 今天已完成的工作 成员 已完成的工作 issue yjy 暂无 tq 暂无 wjx 实现创建.显示博客作业功能 增加博客作业功能 dzx 实 ...

  9. Django+Vue跨域配置与经验

    一.原理 同源?同源策略? 同源的定义是:两个页面的协议.端口和域名都相同 同源的例子: 不同源的例子: 同源策略SOP(Same origin policy)是一种浏览器约定,它是浏览器最核心也最基 ...

  10. 搬运2:早期写的探究printf

    目录: 1. 关于printf格式化输出 2. printf的一般形式 3. 转换说明 4. 格式化输出的意义 5. 转换说明修饰符 6. 修饰符中的标记 7. printf的返回值 ps:共3250 ...