【實戰演練】Python+Django網站開發系列04-Django導航BASE頁開發

時間 2019-11-07

標籤實戰演練 python+django python django 網站開發系列導航 base 欄目 Python 简体版

原文原文鏈接

上一篇討論瞭如何編寫靜態頁面，靜態頁面經過html語言書寫，這一篇介紹一下基本的html標籤，以及開始利用css與js製做導航BASE頁。javascript

一、html標籤css

<h></h>標題html

<P></p>段落前端

<img src="">圖片標籤java

<a href+"">超連接標籤編程

<tr></tr>表格標籤bootstrap

<th></th>表格標題api

<td></td>表格行前端框架

<div></div>區域標籤網絡

<title></title>頁面標籤的標題

<body></body>頁面具體正文內容

二、前端框架

之前，學習前端還要專門去學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號便可登陸。

組件庫能夠對單獨的組件進行應用，可視化佈局能夠整個佈局開始拖拉拽的方式來寫。

三、BASE頁開發

3.1BASE頁引用

剛進入會要求進行佈局選擇，而後從左邊將須要的組件拖拉到右邊對應區域便可。咱們先設計登陸頁面，用上下佈局，而後將橫向導航與單個網絡佈局拖到對應位置。

點擊下載就能夠看到代碼了。

打開pycharm，在templates下面建立BASE01.html文件，清空裏面的內容，而後將代碼所有貼過去。

爲了讓其餘頁面引用BASE01頁面的內容，須要在裏面加block。在67行左右，最內層的<div>標籤，打block標記。

<div class="col-md-12">
    {% block content %}
    {% endblock %}
</div>

修改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裏面作少許修改就能夠了。

<ul class="nav navbar-nav pull-left m0">
    <li class="active"><a href="javascript:void(0);">首頁</a></li>
    <li><a href="javascript:void(0);">關於咱們</a></li>
    <li><a href="javascript:void(0);">聯繫咱們</a></li>
</ul>

修改成須要的內容，或者整個ul列表刪除便可。

而後嘗試修改左上角logo，原logo引用以下：

<img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png" class="logo">

只須要上傳文件到static/img目錄內（img目錄須要手動建），而後修改src引用了路徑，引用圖片便可。

<img src="/static/img/logo.png" class="logo">

3.3修改index內容

接下來能夠修改index的內容了，咱們能夠增長用戶名與密碼輸入框。

國際慣例，直接從左邊往右邊拖動就能夠了。直接雙擊還能編輯裏面內容。

點擊下載，而後將新增的代碼，拷貝到index.html的block裏面就好了。

刷新頁面，發現已經成功修改。經過良好的前端UI框架，大大地減小了代碼的工做量。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。