10-1 配置全局导航

其他 2018-07-05 22:39:09 阅读次数: 0 
{% if request.path|slice:'7' == '/course' %}class="active"{% endif %}

C:\Users\hlg\PycharmProjects\MxOnline\templates\base.html

<!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 custom_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>
					<!--登录后跳转-->


                        <a style="color:white" class="fr registerbtn" href="register.html">注册</a>
                        <a style="color:white" class="fr loginbtn" href="login.html">登录</a>



				</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 {% if request.path == '/' %}class="active"{% endif %}><a href="{% url 'index' %}">首页</a></li>
							<li {% if request.path|slice:'7' == '/course' %}class="active"{% endif %}>
								<a href="{% url 'course:course_list' %}">
									公开课<img class="hot" src="{% static 'images/nav_hot.png' %}">
								</a>
							</li>
							<li {% if request.path|slice:'12' == '/org/teacher' %}class="active"{% endif %}>
								<a href="{% url 'org:teacher_list' %}">授课教师</a>
							</li>
							<li {% if request.path|slice:'9' == '/org/list' %}class="active"{% endif %}>
                                <a href="{% url 'org:org_list' %}">授课机构</a>
                            </li>
						</ul>
					</div>
				</div>
			</nav>

			</div>
    </header>
</section>
<!--crumbs start-->
{% block custom_bread %}
    <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="index.html">首页</a>></li>

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

{% 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>


{% block custom_js %}{% endblock %}
</body>
</html>



C:\Users\hlg\PycharmProjects\MxOnline\templates\index.html

{% block custom_bread %}
<!-- 首页是没有面包屑的 -->
{% endblock %}

{% extends 'base.html' %}
{% block title %}课程机构列表 - 慕学在线网{% endblock %}
{% load staticfiles %}
{% block custom_bread %}
<!-- 首页是没有面包屑的 -->
{% endblock %}
{% block custom_js %}
    <script type="text/javascript" src="/static/js/index.js"></script>
{% endblock %}
{% block content %}
<!--banner start-->
    <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="../media/banner/2016/11/57a801860001c34b12000460.jpg" />
                                    </a>
                                </li>

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

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

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

                            <li>
                                    <a href="http://www.projectsedu.com">
                                        <img width="1200" height="478" src="../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>
<!--banner end-->
<!--feature start-->
	<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="../media/courses/2016/12/python文件处理.jpg" />
                                        </a>
                                    </li>

                                    <li>
                                        <a href="course-detail.html">
                                            <img width="470" height="300" src="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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 %}




































猜你喜欢

转载自blog.csdn.net/huanglianggu/article/details/80806293
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022