[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 ...
随机推荐
- linux 命令——21 find(转)
在 使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命 令长度有限制,这样在find命令运行几分钟之后,就 ...
- POJ2112 Optimal Milking---二分+Floyd+网络流
题目链接: https://vjudge.net/problem/POJ-2112 题目大意: k个机器,每个机器最多服务m头牛. c头牛,每个牛需要1台机器来服务. 告诉你牛与机器每个之间的直接距离 ...
- 进程加载与segment
elf文件是一组结构体和数据的组合. elf文件是一种文件格式,这种格式定义了进程加载器如何读取elf文件的内容. elf文件的程序头或者segment对如何加载(读取)做了说明.
- java基础编程—统计二进制数中1的个数
题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 题目代码 /** * 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. * Created by YuKai ...
- Java程序设计第四次作业内容 第五次作业10月9号发布,为第三章全部例题
第六题:使用判断语句,根据数字,输出对应的中文是星期几? 直接使用一个if语句的情况 int weekDay=3; if(weekDay==1){ sop("今天是星期一"); } ...
- MySql学习笔记05
复习 GROUP BY 语句 HAVING 子句 -- 查询每个分类商品所对应的库存总量中,高于1000的总量 select category_id,sum(num) s from t_item gr ...
- PHP实现的敏感词过滤方法
PHP实现的敏感词过滤方法,以下是一份过滤敏感词的编码.有需要可以参考参考. /** * @todo 敏感词过滤,返回结果 * @param array $list 定义敏感词一维数组 * @para ...
- 【css】如何实现响应式布局
“自适应网页设计”到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content=&qu ...
- Ecshop之ajax修改表里的状态(函数化处理)
目录 功能: 效果: 思路: 页面里 控制器里 功能: `点击图片,修改表里的状态值` 效果: 思路: 页面里在img里点绑定onclick件事,调用js函数listTable.toggle oncl ...
- 数据分析处理库Pandas——概述
导入Pandas库 创建DataFrame结构 读取.csv文件 titanic_train.csv文件:https://files.cnblogs.com/files/gloria-zhang/ti ...