您的位置：首页 > 其它

后台管理布局之模板继承

2017-08-26 17:38 387 查看
后台管理布局中分-----上-------左     ===== 右=====默认的管理界面 左侧跟上方的区域不做任何变动对于右侧区域  支持滚动  css添加
overflow: scroll;
对于右侧区域的内容  进行继承
父级的base.html添加模板语言
{% blockcontent %}{% endblock %}
子文件使用extends直接继承
{% extends "base.html" %}{% block content %}<form action=""><p><input type="text">账号</p></form>{% endblock %}
如果父级base.html有文件内容 则会被覆盖掉
完整代码内容如下:
urls.py
"""s17day17 URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/1.11/topics/http/urls/ Examples:Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')Including another URLconf1. Import the include() function: from django.conf.urls import url, include2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))"""from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^index/', views.index),url(r'^addArticle/', views.addArticle),]
views.py文件内容
from django.shortcuts import render,HttpResponseimport datetime# Create your views here.def index(request):t=datetime.datetime.now()a='<a href="baidu.                                                                                                                                                                                                                                                                              com">asd</a>'word="I come from a"l=[1,1,2,3]# return HttpResponse("HELLO")return render(request,"后台管理布局.html",locals())def addArticle(request):return render(request,"addArticle.html")
base.html文件内容
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><style>.header {width: 100%;height: 48px;background-color: darkgrey;position: fixed;top: 0;left: 0;}.left {width: 200px;position: absolute;top: 48px;left: 0;bottom: 0;background-color: greenyellow;}.right {position: absolute;top: 48px;bottom: 0;left: 200px;right: 0;overflow: scroll;background-color: beige;}.left a {display: inline-block;width: 100%;padding: 20px;background-color: lightskyblue;color: black;}</style><body><div class="header"></div><div class="box"><div class="left"><a href="/addArticle/">添加文章</a></div><div class="right">{% block content %}{% endblock %}</div></div></body></html>
addArticle.html内容
{% extends "base.html" %}{% block content %}<form action=""><p><input type="text">账号</p></form>{% endblock %}
后台管理布局.html  即index文件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><style>.header {width: 100%;height: 48px;background-color: darkgrey;position: fixed;top: 0;left: 0;}.left {width: 200px;position: absolute;top: 48px;left: 0;bottom: 0;background-color: greenyellow;}.right {position: absolute;top: 48px;bottom: 0;left: 200px;right: 0;overflow: scroll;background-color: beige;}.left a {display: inline-block;width: 100%;padding: 20px;background-color: lightskyblue;color: black;}</style><body><div class="header"></div><div class="box"><div class="left"><a href="/addArticle/">添加文章</a></div><div class="right"><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1><h1>xp</h1></div></div></body></html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航