麻瓜编程·python实战·4-3自学:给4-2作业换新界面

我的结果

新界面

我的代码

{% load static %}
<!DOCTYPE html>
<html>
####################################
  <head>
    <meta charset="utf-8">
    <title>Just A Web</title>
    <link rel="stylesheet" href="{% static '/css/semantic.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/semantic.js' %}"></script>
  </head>
####################################
  <body>
    ########## <!--    Menu-->
    <div class="ui sidebar visible vertical inverted left thin menu">
      <div class="header item">
        <img src="{% static 'img/common/logo3.png' %}">
      </div>
      <a class="item">
        <i class="user icon"></i>
        个人主页
      </a>
      <a class="item">
        <i class="shop icon"></i>
        购物车
      </a>
      <a class="item">
        <i class="heart icon"></i>
        收藏夹
      </a>
      <a class="item">
        <i class="mail icon"></i>
        消息
      </a>
    </div>
    <div class="pusher">

      ##########<!--    导航-->
      <div class="ui menu">
        <div class="header item" id="menu">
          Menu
          <i class="content icon"></i>
        </div>
        <div class="item">
          58北京
        </div>
        <div class="item">
          转转商品
        </div>
        <div class="item">
          二手手机
        </div>
      </div>

     ########## <!--    内容-->
      <div class="ui text container piled segment" style="margin: 50px 0 0 0">

        {% for item in ArtiInfo %}
          <div class="ui divided items">
              <div class="item">
                <div class="content">
                  <a class="header">{{ item.title }}</a>
                  <div class="meta">
                    <span class="cinema">卖家:{{ item.name }}</span>
                  </div>
                  <div class="extra">
                    <div class="ui label">电话:{{ item.contact }}</div>
                    <div class="ui label">地址:{{ item.region }}</div>
                  </div>
                  <div class="description">
                    <p>价格:{{ item.price }}</p>
                    <p>发帖时间:{{ item.time }}</p>
                  </div>
                </div>
              </div>
          </div>
        {% endfor %}

        ########## <!--分页器-->
        <div class="ui pagination menu">
            {% if ArtiInfo.has_previous %}
                <a class="item" href="?page={{ ArtiInfo.previous_page_number }}">< pre</a>
            {% endif %}
                <div class="disable item"> {{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }} </div>
            {% if ArtiInfo.has_next %}
                <a class="item" href="?page={{ ArtiInfo.next_page_number }}">next ></a>
            {% endif %}
        </div>

      </div>

    </div>

    <script>
        $('.ui.sidebar').sidebar('is visible')
    </script>

{#    <script>#}
{#      $('#menu').click(function () {#}
{#        $('.ui.sidebar').sidebar('toggle');#}
{#      });#}
{#    </script>#}

  </body>
####################################
</html>

推荐阅读更多精彩内容