Bootstrap组件 和 Font Awesome组件
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目
Font Awesome 字体可以提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。
总而言之 为了好看
-bootstrap存在响应式布局： @media()
即当页面分辨率小于1060(比喻)px时，布局会发生变化
-导航条 -路径导航 等等
-font awesome寻找图标
将其放入static库plugins目录中
目标：完善学员管理系统
-后台管理布局 一大堆的CSS样式
思路三大框先定好 .
pege-header 头部
.page-body 身体 里面分两部分 .page-menus 菜单 .page-content 内容
然后依次补充细节内容 利用bootstrap 和font-awesome装修页面 最后利用继承 {% extends ’layout.html‘ %}母版layout
分别三次继承 xx管理中的 {css}部分 {xx}部分 {js}部分
下面的关于CSS样式的学习和复习
body{
margin:0}; 表示header部分与页面顶部的距离
注意！ 与bootsrap组件使用会出现顶部留出一个空白行，这是一个和botstrap中的common中margin属性冲突了，注释掉即可
.left{ .right{
float:left} float:right}
用于跟随页面左右部
.page- header {
height:48px //距离顶部48个像素
min-width：1190px //当页面宽度小于1190px，自动增加可以左右移动的拉条
background-color:#we6da4; //背景颜色
line-height:48px； //用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。
}
.page- header .logo{ //头部的logo部分
color: white;
font-size: 18px; 字体大小
width: 200px;
text-align: center; 在其范围里面位置
border-right: 1px solid #449d44; 设置边框
}
.pgae -header .avatat{
padding: 0 20px ； 设置上下内边距0 左右内边距20px
position: relative;
}
.page- header . avatar img{
border -radius : 50% ://元素添加圆角边框：
width: 48px;
height: 48px;
}
.page - header .avatar .user-info {
position : absolute; 绝对定位属性 绝对距离页面顶部48px 右面0px
width:200px;
top:48px;
right：0；
background-color:white;
border:1px solid #ddddddd;
color: black;
z-index;100;
display;none; 目的是鼠标悬停时才浮现
}
.page - header .avatar .user-info a {
display: block;
padding:1px;
}
.page -header .avatar:hover .user-info{
display:block; 设置鼠标悬停user-info标签时display取消
}
.menus{
width:200px;
position:absolute;
left:0;
bottom:0;
top:48px;
border:1px solid #d0e9c6;
background-color:#faebcc;
}
.page- bodu .menus a{
display:block; 一个a标签一行
padding:10px 5px ;
border-bottom: 1px solid #dddddd
}
.content{
position:absolute;
left:200px
right:0;
bottom:0;
top:48px;
min-widthj:900px
overflow:scroll;溢出元素内容区的内容会如何处理。提供一种滚动机制有可能即使元素框中可以放下所有内容也会出现滚动条。
z-index:99
}
后台管理的html
[/span>div class="page-header"
[/span>div class="logo left"
[/span>div class="avatar right "
[/span>img src="/static/images/老婆.jpg"
[/span>div class="user-info"
[/span>a
[/span>a
[/span>div class="rmenus right"
[/span>a class="fa fa-comment-o"
[/span>a class="fa fa-envelope-open"
[/span>a class="fa fa-cart-arrow-down"
[/span>div class="page-body"
[/span>div class="menus"
[/span>a
[/span>a
[/span>a
[/span>div class="content"
[/span>ol class="breadcrumb"
[/span>lia href="#"
[/span>lia href="#"
[/span>li class="active"
cookie是一个保存在浏览器客户端的”键值对“，可以设置超时时间 可以在html的request中查询
是客户端向服务端发送的 客户端每次请求访问服务端，都会带着cookie去
需要记住set_cookie 的几个设置参数 ket value 键值对
max_age = None expires = None 设置超时时间
path=’/‘ 用于设置一级域名和二级域名之间是不是用同一个cookie 一个网站可能拥有不同cookie
secure=False Https安全
httponly = False
一般实现于用户登录 即是你想要登录一个网站，需要用户登录 在服务器端需要调用服务器查看你是不是它的客户
tk = request.COOKIES.get('ticket')
print(tk)
if not tk:
return redirect('/login/')
-服务端可以向客户端写cookie
obj = HttpResponse('xxxx')
obj.set_cookie('k1','v1')
return obj
-关于超时时间有两种设置方法 即超过了相应的时间页面会刷新退出用户登录
第一种是利用max_age 秒数
obj.set_cookie('ticket',"asdasdsd",max_age=10)
第二种用于年月日时分秒 具体的时间设置
import datetime
from datetime import timedelta
//代码效果参考： http://www.jhylw.com.cn/323924869.html
ct = datetime.datetime.utcnow()
v = timedelta(seconds =10)
value = ct +v
obj.set_cookie('ticket','123123',expires=value)
return obj
-cookie的安全性 可以用加密的函数
obj.set_signed_cookie('ticket',"123123",salt='jjjjjj')
总结：
1. BootStrap响应式布局： @media()
2. 栅格：分成12份
3. 表格
4. 导航条 bootstrap组件找
5. 路径导航
6. fontawesome
7. 布局position：absolute 绝对路径
8. 当鼠标移动到xx样式的标签上时，其子标签.g应用以下属性
.xx:hover .g{
}
9. Django母版
母版：
...
{% block s1 %} {%endblock%}
...
{% block s2 %} {%endblock%}
子板：
{% extends "layout.html "%}
% block s1 %} fff {%endblock%}
{% block //代码效果参考：http://www.jhylw.com.cn/585728553.html
s2 %} ffffff {%endblock%}10. 用户登录
- cookie： 保存在浏览器端“键值对”，设置超时时间
- 发送Http请求时，在请求头中携带当前所有可访问的cookie
- 响应头
- 写cookie
@xzxx
def index(request):
obj = HttpResponse('...')
obj.set_cookie(.....)
request.COOKIES.get(...)
obj.set_signed_cookie(.....)
request.get_signed_cookie(....)
- 自定义cookie签名
- 装饰器装饰views中的函数
