[oldboy-django][1初始django]后台管理页面的布局 + djano母版(继承html)

时间:2023-08-25 20:43:38
 完善学员管理系统

    - bootstrap fontawesome
- 分页,路径导航,表格(class样式),消息图标(i标签),邮件图标(i标签)
- 响应式导航
@media(min-width, max-width来设置样式)
导航
- 后台管理布局(三大块,header, menus, content; menus, content用Position)
a. header: min-width:1190px; height:48px; line-height:48px
//line-height:48px,这样header里面的所有都不用设置行高了
- logo (float:left,其下面的元素不用设置float)
可以是文字,也可以是图片标签(暂时只能是这两种)
- top-menus(float:left)
- <div class='top-menus left'>
<a>首页</a>
<a>视频</a>
<a>影评</a>
</div>
- 此时a的display:inline-block, 还是一行拍着,但是可以设置padding
注意和rmeuns下面a的display:block注意区分
- rmeuns
- avatar
当鼠标悬浮在头像时,出现个人信息的样式
.pg-header .avatar:hover a{
display:block;
} .c1:hover .c2{} // hover c1,它的孩子c2发生变化
b.body(menus,content)
-- menus: position:absolute,沾满整个高度,top:48px, left:; width:200px;bottom:;
-- content: postion:absolute, top:48px; left:200px; bottom:; overflow:scroll
overflow: scroll表示当内容超过页面高度时,会出现滚动条 - django母版
母版: 定义所有页面的公共部分(layout.html)
{% block html %} {% endblock %}
{% block js %} {% endblock %}
{% block css %} {% endblock %}
子板:继承母版,并自定义私有的内容
{% extends "layout.html" %}
{% block html %}定义自己的html{% endblock %}
{% block js %}定义自己的js{% endblock %}
{% block css %}定义自己的css{% endblock %}