目前html继承与引用结构
html | 继承 |
---|---|
home.html | 继承自base_main.html |
cart.html | 继承自base_main.html |
market.html | 继承自base_main.html |
mine.html | 继承自base_main.html |
base_main.html | 继承自base.html |
html | 引入css |
---|---|
base_main.html | 引入main.css |
home.html | 引入home.css |
cart.html | 引入cart.css |
market.html | 引入market.css |
mine.html | 引入mine.css |
1、(首页、商城、订单、我)页面选中状态显示
home.html
{% extends 'base_main.html' %}
{% load static %}
{% block ext_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'axf/main/css/home.css'%}">
{% endblock %}
{% block ext_js %}
{{ block.super }}
<script type="text/javascript" src="{% static 'js/swiper.jquery.js'%}"> </script>
{% endblock %}
home.css
footer .home span{
background: url(/static/img/home_selected.png) no-repeat;
background-size: 0.513889rem;
}
footer .home dd{
color: orange;
}
目录结构:
路由:
视图:
访问:
其余三个:cart、market、mine与home同理
2、添加点击换页
<a href="{% url 'axf:home' %}" class="home">
#其余三个:cart、market、mine与home同理,在对应位置添加上{% url 'axf:名称' %}即可
3、开始建立models.py
建立模型
# App/models.py
from django.db import models
class MainWheel(models.Mdel):
img = models.CharField(max_length=255)
name = models.CharField(max_length=64)
trackid = models.IntegerField(default=1)
class Meta:
db_table = 'axf_wheel'
生成并执行迁移文件:
#生成迁移文件:
python manage.py makemigrations
#执行迁移文件:
python manage.py migrate
刷新后会看见这张新建的表:
插入数据并保存:
查看数据:
views.py
4、首页滚动图片
home.html
在home.css新插入对swiper的样式:
/*底部图标和文字样式*/
footer .home span {
background: url(/static/img/home_selected.png) no-repeat;
background-size: 0.513889rem;
}
footer .home dd {
color: orange;
}
#home {
padding: 1.5rem 0;
overflow: auto;
height: 100%;
width: 100%;
padding-bottom: 3rem;
position: fixed;
}
#topSwiper {
height: 3.95rem;
width: 10rem;
overflow: hidden;
}
#topSwiper div a {
display: inline-block;
height: 3.95rem;
width: 10rem;
}
#topSwiper img {
height: 100%;
width: 100%;
}
新建home.js(注意路径)
访问: