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

上一篇讨论了如何编写静态页面，静态页面通过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行左右，最内层的

标签，打block标记。

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引用如下：

只需要上传文件到static/img目录内（img目录需要手动建），然后修改src引用了路径，引用图片即可。

3.3修改index内容

接下来可以修改index的内容了，我们可以增加用户名与密码输入框。

国际惯例，直接从左边往右边拖动就可以了。直接双击还能编辑里面内容。

点击下载，然后将新增的代码，拷贝到index.html的block里面就行了。

刷新页面，发现已经成功修改。通过良好的前端UI框架，大大地减少了代码的工作量。