【實戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列04-Django導(dǎo)航BASE頁開發(fā)
時間：2023-05-30 21:21:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-05-30 21:21:01 來源：網(wǎng)站運(yùn)營
【實戰(zhàn)演練】Python+Django網(wǎng)站開發(fā)系列04-Django導(dǎo)航BASE頁開發(fā)：
#本文歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明出處和作者。上一篇討論了如何編寫靜態(tài)頁面，靜態(tài)頁面通過html語言書寫，但是html寫出來的頁面實在是丑，所以需要進(jìn)行美化，這就需要用到CSS與JS了。另外，像導(dǎo)航條，每一頁都是一樣的，因此沒必要每個html頁面里面把代碼重復(fù)寫一遍，就需要制作BASE頁面了。
1、CSS
1.1 CSS語法CSS叫層疊樣式表，主要是用來批量修改html元素的樣式的（例如字體、顏色、大小等）。關(guān)于CSS，里面的樣式太多，根本介紹不過來，其實現(xiàn)代化編程基本上都不用看了，直接用前端開發(fā)UI框架來修改，所以不用了解太多，只講幾個重點(diǎn)。
CSS的基本語法，就是selector（選擇器）+聲明（特性：具體值）
selector {property: value}例如：
h1就是選擇器，對應(yīng)html里面的<h1>標(biāo)簽，意思是所有<h1>標(biāo)簽的元素，全部顏色變成紅色，字體大小變成14px。 這是直接匹配了html標(biāo)簽。
另外還有2種：
.selector，用"."的是匹配類，html元素里面用class="selector"來匹配樣式。
#selector，用"#"的是匹配元素id，html元素里面用id="selector"來匹配樣式。
CSS掌握這些內(nèi)容就足夠了，反正都不會手動去寫：）
更多CSS內(nèi)容，詳見w3school教程：
1.2 CSS引用1.2.1網(wǎng)絡(luò)方式引用CSS可以直接在HTML文件內(nèi)編寫，手動編寫的此處不介紹，我們采用引用別人CSS樣式的方法。一種是直接內(nèi)嵌在HTML頁面里面，一般寫在html的<head>標(biāo)簽里面，通過<link></link>標(biāo)簽進(jìn)行引用，如：
<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">1.2.2本地引用也可以把css文件下載到/static/css/目錄下，然后本地引用。
<link href="/static/css/bk.css" rel="stylesheet">2、前端框架
以前，學(xué)習(xí)前端還要專門去學(xué)html、css、java script這3門語言，而這3門語言語法又不盡相同，因此基本上就是新人勸退。（特別是CSS）
而現(xiàn)代的編程，其實已經(jīng)有很多框架將一些常用功能高度封裝，其實只要引用一下框架，修修改改，就能出來效果。
而前端框架，就是用來快速實現(xiàn)css與js的一些功能的。例如bootstrap、easyui、layui等UI框架，最近流行的JS框架VUE、React、angular等。
雖然bootstrap與國內(nèi)layui比較流行，但是不知道是否幫助文檔與教材的問題，感覺對新手還是不夠友好。初學(xué)者建議可以試用一下騰訊的magicbox這一款工具（里面集成了很多其他優(yōu)秀的框架），并且示例寫得比較好，基本上所見即所得，因此我們使用magicbox來進(jìn)行頁面UI開發(fā)。
使用QQ號即可登錄。
3、BASE頁開發(fā)
3.1BASE頁引用剛進(jìn)入會要求進(jìn)行布局選擇，然后從左邊將需要的組件拖拉到右邊對應(yīng)區(qū)域即可。我們先設(shè)計登錄頁面，用上下布局，然后將橫向?qū)Ш脚c單個網(wǎng)絡(luò)布局拖到對應(yīng)位置。
之所以說magicbox好用，對新手友好，是因為它可以直接拖拉拽元素，就可以構(gòu)建好頁面。（不好意思bootstarp與layui可以直接拖拉拽的頁面我就是沒找到，如果找到了請告訴我）
打開pycharm，在templates下面創(chuàng)建BASE01.html文件，清空里面的內(nèi)容，然后將代碼全部貼過去。
為了讓其他頁面引用BASE01頁面的內(nèi)容，需要在里面加block。在67行左右，最內(nèi)層的<div>標(biāo)簽，打block標(biāo)記。
<div class="col-md-12"> {% block content %} {% endblock %}</div>修改index.html，清空內(nèi)容，應(yīng)用BASE01.html的block標(biāo)記，并且在block之間填寫本頁獨(dú)有的內(nèi)容，例如HelloWorld
{% extends 'BASE01.html' %}{% block content %} Hello World?。。?/span>{% endblock %}重新訪問127.0.0.1:8000/index，發(fā)現(xiàn)頁面已經(jīng)不一樣了，成功引用了BASE01的內(nèi)容。
3.2BASE修改如果頂部導(dǎo)航的內(nèi)容不想要，或者想要修改，直接到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);">關(guān)于我們</a></li> <li><a href="javascript:void(0);">聯(lián)系我們</a></li></ul>修改為需要的內(nèi)容，或者整個ul列表刪除即可。
然后嘗試修改左上角logo，原logo引用如下：
<img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png" class="logo">只需要上傳文件到static/img目錄內(nèi)（img目錄需要手動建），然后修改src引用了路徑，引用圖片即可。
<img src="/static/img/logo.png" class="logo">3.3修改index內(nèi)容接下來可以修改index的內(nèi)容了，我們可以增加用戶名與密碼輸入框。
國際慣例，直接從左邊往右邊拖動就可以了。直接雙擊還能編輯里面內(nèi)容。
點(diǎn)擊下載，然后將新增的代碼，拷貝到index.html的block里面就行了。
刷新頁面，發(fā)現(xiàn)已經(jīng)成功修改。通過良好的前端UI框架，幾分鐘就拖拉拽出一個前端頁面了，大大地減少了代碼的工作量。
關(guān)鍵詞：系列,導(dǎo)航,實戰(zhàn)
在線咨詢
