古之善為士者，微妙玄通，深不可識
——老子《道德經》

本節內容

• 給頁面新增樣式修飾

1. 頁面樣式處理

通常情況下，網頁開發時，頁面中的樣式是透過外部css樣式進行處理的，外部的css檔案載入在Django中，需要進行簡單的處理

首先取保我們的mysite/mysite/settings.py配置檔案中，包含了STATIC_URL='/static/'的配置（預設是已經配置的）

我們在應用模組資料夾下，建立一個目錄static/專門用於存放css樣式檔案，建立一個目錄images/專門儲存頁面中用到的圖片，建立一個lib/專門用於儲存第三方的檔案（如jquery、bootstrap等等）

建立mysite/polls/static/style.css樣式檔案，用於修飾我們的首頁index.html樣式，編輯內容如下

*{margin:0;padding:0;}h1{font-size:18px;color:#069;font-weight:bolder;}ul{list-style:none;font-size:16px;}ul > li{height:20px;line-height:20px;font-family: "微軟雅黑"}

因為我們的專案是用在網路伺服器上的，所以在mysite/polls/templates/index.html檔案中引入樣式，首先要透過{%load static%}獲取static/資料夾的絕對路徑，然後在頁面中，使用{% static '路徑'%}的形式來使用；

html>
    
    
    {% load static %}    
    
      
    
投票模組首頁
    ![]({% static 'polls/images/my.jpg'%})
    {%if question_list%}    

        {%for question in question_list%}        
•         {%endfor%}    

Congratulations，目前沒有什麼問題

完成上述程式碼之後，我們開啟網頁訪問應用的首頁，就可以看到我們的樣式和圖片都載入OK了

網頁中使用樣式和圖片

2. 使用第三方模組Bootstrap

進入下載bootstrap框架檔案，這裡我使用的是bootstrap3.4的版本。下載好之後，將解壓得到的bootstrap檔案中的css/、js/、font/三個檔案複製到我們專案的mysite/polls/static/lib/資料夾下

bootstrap中文官網

專案目錄結構

專案目錄結構

接下來，我們編輯mysite/polls/templates/index.html頁面，引入bootstrap並新增它的樣式處理如下：

html>
    
    
    {% load static %}    
    
      
    

        

            

                
使用者問題列表 解決方案提供平臺

            
        
        

            {%if question_list%}            
                
                    
                    
                    
                
                {%for question in question_list%}                
                    
                    
                    
                
                {%endfor%}            
問題編號
問題描述
操作
{{forloop.counter}}
{{question.question_text}}

            {%else%}                
Congratulations，目前沒有什麼問題
            {%endif%}        
    

重新啟動專案，我們開啟瀏覽器訪問專案首頁，可以看到一個非常漂亮的首頁呈現在了眼前

使用bootstap樣式修飾的網頁

本節內容對於靜態檔案（如樣式表檔案css、指令碼檔案js、圖片檔案image）的處理就說到這裡。大家如果有什麼問題的話可以留言的哦！

Django來敲門

作者：大牧莫邪
連結：https://www.jianshu.com/p/53e2dfc74168