Django+xadmin打造在线教育平台（二）
作者：互联网
三、首页页面的显示
1、首页的显示
（1）将资料包中的index.html页面复制到template文件夹下，并且将css、images、js文件夹复制到static目录下。
（2）编写users中的视图函数。
# Apps/users/views.py
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'index.html')
（3）修改前端页面
在<!DOCTYPE html>标签下，添加{%load staticfiles %},让index.html可以调用静态文件，使用ctrl+f查找出所有“../”并删除，使用{%static ''%}将里面原有的路径包裹起来。（中间部分不用动，只需要改css以及js的部分）如下图所示：
(4) 配置总路由
导入视图函数，并将path('', index, name='index')添加到urlpatterns的列表中
from users.views import index
urlpatterns = [
path('xadmin/', xadmin.site.urls),
path('users/', include('users.urls', namespace='users')),
path('courses/', include('courses.urls', namespace='courses')),
path('orgs/', include('orgs.urls', namespace='orgs')),
path('operations/', include('operations.urls', namespace='operations')),
path('', index, name='index')
]
（5）修改首页用户登录状态
执行完上面四步，我们就可以运行了，在终端启动我们的项目
python manager runserver
结果发现默认状态下是登录状态，那么问题来了，我们的登录注册入口在哪？如下图所示：
毋庸置疑，我们还要在前端页面上加入判断用户认证状态。
不难发现，<div class="personal">标签包裹着用户登录后的代码，而且登录注册被注释掉了，那么我们需要在这里判断用户是否登录认证。
修改后代码如下：
{% if request.user.is_authenticated %}
<div class="personal">
<dl class="user fr">
<dd>weesmile<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd>
<dt><img width="20" height="20" src="{% static 'images/touxiang.jpg' %}"/></dt>
</dl>
<div class="userdetail">
<dl>
<dt><img width="80" height="80" src="{% static 'images/touxiang.jpg' %}"/></dt>
<dd>
<h2>django</h2>
<p>weesmile</p>
</dd>
</dl>
<div class="btn">
<a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
<a class="fr" href="/logout/">退出</a>
</div>
</div>
</div>
{% else %}
<a style="color:white" class="fr registerbtn" href="register.html">注册</a>
<a style="color:white" class="fr loginbtn" href="login.html">登录</a>
{% endif %}
再次运行，如下图所示：
提示：如果前端页面修改完成后刷新，仍然是用户登录状态，请进入xadmin后台注销用户，然后重新刷新。
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<title>课程机构列表 - 谷粒教育</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' %}">
<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>8888888</b></p></div>
<!--登录后跳转-->
{% if request.user.is_authenticated %}
<div class="personal">
<dl class="user fr">
<dd>weesmile<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd>
<dt><img width="20" height="20" src="{% static 'images/touxiang.jpg' %}"/></dt>
</dl>
<div class="userdetail">
<dl>
<dt><img width="80" height="80" src="{% static 'images/touxiang.jpg' %}"/></dt>
<dd>
<h2>django</h2>
<p>weesmile</p>
</dd>
</dl>
<div class="btn">
<a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
<a class="fr" href="/logout/">退出</a>
</div>
</div>
</div>
{% else %}
<a style="color:white" class="fr registerbtn" href="register.html">注册</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/logo1.png' %}"/></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>
<!--crumbs 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="{% static 'images/banner1.jpg' %}" />
</a>
</li>
<li>
<a href="http://www.atguigu.com">
<img width="1200" height="478" src="{% static 'images/banner2.jpg' %}" />
</a>
</li>
<li>
<a href="http://www.atguigu.com">
<img width="1200" height="478" src="{% static 'images/banner3.jpg' %}" />
</a>
</li>
<li>
<a href="http://www.atguigu.com">
<img width="1200" height="478" src="{% static 'images/banner4.jpg' %}" />
</a>
</li>
<li>
<a href="http://www.atguigu.com">
<img width="1200" height="478" src="{% static 'images/banner5.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/feature5.png' %} }"/>
<p class="center">专业权威</p>
</li>
<li class="feature2">
<img class="pic" src="{% static 'images/feature5.png' %}"/>
<p class="center">课程最新</p>
</li>
<li class="feature3">
<img class="pic" src="{% static 'images/feature5.png' %}"/>
<p class="center">名师授课</p>
</li>
<li class="feature4">
<img class="pic" src="{% static 'images/feature5.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/module5_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 'images/mysql.jpg' %}" />
</a>
</li>
<li>
<a href="course-detail.html">
<img width="470" height="300" src="{% static 'images/mongoDB.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 'images/html.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="django入门">html基础</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 'images/css.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="css2.1">css2.1</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 'images/js基础.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="javascript基础入门">javascript基础入门</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 'images/js高级.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="javascript高级">javascript高级</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 'images/linux.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="linux全讲">linux全讲</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 'images/jQuery.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="jquery全解析">jquery全解析</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/module6_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 'images/org.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 'images/org.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 'images/org.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 'images/org.png' %}"/>
<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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.png' %}"/>
<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 'images/org.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 'images/org.png' %}"/>
<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>
<footer>
<div class="footer">
<div class="wp">
<ul class="cont">
<li class="logo"><a href=""><img src="{% static 'images/logo1.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">88888888</p><p class="time">周一至周日 9:00-18:00</p></li>
</ul>
</div>
<p class="line"></p>
<div class="wp clear">
<span class="fl">? 2012 www.atguigu.com谷粒教育-在线学习交流平台 保留所有权利</span>
<span class="fr">copyright ? 2012 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>
完整index.html
四、base的抽取与继承
1、一级base的抽取
通过观察首页，我们发现首页页面由三部分构成，头部，中间部分。我们通过按F12调试前端页面，不难发现，第一个section就是我们的头部。我们发现很多页面头部都是不变的。以及尾部也是不变的。
复制index.html，并改名为base.html。修改base.html.
（1）、title标签处挖坑，因为每个页面都有自己的标题。
（2）、css样式应该预留坑位,方便后面新的样式填入
（3）、留第一个section标签，其余全部删除
（4）、给第一个section标签留坑
我们分析，所有页面都有注册登录，而且其被写在<div class="top">中，中间的一部分，搜索框以及课程列表等有些页面有，有些页面没有，这里我们挖坑，但是不要删除其内容，后面页面如果有这两项功能，我们直接继承，没有的话我们覆盖。
（5）、footer处挖坑
同理，尾部页面有一些一样，有一些不一样，这里我们挖坑并保留原来的代码。
（6）、js应该预留坑位,方便后面新的样式填入
2、index页面继承base
（1）、导入base.html文件
{% extends 'base1.html' %}
（2）、 引用静态文件
{% load staticfiles %}
（3）、填充title
{% block title %}
首页 — 谷粒教育
{% endblock %}
（4）、填充content
在终端启动项目，如果显示的页面与我们刚开始的页面一致，那么说明我们抽取以及继承成功
<!DOCTYPE html>
{% load staticfiles %}
<html>
<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 mycss %}
{% 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>8888888</b></p></div>
<!--登录后跳转-->
{% if request.user.is_authenticated %}
<div class="personal">
<dl class="user fr">
<dd>weesmile<img class="down fr" src="{% static 'images/top_down.png' %}"/></dd>
<dt><img width="20" height="20" src="{% static 'images/touxiang.jpg' %}"/></dt>
</dl>
<div class="userdetail">
<dl>
<dt><img width="80" height="80" src="{% static 'images/touxiang.jpg' %}"/></dt>
<dd>
<h2>django</h2>
<p>weesmile</p>
</dd>
</dl>
<div class="btn">
<a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
<a class="fr" href="/logout/">退出</a>
</div>
</div>
</div>
{% else %}
<a style="color:white" class="fr registerbtn" href="register.html">注册</a>
<a style="color:white" class="fr loginbtn" href="login.html">登录</a>
{% endif %}
</div>
</div>
{% block middle %}
<div class="middle">
<div class="wp">
<a href="index.html"><img class="fl" src="{% static 'images/logo1.png' %}"/></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>
{% endblock %}
</div>
</header>
</section>
{% block content %}
{% endblock %}
{% block footer %}
<footer>
<div class="footer">
<div class="wp">
<ul class="cont">
<li class="logo"><a href=""><img src="{% static 'images/logo1.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">88888888</p><p class="time">周一至周日 9:00-18:00</p></li>
</ul>
</div>
<p class="line"></p>
<div class="wp clear">
<span class="fl">? 2012 www.atguigu.com谷粒教育-在线学习交流平台 保留所有权利</span>
<span class="fr">copyright ? 2012 ICP备案证书号：蜀ICP备xxxxx号-1</span>
</div>
</div>
</footer>
{% endblock %}
<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>
{% block myjs %}
{% endblock %}
</body>
</html>
完整base.html
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
首页 — 谷粒教育
{% endblock %}
{% block content %}
<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 'images/banner1.jpg' %}" />
</a>
</li>
<li>
<a href="http://www.atguigu.com">
<img width="1200" height="478" src="{% static 'images/banner2.jpg' %}" />
</a>
</li>
<li>
<a href="http://www.atguigu.com">
<img width="1200" height="478" src="{% static 'images/banner3.jpg' %}" />
</a>
</li>
<li>
<a href="http://www.atguigu.com">
<img width="1200" height="478" src="{% static 'images/banner4.jpg' %}" />
</a>
</li>
<li>
<a href="http://www.atguigu.com">
<img width="1200" height="478" src="{% static 'images/banner5.jpg' %}" />
</a>
</li>
</ul>
</div>
<div class="unslider-arrow prev"></div>
<div class="unslider-arrow next"></div>
</div>
</div>
</div>
<section>
<div class="wp">
<ul class="feature">
<li class="feature1">
<img class="pic" src="{% static 'images/feature5.png' %} }"/>
<p class="center">专业权威</p>
</li>
<li class="feature2">
<img class="pic" src="{% static 'images/feature5.png' %}"/>
<p class="center">课程最新</p>
</li>
<li class="feature3">
<img class="pic" src="{% static 'images/feature5.png' %}"/>
<p class="center">名师授课</p>
</li>
<li class="feature4">
<img class="pic" src="{% static 'images/feature5.png' %}"/>
<p class="center">数据真实</p>
</li>
</ul>
</div>
</section>
<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/module5_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 'images/mysql.jpg' %}" />
</a>
</li>
<li>
<a href="course-detail.html">
<img width="470" height="300" src="{% static 'images/mongoDB.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 'images/html.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="django入门">html基础</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 'images/css.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="css2.1">css2.1</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 'images/js基础.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="javascript基础入门">javascript基础入门</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 'images/js高级.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="javascript高级">javascript高级</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 'images/linux.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="linux全讲">linux全讲</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 'images/jQuery.jpg' %}"/>
</a>
<div class="des">
<a href="course-detail.html">
<h2 title="jquery全解析">jquery全解析</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/module6_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 'images/org.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 'images/org.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 'images/org.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 'images/org.png' %}"/>
<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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.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 'images/org.png' %}"/>
<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 'images/org.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 'images/org.png' %}"/>
<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 %}
完整index.html
标签：知名,index,xadmin,Django,在线教育,html,谷粒,教育网,页面 来源： https://www.cnblogs.com/huiyichanmian/p/11795106.html