django 之 母板页面

一、母板主页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/css/commons.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">
    <script src="/static/js/jquery-3.2.1.js" ></script>
    {% block CSS %}{% endblock %}
    {% block JS %}{% endblock %}
</head>
<body>
<div>
    <div class="pg_head">
        <div class="logo left">管理系统</div>
        <div class="avatar right">
            <img src="/static/images/1.jpg" alt="个人信息">
            <div class="user_info">
                <a href="">个人信息</a>
                <a href="">退出</a>
            </div>
        </div>
        <div class="menus right">
            <a href=""><i class="fa fa-bell" aria-hidden="true"></i>提醒</a>
            <a href=""><i class="fa fa-commenting-o" aria-hidden="true"></i>消息</a>
            <a href=""><i class="fa fa-envelope-o" aria-hidden="true"></i>邮件</a>
        </div>
    </div>
    <div class="pg_body">
        <div class="pg_left">
            <div class="oper">
                <a href="">******</a>
                <a href="">XXXXXX</a>
                <a href="">######</a>
            </div>
        </div>
        <div class="pg_right">
            {% block info %}{% endblock %}
        </div>
    </div>
</div>
</body>
</html>
母板html页面代码

二、母板CSS修饰：

*{
    margin: 0;
}

a{
    text-decoration: none;
    font-weight: bold;
}

.left{
    float: left;
}
.right{
    float: right;
}
div.pg_head{
    height:48px;
    min-width: 1190px;
    background-color: #2aabd2;
    line-height: 48px;
    overflow: hidden;
}

div.pg_head div.logo{
    width: 200px;
    text-align: center;
    font-size: 18px;
    color: white;
    border-right: 1px solid #e3e3e3;
}

div.pg_head div.avatar{
    padding: 0 20px;
    text-align: center;
    overflow: hidden;
}

div.pg_head div.avatar img{
    display: inline-block;
    width: 40px;
    height: 40px;
    padding: 4px 0;
    border-radius: 45%;
}

div.pg_head div.avatar div.user_info{
    display: none;
    width: 100px;
    position: absolute;
    top: 48px;
    right: 17px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    z-index: 100;
}

div.pg_head div.avatar:hover div.user_info{
    display: block;
}

div.pg_head div.avatar div.user_info a{
    display: block;
}

div.pg_head div.menus a{
    display: inline-block;
    padding: 0 15px;
    color: darkslategrey;
    vertical-align: baseline;
    word-spacing: 10px;
}

div.pg_head div.menus a:hover{
    background-color: #ce8483;
}

div.pg_left{
    width: 200px;
    position: absolute;
    top: 48px;
    left: 0;
    bottom: 0;
    border-right: 1px solid #e3e3e3;
    background-color: #46b8da;
}

div.pg_left div.oper{
    width: 200px;
    text-align: center;
}

div.pg_left div.oper a{
    display: block;
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid gainsboro;
}

div.pg_right{
    position: absolute;
    top: 48px;
    left: 200px;
    right: 0;
    bottom: 0;
    min-width: 990px;
    border-left: 1px solid #e3e3e3;
    overflow: scroll;
    z-index: 99;
    background-color: silver;
}
CSS渲染代码

三、组件及文件

　　不知道怎么上传，就贴图片吧！

 

posted @ 2017-07-01 23:41  细雨蓝枫  阅读(111)  评论(0)    收藏  举报