原文出处：https://jzfblog.com/detail/42，文章的更新编辑以此链接为准。欢迎关注源站文章！一、前言

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

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

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

二、引入bootstrap

　　做完上面这一步，接下来一个知识点就是静态文件的处理，它包括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;}

　　原文出处：，文章的更新编辑以此链接为准。欢迎关注源站文章！