[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 ...
随机推荐
- COGS 1043. [Clover S2] Freda的迷宫
★ 输入文件:mazea.in 输出文件:mazea.out 简单对比时间限制:1 s 内存限制:128 MB Freda 的迷宫 (mazea.pas/.c/.cpp) 题目叙述 F ...
- coursera_ML_1
机器学习定义: A computer program is said to leran from experience E with respect to some task T and some ...
- StackOverflow之旅<1>------{去掉烦人的"!=null"判断}
问题 为了避免空指针调用,我们经常会看到这样的语句 if (someobject != null) { someobject.doCalc(); } 最终,项目中会存在大量判空代码,多么丑陋繁冗!如何 ...
- 用户在设置密码时,提醒请输入半角字符(vue+element+valid)
要保证callback()只有一个出口 rules:{ newPassword: [{validator:(rule,newPassword,callback)=>{ var all = fal ...
- 2018.1.4 UML 第三章 用例图
第三章 用例图 (1)参与者 是指系统以外的需要使用系统或与系统交互的外部实体,吧阔人.设备.外部系统等. (2)参与者之间的关系 泛化关系的含义是参与者的共同行为提取出来表示成通用行为,并描述成超类 ...
- 深入理解计算机系统_3e 第十一章家庭作业 CS:APP3e chapter 11 homework
注:tiny.c csapp.c csapp.h等示例代码均可在Code Examples获取 11.6 A. 书上写的示例代码已经完成了大部分工作:doit函数中的printf("%s&q ...
- Vuex的简单了解
vuex的官网了解:https://vuex.vuejs.org/zh/guide/ 一.什么是vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所 ...
- vue watch深度监听对象,实现数据联动
当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值 <template> <input type="text" v-model="a.a1.a1 ...
- 破解studio 3T
方法一: 打开注册表:regedit 计算机\HKEY_CURRENT_USER\Software\JavaSoft\Prefs\3t\mongochef\enterprise 将里面得数据清零,又是 ...
- C盘扩容 更改C盘大小
最近对xamarin有点兴趣,虽然网上的评论嘘声一片, 对于只想试一试的心态来说,对于网上所说的什么开发后的程序卡顿,可以用的三方库很少等, 我只想说,你们说的我不信,我要试一试看 我本来已经安装了v ...