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

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

作者: bbjoe | 来源:发表于2016-08-24 15:25 被阅读0次

    我的结果

    新界面

    我的代码

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/trhosttx.html