Django 的母板及布局(Bootstrap)
Django 的母板及布局(Bootstrap)
Django 的母板是作为公共的部分,其他的页面都能利用这个页面，并在其基础上进行添加
Django 的母板中可以嵌入3部分
- css
- content
- js
母板的形式：
{% block css %}{% endblock %}
<body>
...
<body/>
{% block content %}{% endblock %}
{% block js %}{% endblock %}
子板中继承母板的内容
{% block css %}
<link rel="stylesheet" href="/static/css/classcomments.css" />
{% endblock %}
{% block content %}
<body>
子板中添加的内容...
<body/>
{% endblock %}
{% block js %}
子板自己的js
{% endblock %}
Bootstrap布局
文件中有两种，一种是bootstrap.css,这种是用于调试的文件。另一种是min,是经过压缩的版本，最后是应用于生产环境的。
Bootstrap主要应用于css布局，丰富的组件。图标，在图标不够用的情况下，使用font-awesome，使用方法是一样的。
引入Bootstrap和Font-awesome的方法，和引入css文件一致
<link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css" />
后台管理的布局
页面布局
页面的整体布局分为3部分，头部，左侧菜单，右侧内容
css样式的编写
关键点：
- 头部使用
min-width设置窗口变小的时候出现滚动条 line-height设置居中和整体的高度是一致的text-alian:center设置水平居中- 左侧菜单设置绝对定位
absolute后可以设置山下左右的具体位置，这里是让菜单栏一直在左侧 - 为了达到菜单栏一直在左侧，右侧内容content设置
overflow:scroll,右侧内容溢出后出现滚动条 内联标签不能用padding设置成inline block- 个人信息div使用z-index 设置的值高于content
- 父标签设置的是
relative子标签就可以用absolute进行定位 hover只对标签本身及其子元素生效 上面的设置了none
.pg-header .avata:hover .user-info 这个是hover后进行的操作
<style>
body{
margin: 0 auto;
}
.left{
float: left;
}
.right{
float: right;
}
.hide{
display: none;
}
.pg-header{
height: 48px;
min-width: 1190px; /*宽度默认是100%小于1190px出现左右滚动条 */
background-color: dodgerblue;
line-height: 48px;/*设置居中*/
}
.menus{
width: 200px;
{# float: left;#}
position: absolute;/*绝对定位*/
background-color: #dddddd;
border-right: 1px solid #46b8da;
left:0;
top: 48px;
bottom: 0;
}
.content{
float: left;
{# background-color: red;#}
position: absolute;
left:200px;
right: 0;
top: 48px;
bottom:0;
overflow: scroll;/*内容溢出后会滚动*/
z-index: 99;/*主要是要低于个人信息*/
}
.pg-header .logo{
width: 199px;
text-align: center;
border-right: 1px solid gray;
color: white;
font-size: 18px;
}
.pg-header .rmenus a{
display: inline-block;
padding:0 15px;/*内联标签不能用padding 设置成inline block*/
color: white;
}
.pg-header .avata{
padding: 0 20px; /*设置左右的边距*/
}
.pg-header .avata img{
border-radius: 50%;/*设置头像为圆形*/
}
.pg-header .avata .user-info{
display: none;
background-color: white;
border: 1px solid #dddddd;
position: absolute;/*父标签设置的是relative 子标签就可以用absolute进行定位*/
top: 48px;
right: 3px;
width: 200px;
z-index: 100; /*要高于content*/
}
.pg-header .avata:hover .user-info{
display: block;/*hover只对标签本身及其子元素生效 上面的设置了none */
}
.pg-header .avata .user-info a{
display: block; /*设置成块级标签 效果是上下*/
}
.pg-body .menus a{
display: block;
padding:10px 5px;
}
</style>
