[oldboy-django][1初始django]后台管理页面的布局 + djano母版(继承html)
完善学员管理系统
- 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 %}
[oldboy-django][1初始django]后台管理页面的布局 + djano母版(继承html)的更多相关文章
- Django用户登陆以及跳转后台管理页面3
Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...
- Django用户登陆以及跳转后台管理页面2
请先写好以下,再来替换文件 Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html from django.shortcuts ...
- Django基础-003 配置Django自带的后台管理,操作数据库
插入测试数据,可以自己写页面来插入数据 也可以使用Django自带的后台管理,来操作数据表 1.创建用户 python manage.py createsuperuser 2.在浏览器输入地址,进入D ...
- 8 功能6:后台管理页面,编辑文章,xss攻击
1.后台管理页面之文本编辑 # 后台管理url re_path(r'^cn_backend/$', views.cn_backend, name='cn_backend'), re_path(r'^c ...
- python:页面布局 后台管理页面之常用布局
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- HTML高级标签(2)————窗体分帧(2)————后台管理页面
使用frameset进行窗体分帧.构建简易的后台页面.这篇博客就作为一个简易后台管理页面的实战演练. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3px ...
- 老男孩Day16作业:登录、注册、后台管理页面(动态)
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面 二.博客地址:https://www.cnblogs.com/catepython/p/93 ...
- go语言实战教程之 后台管理页面统计功能开发(2)
上节内容介绍了后台管理页面统计功能开发(1),从功能介绍,到接口请求分析和归类,最后是代码设计.经过上节内容的介绍,已经将业务逻辑和开发逻辑解释清楚,本节内容侧重于编程代码实现具体的功能. 当日增长数 ...
- 用jquery-easyui的布局layout写后台管理页面
先在官网下载easyui文档 引入头部文件 <link rel="stylesheet" type="text/css" href="${pag ...
随机推荐
- SAP成都研究院马洪波:提升学习力,增强竞争力,收获一生乐趣
马洪波是SAP成都研究院CEC开发团队三大巨头之一.关于他的背景介绍,参考我以前的公众号文章:SAP成都研究院CEC团队三巨头之一:M君的文章预告. 其实早在2007年,互联网上已经有介绍马洪波的文章 ...
- Redis基础数据结构
Redis数据库中每个键值对都是由对象( c 的结构体对象)组成的. 数据库键总是一个字符串对象(string object) 数据库键的值可以使字符串对象.列表对象(list object).哈希对 ...
- signal函数:void (*signal(int,void(*)(int)))(int);
http://blog.chinaunix.net/uid-20178794-id-1972862.html signal函数:void (*signal(int,void(*)(int)))(int ...
- IBM MQ安装
一.下载MQ 可以去官方网站下载,我这次下了一个下载器从官方,然后通过下载器进行MQ的下载. 地址:https://www.ibm.com/developerworks/cn/downloads/ws ...
- 你所不知道的js的小知识点(1)
1.js调试工具 debugger <div class="container"> <h3>debugger语句会产生一个断点,用于调试程序,并没有实际功能 ...
- APCInject
#include <iostream> #include <Windows.h> #include <TlHelp32.h> using namespace std ...
- 牛客NOIP普及组R1 C括号(dp)
题意 题目链接 Sol maya普及组的dp都要想很长时间,我真是越来越菜了qwq 设$f[i][j]$表示当前到第$i$个位置,剩下$j$个左括号没被匹配 转移的时候判断一下即可 /* */ #in ...
- 基础篇(2):c++顺序结构程序设计
一个程序最基本的结构莫过于3种:顺序,选择,循环.这篇讲讲顺序结构. c++语言的运算符与表达式数量之多,在高级语言中是少见的,也使得它的语言功能十分完善. c++的运算符有单目与双目之分(作用于一个 ...
- tcl之变量-数组array
- 20181225 基于TCP/IP和基于UDP/IP的套接字编程
一.TCP/IP的套接字编程 服务器端代码: import socketserver = socket.socket() # 默认是基于TCP# 基于TCP的对象serve=socket.sock ...