目录
本文转载自：https://blog.csdn.net/xiaogeldx/article/details/89256581
分析静态页面
静态vs动态
| 条目 | 静态页面 | 动态页面 |
|---|---|---|
| 网站内容 | 固定不变 | 经常变动 |
| 浏览器加载速度 | 更快（无需向服务器发起请求） | 更慢 |
| 改变网站内容 | 很难（修改或者创建新的HTML页面） | 简单（数据库中添加数据即可） |
| URL文件拓展 | .htm、.html | .php、.asp、.jsp、.py |
| 创建语言 | HTML | php,java,python |
本次项目页面分析
- 本项目由5个模块组成，分别为：nwes，course，doc，users，admin
- 在项目根目录下创建templates文件夹，用于存放模板文件，同时在templates文件夹下，分别创建news，course，doc，users文件夹用于存放每个应用模块的模板文件
- 将提供的静态文件拖到对应的目录中
- 在项目根目录之中创建一个static目录用于保存静态文件（js,css,image等）
- 将提供的静态文件（css，js，images目录）拖到static目录中
模板抽取
- 在templates文件夹下创建一个base目录用于存放每个静态文件中公共代码
base目录下的base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/base/reset.css' %}">
<link rel="stylesheet" href="{% static 'css/base/common.css' %}">
<link rel="stylesheet" href="{% static 'css/base/side.css' %}">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_684044_un7umbuwwfp.css">
{% block link %}
{% endblock %}
</head>
<body>
<!-- header start -->
<header id="header">
<div class="mw1200 header-contain clearfix">
<!-- logo start -->
<h1 class="logo">
<a href="javascript:void(0);" class="logo-title">Python</a>
</h1>
<!-- logo end -->
<!-- nav start -->
<nav class="nav">
<ul class="menu">
<li><a href="../index.html">首页</a></li>
<li><a href="../course/course.html">在线课堂</a></li>
<li><a href="../doc/docDownload.html">下载文档</a></li>
<li><a href="../search.html">搜索</a></li>
</ul>
</nav>
<!-- nav end -->
<!-- login start -->
<div class="login-box">
<div>
<i class="PyWhich py-user"></i>
<span>
<a href="../user/login.html" class="login">登录</a> / <a href="../users/register.html"
class="reg">注册</a>
</span>
</div>
<div class="author hide">
<i class="PyWhich py-user"></i>
<span>qwertyui</span>
<ul class="author-menu">
<li><a href="javascript:void(0);">后台管理</a></li>
<li><a href="javascript:void(0);">退出登录</a></li>
</ul>
</div>
</div>
<!-- login end -->
</div>
</header>
<!-- header end -->
<!-- main start -->
{% block main-start %}
<main id="main">
<div class="w1200 clearfix">
<!-- main-contain start -->
{% block contain %}
{% endblock %}
<!-- main-contain end -->
<!-- side start -->
{% block side %}
<aside class="side">
<div class="side-activities">
<h3 class="activities-title">在线课堂<a href="javascript:void(0)">更多</a></h3>
<div class="activities-img">
<a href="javascript:void(0);" target="_blank">
<img src="../images/english.jpg" alt="title">
</a>
<p class="activities-tips">对话国外小姐姐</p>
</div>
<ul class="activities-list">
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-start">报名中</span>
<span class="active-title"><a
href="https://www.shiguangkey.com/course/2432"> Django 项目班</a></span>
</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank">
<span class="active-status active-end">已结束</span>
<span class="active-title"><a
href="https://www.shiguangkey.com/course/2321">Python入门基础班</a></span>
</a>
</li>
</ul>
</div>
<div class="side-attention clearfix">
<h3 class="attention-title">关注我</h3>
<ul class="side-attention-address">
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-GitHub"></i>Taka</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-zhihu"
style="color:rgb(0, 108, 226);"></i>Taka</a>
</li>
<li>
<a href="javascript:void(0);" target="_blank"><i class="PyWhich py-weibo"
style="color:rgb(245,92,110);"></i>Taka</a>
</li>
</ul>
<div class="side-attention-qr">
<p>扫码关注</p>
</div>
</div>
<div class="side-hot-recommend">
<h3 class="hot-recommend">热门推荐</h3>
<ul class="hot-news-list">
<li>
<a href="javascript:void(0)" class="hot-news-contain clearfix">
<div class="hot-news-thumbnail">
<img src="../images/python_web.jpg"
alt="">
</div>
<div class="hot-news-content">
<p class="hot-news-title">Django调试工具django-debug-toolbar安装使用教程</p>
<div class="hot-news-other clearfix">
<span class="news-type">python框架</span>
<!-- 自带的 -->
<time class="news-pub-time">11月11日</time>
<span class="news-author">python</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</aside>
{% endblock %}
<!-- side end -->
</div>
</main>
{% endblock %}
<!-- footer start -->
<footer id="footer">
<div class="footer-box">
<div class="footer-content">
<p class="top-content">
<span class="link">
<a href="javascript:void(0)">关于Python</a> |
<a href="javascript:void(0)">我就是我</a> |
<a href="javascript:void(0)">人生苦短</a> |
<a href="javascript:void(0)">我用Python</a>
</span>
<span class="about-me">关于我: <i class="PyWhich py-wechat"></i> Taka</span>
</p>
<p class="bottom-content">
<span>地址： xxxx</span>
<span>联系方式: <a href="tel:400-1567-315">400-1567-315</a> (24小时在线)</span>
</p>
</div>
<p class="copyright-desc">
Copyright © 2008 - 2019 xxx有限公司. All Rights Reserved
</p>
</div>
</footer>
<!-- footer end -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
{% block domready %}
{% endblock %}
</body>
</html>
news
news下主页index.html
{% extends 'base/base.html' %}
{% block title %}IndexPage{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/news/index.css' %}">{% endblock %}
{% block contain %}
{# <!-- main-contain start -->#}
<div class="main-contain">
<!-- banner start -->
<div class="banner">
<ul class="pic">
<!--淡入淡出banner-->
<li><a href="javascript:void(0);"><img src="../images/ui.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/youxi.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/dianshang.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/zimeiti.png" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/python_gui.jpg" alt="test"></a></li>
<li><a href="javascript:void(0);"><img src="../images/linux.jpg" alt="test"></a></li>
</ul>
<a href="javascript:void(0);" class="btn prev">
<i class="PyWhich py-arrow-left"></i></a>
<a href="javascript:void(0);" class="btn next">
<i class="PyWhich py-arrow-right"></i></a>
<ul class="tab">
<!-- 按钮数量必须和图片一致 -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- banner end -->
<!-- content start -->
<div class="content">
<!-- recommend-news start -->
<ul class="recommend-news">
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="../images/python_gui.jpg" alt="title">
</div>
<p class="info">Python GUI 教程 25行代码写一个小闹钟</p>
</a>
</li>
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="../images/python_advanced.jpg" alt="title">
</div>
<p class="info">python高性能编程方法一</p>
</a>
</li>
<li>
<a href="https://www.shiguangkey.com/course/2432" target="_blank">
<div class="recommend-thumbnail">
<img src="../images/jichujiaochen.jpeg" alt="title">
</div>
<p class="info">python基础 split 和 join函数比较</p>
</a>
</li>
</ul>
<!-- recommend-news end -->
<!-- news-nav start-->
<nav class="news-nav">
<ul class="clearfix">
<li class="active"><a href="javascript:void(0)">最新资讯</a></li>
<li><a href="javascript:void(0)" data-id="1">python框架</a>
</li>
<li><a href="javascript:void(0)" data-id="2">Python基础</a>
</li>
<li><a href="javascript:void(0)" data-id="3">Python高级</a>
</li>
<li><a href="javascript:void(0)" data-id="4">Python函数</a>
</li>
<li><a href="javascript:void(0)" data-id="5">PythonGUI</a>
</li>
<li><a href="javascript:void(0)" data-id="6">Linux教程</a>
</li>
</ul>
</nav>
<!-- news-nav end -->
<!-- news-contain start -->
<div class="news-contain">
<ul class="news-list">
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt="linux查找文件或目录命令"
title="linux查找文件或目录命令">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="#">linux查找文件或目录命令</a>
</h4>
<p class="news-details">linux查找文件或目录命令，前提：知道文件或者目录的具体名字，例如：sphinx.conffind 查找find / -name
dirname 查找目录find -name...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt="linux下svn命令的使用"
title="linux下svn命令的使用">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="https://www.shiguangkey.com/course/2432/887">linux下svn命令的使用</a>
</h4>
<p class="news-details">1、将文件checkout到本地目录svn checkout path（path是服务器上的目录） 例如：svn checkout
svn://192.168.1.1/pro/domain 简写：svn co2、往版本库中添加新的文件 svn addfile 例如：svn add te...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt="实现linux和windows文件传输"
title="实现linux和windows文件传输">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="https://www.shiguangkey.com/course/2432/886">实现linux和windows文件传输</a>
</h4>
<p class="news-details">
其实这个题目有点大，这里介绍的只是linux和windows文件传输中的一种，但是这种方法却非常实用，那就是：ZModem协议具体是linux命令是：rz...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt=".htaccess配置详解"
title=".htaccess配置详解">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="https://www.shiguangkey.com/course/2432">.htaccess配置详解</a>
</h4>
<p class="news-details"> .htaccess文件设置基础教程 如果你设置好了比如常用的404页面 301重定向 页面还有500页面等会设置了
无非对你的seo技术有很大帮助那么 .htaccess文件到底怎么设置呢 - .htaccess 文件(或者"分布式...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item">
<a href="https://www.shiguangkey.com/course/2432" class="news-thumbnail"
target="_blank">
<img src="../images/linux.jpg" alt="使用nohup命令让linux程序后台运行"
title="使用nohup命令让linux程序后台运行">
</a>
<div class="news-content">
<h4 class="news-title"><a
href="https://www.shiguangkey.com/course/2432">使用nohup命令让linux程序后台运行</a>
</h4>
<p class="news-details">使用nohup让程序永远后台运行Unix/Linux下一般比如想让某个程序在后台运行，很多都是使用 &
在程序结尾来让程序自动运行。比如我们要运行mysql在后台：/usr/local/mysql/bin/mysqld_safe --user=mysql &但是...</p>
<div class="news-other">
<span class="news-type">Linux教程</span>
<span class="news-time">11/11 18:24</span>
<span class="news-author">python</span>
</div>
</div>
</li>
</ul>
</div>
<!-- news-contain end -->
<!-- btn-more start -->
<a href="javascript:void(0);" class="btn-more">加载更多</a>
<!-- btn-more end -->
</div>
<!-- content end -->
</div>
{% endblock %}
<!-- main-contain end -->
{% block domready %}
<script src="{% static 'js/commons.js' %}"></script>
<script src="{% static 'js/index.js' %}"></script>
{% endblock %}
news下的new_detail.html
{% extends 'base/base.html' %}
{% block title %}news-detail{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/news/news-detail.css' %}">{% endblock %}
{% block contain %}
<div class="news-contain">
<h1 class="news-title">我就说我</h1>
<div class="news-info">
<div class="news-info-left">
<span class="news-author">作者</span>
<span class="news-pub-time">1小时前</span>
<span class="news-type">类型</span>
</div>
</div>
<article class="news-content">
文章内容
</article>
<div class="comment-contain">
<div class="comment-pub clearfix">
<div class="new-comment">
文章评论(<span class="comment-count">0</span>)
</div>
<div class="comment-control please-login-comment" style="display:none;">
<input type="text" placeholder="请登录后参加评论">
</div>
<div class="comment-control logged-comment">
<input type="text" placeholder="请填写评论">
</div>
<button class="comment-btn">发表评论</button>
</div>
<ul class="comment-list">
<li class="comment-item">
<div class="comment-info clearfix">
<img src="../images/avatar.jpeg" alt="avatar" class="comment-avatar">
<span class="comment-user">评论人</span>
<span class="comment-pub-time">1小时前</span>
</div>
<div class="comment-content">这是一条评论</div>
</li>
<li class="comment-item">
<div class="comment-info clearfix">
<img src="../images/avatar.jpeg" alt="avatar" class="comment-avatar">
<span class="comment-user">评论人</span>
<span class="comment-pub-time">1小时前</span>
</div>
<div class="comment-content">这是一条评论</div>
</li>
</ul>
</div>
</div>
{% endblock %}
news下search.html
{% extends 'base/base.html' %}
{% block link %}
<link rel="stylesheet" href="{% static 'css/news/search.css' %}">
{% endblock %}
{% block contain %}
<div class="main-contain ">
<!-- search-box start -->
<div class="search-box">
<form action="" style="display: inline-flex;">
<input type="search" placeholder="请输入要搜索的内容" name="q" class="search-control">
<input type="submit" value="搜索" class="search-btn">
</form>
<!-- 可以用浮动 垂直对齐 以及 flex -->
</div>
<!-- search-box end -->
<!-- content start -->
<div class="content">
<!-- search-list start -->
<!-- search-list end -->
<!-- news-contain start -->
<div class="news-contain">
<div class="hot-recommend-list">
<h2 class="hot-recommend-title">热门推荐</h2>
<ul class="news-list">
<li class="news-item clearfix">
<a href="#" class="news-thumbnail">
<img src="../images/python_gui.jpg">
</a>
<div class="news-content">
<h4 class="news-title">
<a href="#">Python GUI 教程 25行代码写一个小闹钟</a>
</h4>
<p class="news-details">
</p>
<div class="news-other">
<span class="news-type">PythonGUI</span>
<span class="news-time">11/11 18:22</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item clearfix">
<a href="#" class="news-thumbnail">
<img src="../images/python_advanced.jpg">
</a>
<div class="news-content">
<h4 class="news-title">
<a href="#">python高性能编程方法一</a>
</h4>
<p class="news-details">
</p>
<div class="news-other">
<span class="news-type">Python高级</span>
<span class="news-time">11/11 17:13</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item clearfix">
<a href="#" class="news-thumbnail">
<img src="../images/jichujiaochen.jpeg">
</a>
<div class="news-content">
<h4 class="news-title">
<a href="#">python基础 split 和 join函数比较</a>
</h4>
<p class="news-details">
</p>
<div class="news-other">
<span class="news-type">Python基础</span>
<span class="news-time">11/11 16:09</span>
<span class="news-author">python</span>
</div>
</div>
</li>
<li class="news-item clearfix">
<a href="#" class="news-thumbnail">
<img src="../images/python_web.jpg">
</a>
<div class="news-content">
<h4 class="news-title">
<a href="#">Django调试工具django-debug-toolbar安装使用教程</a>
</h4>
<p class="news-details">
</p>
<div class="news-other">
<span class="news-type">python框架</span>
<span class="news-time">11/11 15:28</span>
<span class="news-author">python</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- content end -->
</div>
{% endblock %}
<!-- main-contain end -->
{% block domready %}
<script src="../js/commons.js"></script>
<script src="../js/index.js"></script>
{% endblock %}
doc
doc下docDownload.html
{% extends 'base/base.html' %}
{% block title %}payInfo{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/doc/docDownload.css' %}">{% endblock %}
<!-- main start -->
{% block contain %}
<div class="main-contain ">
<div class="banner">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802845035,3786939119&fm=26&gp=0.jpg"
alt="">
</div>
<div class="pay-doc-contain">
<ul class="pay-list">
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="d-contain">
<p class="doc-title">python cookbook 3.0 教程</p>
<p class="doc-desc">强烈推荐的python 教程。</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下载</a>
</div>
</li>
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="pay-contain">
<p class="pay-title">流畅的Python</p>
<p class="pay-desc">【本书特色】
本书由奋战在Python开发一线*20年的Luciano Ramalho执笔，Victor Stinner、Alex
Martelli等Python大咖担纲技术审稿人，从语言设计层面剖析编程细节，兼顾Python 3和Python
2，告诉你Python中不亲自动手实践就无法理解的语言陷阱成因和解决之道，教你写出风格地道的Python代码。</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下载</a>
</div>
</li>
<li class="pay-item">
<div class="pay-img doc"></div>
<div class="pay-contain">
<p class="pay-title">深入Flask</p>
<p class="pay-desc">深入Flask，强烈推荐！</p>
<!-- /www/?xxx -->
<a href="#" class="pay-price">下载</a>
</div>
</li>
</ul>
</div>
</div>
{% endblock %}
<!-- main-contain end -->
<!-- side start -->
{% block domready %}
<script src="../js/commons.js"></script>
{% endblock %}
users
users下的login.html
{% extends 'base/base.html' %}
{% block title %}LoginPage{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">{% endblock %}
<!-- header end -->
<!-- container start -->
{% block main-start %}
<main id="container">
<div class="login-contain">
<div class="top-contain">
<h4 class="please-login">请登录</h4>
<a href="javascript:void(0);" class="register">立即注册 ></a>
</div>
<form action="" method="post" class="form-contain">
<div class="form-item">
<input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off">
</div>
<div class="form-item">
<input type="password" placeholder="请输入密码" name="password" class="form-control">
</div>
<div class="form-item clearfix">
<label>
<input type="checkbox" name="remember">
<span>记住我</span>
</label>
<a href="javascript:void(0);" class="forget-password">忘记密码?</a>
</div>
<div class="form-login">
<input type="submit" value="登录" class="login-btn">
</div>
</form>
</div>
</main>
{% endblock %}
<!-- container end -->
users下的register
{% extends 'base/base.html' %}
{% block title %}RegisterPage{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}">{% endblock %}
<!-- container start -->
{% block main-start %}
<main id="container">
<div class="register-contain">
<div class="top-contain">
<h4 class="please-register">请注册</h4>
<a href="javascript:void(0);" class="login">立即登录 ></a>
</div>
<form action="" method="post" class="form-contain">
<div class="form-item">
<input type="text" placeholder="请输入用户名" id="user_name" name="username" class="form-control" autocomplete="off">
</div>
<div class="form-item">
<input type="password" placeholder="请输入密码" id="pwd" name="password" class="form-control">
</div>
<div class="form-item">
<input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control">
</div>
<div class="form-item">
<input type="tel" placeholder="请输入手机号" id="mobile" name="telephone" class="form-control" autocomplete="off" autofocus>
</div>
<div class="form-item">
<input type="text" placeholder="请输入图形验证码" id="input_captcha" name="captcha_graph" class="form-captcha">
<a href="javascript:void(0);" class="captcha-graph-img">
<img src="../images/captcha.png" alt="验证码" title="点击刷新">
</a>
</div>
<div class="form-item">
<input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" id="input_smscode" autocomplete="off">
<a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a>
</div>
<div class="form-item">
<input type="submit" value="立即注册" class="register-btn">
</div>
</form>
</div>
</main>
{% endblock %}
<!-- container end -->
course
course下的course.html
{% extends 'base/base.html' %}
{% block title %}coursePage{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/course/course.css' %}">{% endblock %}
{% block main-start %}
<main id="course-container">
<div class="w1200">
<ul class="course-list">
<li class="course-item">
<a href="https://www.shiguangkey.com/course/2432">
<img class="course-img" src="../images/python_advanced.jpg"
alt="潭州英语">
<div class="course-content">
<p class="course-info">python 全栈开发</p>
<p class="course-author">不动(python金牌讲师)</p>
<p class="course-price free">免费</p>
</div>
</a>
</li>
<li class="course-item">
<a href="https://www.shiguangkey.com/course/2432">
<img class="course-img" src="../images/python_web.jpg"
alt="潭州英语">
<div class="course-content">
<p class="course-info">django 项目</p>
<p class="course-author">Taka(python讲师)</p>
<p class="course-price free">免费</p>
</div>
</a>
</li>
</ul>
</div>
</main>
{% endblock %}
{% block domready %}
<script src="../js/commons.js"></script>
{% endblock %}
course下的course_detail.html
{% extends 'base/base.html' %}
{% block title %}课程详情页{% endblock %}
{% block link %}<link rel="stylesheet" href="{% static 'css/course/course-detail.css' %}">{% endblock %}
<!-- main start -->
{% block main-start %}
<main id="main">
<div class="w1200">
<div class="course-contain">
<div class="course-top-contain">
<h4 class="course-title">课程标题</h4>
<div class="course-other clearfix">
<div class="share-list">
<span>分享至:</span>
<i class="PyWhich py-weibo"></i>
<i class="PyWhich py-weibo2"></i>
</div>
<div class="buy-list">
<span class="price">免费</span>
</div>
</div>
</div>
<div class="course-video" id="course-video">
</div>
<div class="course-bottom-contain">
<div class="course-detail-list">
<div class="course-item clearfix">
<h5 class="course-title">课程讲师</h5>
<div class="teacher-box clearfix">
<img src="../images/avatar.jpeg" alt="Which"
title="Which" class="teacher-avatar">
<div class="teacher-info">
<p class="teacher-name">Tuple</p>
<p class="teacher-identify"> 人生苦短</p>
</div>
</div>
<div class="item-content">
人生苦短人生苦短人生苦短人生苦短人生苦短
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">课程简介</h5>
<div class="item-content">
人生苦短人生苦短人生苦短人生苦短人生苦短
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">课程大纲</h5>
<div class="item-content">
<p>人生苦短人生苦短人生苦短人生苦短</p>
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">帮助中心</h5>
<div class="item-content">
<p>1. 购买后的课程在线可反复观看学习，视频有效期以具体课程信息为准。 </p>
<p>2. 课程暂不支持下载观看，均为在线观看视频。 </p>
<p>3. 课程一经购买，不可转让、不可退款；仅限购买账号观看。</p>
<p>4. 如有问题请咨询客服: 400-1567-315 </p>
</div>
</div>
<div class="course-item clearfix">
<h5 class="course-title">关于潭州课堂</h5>
<div class="item-content">
湖南潭州教育网络科技有限公司拥有千余人的优秀师资团队，是一家师资丰富、教育产品类别众多的在线培训公司。公司总部座落于美丽的星城长沙，2015年9月正式入驻芯城科技园目前拥有*两万*米办公面积。
在潭州学习的学员已突破1000万人次在线学员覆盖全球，包括中国、加拿大、日本、美国、韩国等诸多国家。
</div>
</div>
<div class="course-item clearfix">
<div class="item-content">
<div class="item-course-title">123</div>
<div class="item-buy-list">
<span class="price">免费</span>
</div>
</div>
</div>
</div>
<div class="course-side">
<h4 class="side-title">推荐课程</h4>
</div>
</div>
</div>
</div>
</main>
{% endblock %}
<!-- main end -->