我的結果
新界面
我的代碼
{% 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>
