目录
在static目录下创建css文件夹,并在其中创建main.css文件
在static目录下新建js文件夹,在其中创建mai.js文件
(一)、配置主路由 - students里的urls.py文件
(三)、创建添加学生页面 --- addstudent.html
(四)、创建显示学生信息模板 - showstudent.html
一、开始任务
-
添加与显示学生信息
二、实现项目
(一)、创建Django项目---students
(二)、准备静态文件夹static
-
在static目录下创建css文件夹,并在其中创建main.css文件
main.css源码如下:
* { margin: 0px; padding: 0px; border: none; } html, body { height: 100%; } .w1200 { width: 1200px; } .layui-header, .layui-footer { text-align: center; margin: auto; } .layui-header { padding: 40px 0px; line-height: 1.5em; position: fixed; background-image: linear-gradient(to bottom, olive, deepskyblue, cornflowerblue, mediumorchid); } .layui-footer { padding: 30px 0px; position: relative; background-image: linear-gradient(to bottom, mediumorchid, cornflowerblue, deepskyblue, olive); } .layui-footer a { margin: 0px 20px; } .layui-footer a:hover { color: red; } .layui-footer p { margin: 15px 0px; } .bold { font-weight: bold; } .middle { display: flex; flex-direction: row; margin: 5px 0px; min-height: 500px; } .left-menu { flex: 1; background: azure; padding: 20px; } .right-content { flex: 5; margin-left: 5px; background: azure; padding: 20px; } .test-info h4 { font-size: 20px; font-weight: bolder; } .test-info p { font-size: 15px; line-height: 2em; text-indent: 2em; } form { margin: auto; } form table { width: 400px; margin: auto; border: 1px solid black; padding: 50px 20px !important; } form table th { width: 100px; text-align: right; } form table td { width: 250px; padding: 0px 10px; } tr { line-height: 4em; } table tr:last-child { text-align: center; } table caption { font-weight: bolder; padding: 10px 0px; font-size: 1.5em; } .stuinfo { width: 90% !important; margin: auto; text-align: center; } .stuinfo table { margin: auto !important; width: 90% !important; } .stuinfo table td { width: 25%; } .stuinfo table tr { border-bottom: 1px solid black; } .stuinfo thead { background: black; } .stuinfo thead th { color: white; border-right: 1px solid white; } .stuinfo table tr:nth-child(even) { background: #2D93CA; } .stuinfo table tr:hover td { background: #00FFFF; }
(三)、添加layui框架
-
在static里添加layui框架
- cgn6https://pan.baidu.com/s/1gXt5Qd5U5GJUUSk2dzYNtA