码迷，mamicode.com
首页 > Web开发 > 详细

第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

时间：2017-09-16 20:48:43      阅读：266      评论：0      收藏：0      [点我收藏+]

标签：images   .com   clear   org   hbox   min   otl   北京大学   code   

第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

 

母板-子板-母板继承

母板继承就是访问的页面继承一个母板，将访问页面的内容引入到母板里指定的地方，组合成一个新页面返回给浏览器

一般母板里都是写的一个网页里不变的地方，也就是通用的地方，被继承页（访问页）都是每个页面不同的地方，也就是将页面不同的地方引入到母板组合成一个新页面返回浏览器

母板里一般都是网页的、头部、底部、头部底部css、头部底部js

被继承页（访问页）里一般都是新内容，新内容的css和js

 

母版

<!DOCTYPE html>
<html>
{% load staticfiles %} {# 启用静态文件引用 #}
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>{% block title %}课程机构列表 - 慕学在线网{% endblock %}</title>
    <link rel="stylesheet" type="text/css" href="{% static ‘css/reset.css‘ %}">
    {# 启用静态文件引用后才可以 #}
    <link rel="stylesheet" type="text/css" href="{% static ‘css/animate.css‘ %}">
    <link rel="stylesheet" type="text/css" href="{% static ‘css/style.css‘ %}">
    {% block css %}{% endblock %}
    <script src="{% static ‘js/jquery.min.js‘ %}" type="text/javascript"></script>
    <script src="{% static ‘js/jquery-migrate-1.2.1.min.js‘ %}" type="text/javascript"></script>

</head>
<body>



{# 头部和导航条 #}
<section class="headerwrap ">
    <header>
        <div class=" header">
            <div class="top">
                <div class="wp">
                    <div class="fl"><p>服务电话：<b>33333333</b></p></div>
                    <!--登录后跳转-->
                    {{ request.META.zhuang_tai }}
                    {% if request.META.zhuang_tai == True %}
                        <div class="personal">
                            <dl class="user fr">
                                <dd>{{ request.META.username }}<img class="down fr" src="/static/images/top_down.png"/>
                                </dd>
                                <dt><img width="20" height="20"
                                         src="/static/media/image/2016/12/default_big_14.png"/></dt>
                            </dl>
                            <div class="userdetail">
                                <dl>
                                    <dt><img width="80" height="80"
                                             src="/static/media/image/2016/12/default_big_14.png"/></dt>
                                    <dd>

                                        <h2>{{ request.META.username }}</h2>
                                        <p>{{ request.META.username }}</p>
                                    </dd>
                                </dl>
                                <div class="btn">
                                    <a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
                                    <a class="fr" href="/logout/">退出</a>
                                </div>
                            </div>
                        </div>
                    {% elif request.META.zhuang_tai != True %}
                        <a style="color:white" class="fr registerbtn" href="{% url ‘register‘ %}">注册</a>
                        <a style="color:white" class="fr loginbtn" href="/login.html">登录</a>
                    {% endif %}

                </div>
            </div>

            <div class="middle">
                <div class="wp">
                    <a href="index.html"><img class="fl" src="/static/images/logo.jpg"/></a>
                    <div class="searchbox fr">
                        <div class="selectContainer fl">
                            <span class="selectOption" id="jsSelectOption" data-value="course">
                                公开课
                            </span>
                            <ul class="selectMenu" id="jsSelectMenu">
                                <li data-value="course">公开课</li>
                                <li data-value="org">课程机构</li>
                                <li data-value="teacher">授课老师</li>
                            </ul>
                        </div>
                        <input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
                        <img class="search_btn fr" id="jsSearchBtn" src="/static/images/search_btn.png"/>
                    </div>
                </div>
            </div>


            <nav>
                <div class="nav">
                    <div class="wp">
                        <ul>
                            <li class="active"><a href="index.html">首页</a></li>
                            <li>
                                <a href="course-list.html">
                                    公开课<img class="hot" src="/static/images/nav_hot.png">
                                </a>
                            </li>
                            <li>
                                <a href="teachers-list.html">授课教师</a>
                            </li>
                            <li><a href="org-list.html">授课机构</a></li>
                        </ul>
                    </div>
                </div>
            </nav>

        </div>
    </header>
</section>

{# 轮播图 #}
<div class="banner">
    <div class="wp">
        <div class="fl">
            <div class="imgslide">
                <ul class="imgs">

                    <li>
                        <a href="http://www.imooc.com">
                            <img width="1200" height="478"
                                 src="/static/media/banner/2016/11/57a801860001c34b12000460.jpg"/>
                        </a>
                    </li>

                    <li>
                        <a href="http://www.projectsedu.com">
                            <img width="1200" height="478"
                                 src="/static/media/banner/2016/11/57aa86a0000145c512000460.jpg"/>
                        </a>
                    </li>

                    <li>
                        <a href="http://www.projectsedu.com">
                            <img width="1200" height="478"
                                 src="/static/media/banner/2016/11/57a801860001c34b12000460_z4Vb8zl.jpg"/>
                        </a>
                    </li>

                    <li>
                        <a href="http://www.projectsedu.com">
                            <img width="1200" height="478"
                                 src="/static/media/banner/2016/11/57aa86a0000145c512000460_nMwvoQD.jpg"/>
                        </a>
                    </li>

                    <li>
                        <a href="http://www.projectsedu.com">
                            <img width="1200" height="478"
                                 src="/static/media/banner/2016/11/57aa86a0000145c512000460_GXIBATC.jpg"/>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="unslider-arrow prev"></div>
            <div class="unslider-arrow next"></div>
        </div>

    </div>
</div>

{% block leirong %}{% endblock %}

{# 底部 #}
<footer>
        <div class="footer">
            <div class="wp">
                <ul class="cont">
                    <li class="logo"><a href=""><img src="/static/images/footlogo.png"/></a></li>
                    <li class="code"><img src="/static/images/code.jpg"/><p class="center">扫描关注微信</p></li>
                    <li class="third"><img class="fl" src="/static/images/tell.png"/><p class="tell">33333333</p><p class="time">周一至周日 9:00-18:00</p></li>
                </ul>

            </div>
            <p class="line"></p>
            <div class="wp clear">
                <span class="fl">? 2016 www.projectsedu.com 慕学在线-在线学习交流平台 保留所有权利</span>
                <span class="fr">copyright ? 2016 ICP备案证书号：蜀ICP备xxxxx号-1</span>
            </div>
        </div>
    </footer>
<section>
    <ul class="sidebar">
        <li class="qq">
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2023525077&site=qq&menu=yes"></a>
        </li>
        <li class="totop"></li>
    </ul>
</section>
<script src="/static/js/selectUi.js" type=‘text/javascript‘></script>
<script src="/static/js/deco-common.js" type=‘text/javascript‘></script>
<script type="text/javascript" src="/static/js/plugins/laydate/laydate.js"></script>
<script src="/static/js/plugins/layer/layer.js"></script>
<script src="/static/js/plugins/queryCity/js/public.js" type="text/javascript"></script>
<script src="/static/js/unslider.js" type="text/javascript"></script>
<script src="/static/js/plugins/jquery.scrollLoading.js"  type="text/javascript"></script>
<script src="/static/js/deco-common.js"  type="text/javascript"></script>
<script type="text/javascript" src="/static/js/index.js"></script>
</body>
</html>

 

子板

{% extends "muban.html" %}  {# #继承母板 #}

{% block title %}首页{% endblock %}

{% block leirong %}　　　　{# 设置母版替换区块 #}
<section>
    <div class="wp">
        <ul class="feature">
            <li class="feature1">
                <img class="pic" src="/static/images/feature1.png"/>
                <p class="center">专业权威</p>
            </li>
            <li class="feature2">
                <img class="pic" src="/static/images/feature2.png"/>
                <p class="center">课程最新</p>
            </li>
            <li class="feature3">
                <img class="pic" src="/static/images/feature3.png"/>
                <p class="center">名师授课</p>
            </li>
            <li class="feature4">
                <img class="pic" src="/static/images/feature4.png"/>
                <p class="center">数据真实</p>
            </li>
        </ul>
    </div>
</section>
<!--feature end-->
<!--module1 start-->
<section>
    <div class="module">
        <div class="wp">
            <h1>公开课程</h1>
            <div class="module1 eachmod">
                <div class="module1_1 left">
                    <img width="228" height="614" src="/static/images/module1_1.jpg"/>
                    <p class="fisrt_word">名师授课<br/>专业权威</p>
                    <a class="more" href="course-list.html">查看更多课程 ></a>
                </div>
                <div class="right group_list">
                    <div class="module1_2 box">
                        <div class="imgslide2">
                            <ul class="imgs">

                                <li>
                                    <a href="course-detail.html">
                                        <img width="470" height="300"
                                             src="/static/media/courses/2016/12/python文件处理.jpg"/>
                                    </a>
                                </li>

                                <li>
                                    <a href="course-detail.html">
                                        <img width="470" height="300"
                                             src="/static/media/courses/2016/12/python面向对象.jpg"/>
                                    </a>
                                </li>

                            </ul>
                        </div>
                        <div class="unslider-arrow2 prev"></div>
                        <div class="unslider-arrow2 next"></div>
                    </div>

                    <div class="module1_3 box">
                        <a href="course-detail.html">
                            <img width="233" height="190" src="/static/media/courses/2016/11/mysql.jpg"/>
                        </a>
                        <div class="des">
                            <a href="course-detail.html">
                                <h2 title="django入门">django入门</h2>
                            </a>
                            <span class="fl">难度：<i class="key">初级</i></span>
                            <span class="fr">学习人数：3</span>
                        </div>
                        <div class="bottom">
                            <span class="fl" title="慕课网">慕课网</span>
                            <span class="star fr">0</span>
                        </div>
                    </div>

                    <div class="module1_4 box">
                        <a href="course-detail.html">
                            <img width="233" height="190"
                                 src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135.jpg"/>
                        </a>
                        <div class="des">
                            <a href="course-detail.html">
                                <h2 title="java入门">java入门</h2>
                            </a>
                            <span class="fl">难度：<i class="key">中级</i></span>
                            <span class="fr">学习人数：0</span>
                        </div>
                        <div class="bottom">
                            <span class="fl" title="北京大学">北京大学</span>
                            <span class="star fr">0</span>
                        </div>
                    </div>

                    <div class="module1_5 box">
                        <a href="course-detail.html">
                            <img width="233" height="190"
                                 src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135.jpg"/>
                        </a>
                        <div class="des">
                            <a href="course-detail.html">
                                <h2 title="python入门">python入门</h2>
                            </a>
                            <span class="fl">难度：<i class="key">中级</i></span>
                            <span class="fr">学习人数：0</span>
                        </div>
                        <div class="bottom">
                            <span class="fl" title="南京大学">南京大学</span>
                            <span class="star fr">0</span>
                        </div>
                    </div>

                    <div class="module1_6 box">
                        <a href="course-detail.html">
                            <img width="233" height="190"
                                 src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135_dHfj8Nq.jpg"/>
                        </a>
                        <div class="des">
                            <a href="course-detail.html">
                                <h2 title="java入门2">java入门2</h2>
                            </a>
                            <span class="fl">难度：<i class="key">高级</i></span>
                            <span class="fr">学习人数：0</span>
                        </div>
                        <div class="bottom">
                            <span class="fl" title="慕课网2">慕课网2</span>
                            <span class="star fr">0</span>
                        </div>
                    </div>

                    <div class="module1_7 box">
                        <a href="course-detail.html">
                            <img width="233" height="190"
                                 src="/static/media/courses/2016/11/57035ff200014b8a06000338-240-135_0nFiBSI.jpg"/>
                        </a>
                        <div class="des">
                            <a href="course-detail.html">
                                <h2 title="java入门3">java入门3</h2>
                            </a>
                            <span class="fl">难度：<i class="key">初级</i></span>
                            <span class="fr">学习人数：1</span>
                        </div>
                        <div class="bottom">
                            <span class="fl" title="慕课网3">慕课网3</span>
                            <span class="star fr">0</span>
                        </div>
                    </div>

                    <div class="module1_8 box">
                        <a href="course-detail.html">
                            <img width="233" height="190"
                                 src="/static/media/courses/2016/11/540e57300001d6d906000338-240-135_MSIqfvw.jpg"/>
                        </a>
                        <div class="des">
                            <a href="course-detail.html">
                                <h2 title="python入门2">python入门2</h2>
                            </a>
                            <span class="fl">难度：<i class="key">中级</i></span>
                            <span class="fr">学习人数：0</span>
                        </div>
                        <div class="bottom">
                            <span class="fl" title="慕课网666">慕课网666</span>
                            <span class="star fr">0</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="module greybg">
        <div class="wp">
            <h1>课程机构</h1>
            <div class="module3 eachmod">
                <div class="module3_1 left">
                    <img width="228" height="463" src="/static/images/module3_1.jpg"/>
                    <p class="fisrt_word">名校来袭<br/>权威认证</p>
                    <a class="more" href="org-list.html">查看更多机构 ></a>
                </div>
                <div class="right">
                    <ul>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/imooc.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕课网">慕课网</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/bjdx.jpg"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="北京大学">北京大学</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/qhdx-logo.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="清华大学">清华大学</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/njdx.jpg"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="南京大学">南京大学</span></p>
                            </a>
                        </li>

                        <li class="five">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/imooc_klgAUn5.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕课网2">慕课网2</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/imooc_Gn1sRjp.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕课网3">慕课网3</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/imooc_Y2Tonsq.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕课网3">慕课网3</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/imooc_OO2ykYP.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕课网4">慕课网4</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/imooc_V0TJOyb.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕课网5">慕课网5</span></p>
                            </a>
                        </li>

                        <li class="five">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/11/imooc_qEaMov1.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕课网666">慕课网666</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/12/bjdx.jpg"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕学网">慕学网</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/12/imooc_Gn1sRjp.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="python培训机构">python培训机构</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/12/bjdx_cCpdUw8.jpg"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="vuejs培训">vuejs培训</span></p>
                            </a>
                        </li>

                        <li class="">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/12/imooc_klgAUn5.png"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="nodejs培训">nodejs培训</span></p>
                            </a>
                        </li>

                        <li class="five">
                            <a href="org-detail-homepage.html">
                                <div class="company">
                                    <img width="184" height="100" src="/static/media/org/2016/12/bjdx_bcd0m07.jpg"/>
                                    <div class="score">
                                        <div class="circle">
                                            <h2>全国知名</h2>
                                        </div>
                                    </div>
                                </div>
                                <p><span class="key" title="慕学在线">慕学在线</span></p>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

 

第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

标签：images   .com   clear   org   hbox   min   otl   北京大学   code   

原文地址：http://www.cnblogs.com/adc8868/p/7531991.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！