【实战演练】Python+Django网站开发系列04-Django导航

上一篇讨论了如何编写静态页面，静态页面通过html语言书写，这一篇介绍一下基本的html标签，以及开始利用css与js制作导航BASE页。

1、html标签

标题

图片标签

超链接标签

表格标签

表格标题

表格行

页面标签的标题

页面具体正文内容

2、前端框架

以前，学习前端还要专门去学html、css、java script这3门语言，而这3门语言语法又不尽相同，因此基本上就是新人劝退。

而现代的编程，其实已经有很多框架将一些常用功能高度封装，其实只要引用一下框架，修修改改，就能出来效果。

而前端框架，就是用来快速实现css与js的一些功能的。例如bootstrap、easyui、layui等UI框架，最近流行的JS框架VUE、React、angular等。

其中腾讯也给出了magicbox这一款工具（里面集成了很多其他优秀的框架），并且示例写得比较好，基本上所见即所得，因此我们使用magicbox来进行页面UI开发。

腾讯magicbox：https://magicbox.bk.tencent.com/，使用QQ号即可登录。

组件库可以对单独的组件进行应用，可视化布局可以整个布局开始拖拉拽的方式来写。

3、BASE页开发

3.1BASE页引用

刚进入会要求进行布局选择，然后从左边将需要的组件拖拉到右边对应区域即可。我们先设计登录页面，用上下布局，然后将横向导航与单个网络布局拖到对应位置。

点击下载就可以看到代码了。

打开pycharm，在templates下面创建BASE01.html文件，清空里面的内容，然后将代码全部贴过去。

为了让其他页面引用BASE01页面的内容，需要在里面加block。在67行左右，最内层的

              
                
                  

                  
                
                
                  class
                
                
                  ="col-md-12"
                
                
                  >
                  

                
                    {% 
                
                  block 
                
                
                  content 
                
                %}
                

                    {% 
                
                  endblock 
                
                %}
                

                
                
              
            

修改index.html，清空内容，应用BASE01.html的block标记，并且在block之间填写本页独有的内容，例如HelloWorld

            
              {% 
              
                extends 
              
              
                'BASE01.html' 
              
              %}
              

              

              {% 
              
                block 
              
              
                content 
              
              %}
              

                  Hello World！！！
              

              {% 
              
                endblock 
              
              %}
            
          

重新访问127.0.0.1:8000/index，发现页面已经不一样了，成功引用了BASE01的内容。

3.2BASE修改

如果顶部导航的内容不想要，或者想要修改，直接到BASE01.html里面做少量修改就可以了。

            
              
                

                
              
              
                class
              
              
                ="nav navbar-nav pull-left m0"
              
              
                >
                

                    
                

              
              
                class
              
              
                ="active"
              
              
                >
                
                
              
              
                href
              
              
                ="javascript:void(0);"
              
              
                >
              
              首页
              
                

                    
                

                  
                  
                
              
              
                href
              
              
                ="javascript:void(0);"
              
              
                >
              
              关于我们
              
                

                    
                

                  
                  
                
              
              
                href
              
              
                ="javascript:void(0);"
              
              
                >
              
              联系我们
              
                

              
            
          

修改为需要的内容，或者整个ul列表删除即可。

然后尝试修改左上角logo，原logo引用如下：