[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 ...
随机推荐
- pta 编程题8 Tree Traversals Again
其它pta数据结构编程题请参见:pta 这次的作业考察的是树的遍历. 题目的输入通过栈的pop给出了树的中序遍历的顺序.根据push和pop的顺序构造树的方法为:定义一个变量father来确定父节点, ...
- World Wind Java开发之十四——添加WMS地图服务资源(转)
数据是GIS的核心,没有数据一切无从谈起,Internet上有很多在线WMS地图服务资源,我们可以好好利用这些数据资源,比如天地图.必应地图.NASA.OGC数据服务等等. 在我们国家常用的还是天地图 ...
- 3203 数组做函数参数----排序函数--C语言版
3203: 数组做函数参数----排序函数--C语言版 时间限制: 1 Sec 内存限制: 128 MB提交: 253 解决: 151[提交][状态][讨论版][命题人:smallgyy] 题目描 ...
- Windows服务调试
Windows 服务(附服务开发辅助工具) 转: http://www.cnblogs.com/BoyXiao/archive/2011/08/07/2130208.html 近来在 Windows ...
- C# 文件操作 常用的类
File------实用类,提供许多静态方法,用于移动.删除.和复制文件. Directory------实用类,提供许多静态方法,用于移动.删除和复制目录. Path------ 实用类,用于处理路 ...
- @property 关键字的区别详解
@property 关键字的区别详解:assign 与weak. __block 与 __weak.strong 与copy的区别 字数911 阅读269 评论2 喜欢8 在开发中经常使用属性@pro ...
- C++ 限定名称查找
限定名称查找规则实际归纳下来很简单,先对::左边的名称进行查找(遵循,限定,无限定),然后在左边查找到的(此时只查找类型名称)名字的作用域内(含内联名称空间件)查找右边出现的名字,查找到即存在(故可以 ...
- SpringBoot之自动配置原理
我在前面的Helloworld的程序中已经分析过一次,配置原理了: 1).SpringBoot启动的时候加载主配置类,开启了自动配置功能 @EnableAutoConfiguration 2).@En ...
- java 获取request中的请求参数
1.get 和 post请求方式 (1)request.getParameterNames(); 获取所有参数key后.遍历request.getParameter(key)获取value (2)re ...
- CentOS下安装php gd库报错Error: php56w-common conflicts with php-common-5.3.3-48.el6_8.x86_64
因为服务器缺少php gd库,因为系统是centos,就是用yum去安装,一安装就报错如下: [root@iZ28sdxghs2Z ~]# yum install php-gd Loaded plug ...