上一篇討論了如何編寫靜態頁面，靜態頁面通過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引用如下：
只需要上傳文件到static/img目錄內（img目錄需要手動建），然后修改src引用了路徑，引用圖片即可。
3.3修改index內容
接下來可以修改index的內容了，我們可以增加用戶名與密碼輸入框。
國際慣例，直接從左邊往右邊拖動就可以了。直接雙擊還能編輯里面內容。
點擊下載，然后將新增的代碼，拷貝到index.html的block里面就行了。
刷新頁面，發現已經成功修改。通過良好的前端UI框架，大大地減少了代碼的工作量。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
