碼上快樂

相關內容    簡體    繁體

靜態頁面轉換為模板

本文轉載自   查看原文   2019-04-15 22:55   1654    django

目錄

本文轉載自： 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 &copy; 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 文件(或者&quot;分布式...</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下一般比如想讓某個程序在后台運行，很多都是使用 &amp;
              在程序結尾來讓程序自動運行。比如我們要運行mysql在后台：/usr/local/mysql/bin/mysqld_safe --user=mysql &amp;但是...</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">立即注冊 &gt;</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">立即登錄 &gt;</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 -->


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 html靜態頁面如何轉換為asp 把靜態轉換為動態頁面，替換首頁功能 MVC 根據模板動態生成靜態頁面 將HTML頁面轉換為PDF文件並導出 vue將頁面或元素轉換為pdf html模板生成靜態頁面及模板分頁處理 Linux 靜態庫(.a)轉換為動態庫(.so) javascript - 將字符串轉換為模板字符串 vmdk虛擬機轉換為OVF模板，導入esxi JavaWeb頁面靜態化之使用freemarker模板生成一個html靜態頁面
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM