古之善为士者，微妙玄通，深不可识
——老子《道德经》

本节内容

• 给页面添加样式修饰

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%}        
• {{question.question_text}}
        {%endfor%}    

Congratulations，目前没有什么问题

完成上述代码之后，我们打开网页访问应用的首页，就可以看到我们的样式和图片都加载OK了

网页中使用样式和图片

2. 使用第三方模块Bootstrap

进入http://www.bootcss.com下载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