ジャンゴ03ショッピングモール事業（パッケージのインポートリソース、簡単な構造のページは、ホームページにアクセスしてみてください）

1、リソースバンドルへ

ここに画像を挿入説明

需要4个资源包，下载地址：
https://pan.baidu.com/s/1sZKBGXUr8YRwCMFv-3oq4A

具体导入方法参考：
https://www.bilibili.com/video/av69060979?t=312&p=267

2、リソースパック内部のbase.htmlは書きました：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    //控制浏览器屏幕缩放比，适用移动端
    <meta name="viewport" content="width=device-width, initial-scale=1.0 initial-scale=1 user-scalable=no">

    <title>{{ title }}</title>

    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'css/swiper.css' %}">
    //清楚浏览器样式
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">

    {% block ext_css %}
    {% endblock %}

</head>

    {% block header %}
    {% endblock %}

    {% block content%}
    {% endblock %}

    {% block footer %}
    {% endblock %}
    <script type="text/javascript" src="{% static 'js/jquery-1.9.1.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/base.js' %}"></script>


    {% block ext_js %}
    {% endblock %}
</body>
</html>

3、簡単なページを作成

テンプレート/メイン/ home.html

{% extends 'base_main.html' %}
{%  load static %}
{% block ext_js %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/swiper.jquery.js'%}"> </script>
{% endblock %}

ここに画像を挿入説明
テンプレート/メイン/ cart.html

テンプレート/メイン/ market.html
ここに画像を挿入説明
テンプレート/メイン/ mine.html

4、base_main.html、あるmain.css

ここに画像を挿入説明
あるmain.css

html,body{
  height: 100%;
  width: 100%;
}
body{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #eee;
}
header,footer{
  width: 100%;
  height: 1.5rem;
  font-size: 0.277777rem;
  border-top: 1px solid #f0f0f0;
  z-index: 10;
  position: fixed;
  display: flex;
}
header{
  background: yellow;
  top: 0;
  left: 0;
}
footer{
  background: #fff;
  bottom: 0;
  left: 0;
}
footer a{
  display: block;
  width: 25% !important;
  text-align: center;
  overflow: hidden !important;
}
footer dl dt{
  height: 0.777777rem;
  padding-top: 0.22222rem;
  position: relative;
}
footer dl dt span{
  display: inline-block;
  width: 0.513889rem;
  height: 0.513889rem;
}
footer dl dd{
  width: 100%;
  height: 0.708333rem;
}
footer .home span{
  background: url(/static/img/home.png) no-repeat;
  background-size: 0.513889rem;
}
footer .market span{
  background: url(/static/img/market.png) no-repeat;
  background-size: 0.513889rem;
}
footer .mine span{
  background: url(/static/img/mine.png) no-repeat;
  background-size: 0.513889rem;
}
footer .cart span{
  background: url(/static/img/cart.png) no-repeat;
  background-size: 0.513889rem;
}

写真をインポートする
ここに画像を挿入説明
base_main.html

{% extends 'base.html' %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/main/css/main.css' %}">
{% endblock %}

{% block header %}
    <header></header>
{% endblock %}

{% block footer %}
    <footer>
        <a href="#" class="home">
            <dl>
                <dt>
                    <span></span>
                </dt>
                <dd>首页</dd>
            </dl>
        </a>
    </footer>
{% endblock %}