经过观察可以发现，基本上每个网站都会有一个叫导航栏的东西，其目的就是为了方便用户找到自己查看的页面。导航栏可以自己制作，但我选择的方法是使用Bootstrap框架，还有给每个网页都添加一段导航栏代码会显得特别冗余，所以这里还涉及到一个模板继承的知识点，我将模板继承知识写在了，方便查阅

    那么有了模板继承的知识以后，就可以给整个站点设计一个公共的代码部分—导航栏，将模板页面加入到路径中，修改settings.py文件，设置TEMPLATES的DIRS值

'DIRS': [os.path.join(BASE_DIR, 'templates')],

    做完上面这一步，接下来一个知识点就是静态文件的处理，它包括css，js，图片，这些都属于静态文件，那么同样，静态文件处理部分内容也在详细说明，这里我给出我的路径

base.css文件存放路径   /mainsite/static/blog/css/base.cssbootstap文件存放路径   /mainsite/static/bootstrap-3.3.7

    将这些都准备工作都做好以后，就可以开始编写base.html页面了，因为引入了静态资源处理，就需要在base.html开头处加上

{% load static from staticfiles %}

    静态文件需要在head标签引入：

    现在可以编写body体内的代码了，主要是用到bootstap框架，简单的介绍也在，不过还是建议查看bootstap的文档：，内部介绍的更为详细还有例子解释，在组件的右边有导航栏的使用方法，这个都可以根据自己需要的功能自行分析添加，所以我就直接贴出我的导航栏部分代码

    这是我的导航栏排布，可以根据功能自己添加相应的模板页面和功能处理，其中用户登录和注册留到后面介绍用户操作再作解释。导航栏已添加成功，那么还缺少页脚功能，如关于本站信息和网站备案号等。页脚其实有很多种方法，而且注意不是将页脚完全固定到窗口底部一直显示，而是可以跟随滚动条滚动。我使用的是position定位的方法，还有一种叫做负margin的方法，比如说下面这个是一个html文件的导航栏，内容，页脚

    在使用position定位的时候，注意要将body采用绝对定位，而且padding-bottom的高度一定要大于页脚内容的高度

body{    min-height:100%;    position:absolute;    padding-bottom: 30px; /*需要 >= footer的height值*/}.footer{    height:30px;    position:absolute;    bottom:0px;}

    以下是我的页脚代码：

     
    
      
        
       
            
        
关于本站
            
        
1.基于Django+Bootstrap开发
            
        
2.主要发表本人的技术笔记与随笔
            
        
3.本站于2018-5-30开始建站
        
       
        
       
            
        
建议反馈
            
        
1.欢迎注册评论
            
        
2.可在相应的博文底下评论
            
        
3.发邮件到jack_970124@163.com
        
       
        
       
            
        
欢迎联系
            
        
 ：1378482556
            
        
：https://github.com/XiaoFei-97
        
       
    
      
    
      
        
       Welcome to visit my website © Jack Jiang        
       赣ICP备18008471号    
      
     

    导航栏与页脚部分base.css如下：

​body{    margin-top: 50px!important;    background-color: #4cae4c;    margin-bottom: 2em;    font-size: 2em;    min-height:100%;    position:absolute;    width: 100%;    padding-bottom: 10em;}.footer{    width: 100%;    position: absolute;    bottom: 0;}.website-info{    overflow: hidden;    background-color: #e7e7e7;    padding-left: 10%;}.website-info h4{    padding-bottom: 3px;    color: #424242;    font-weight: bold;    border-bottom: 1px solid #aaa;}.about, .response, .contact{    float: left;    margin-right: 10%;    margin-left: 2% ;    font-size: 0.75em;}.about p, .response p, .contact p{    margin-bottom: 0.2em;}.copyright{    text-align: center;    padding: 0.5em 0;    background: #4F5893;    color: #e7e7e7;    bottom: 10em;}.copyright a{    color: #fff;    margin-left: 1em;}.copyright a:hover{    color: cyan;}