古之善为士者,微妙玄通,深不可识
——老子《道德经》
本节内容
- 给页面添加样式修饰
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 '路径'%}
的形式来使用;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% load static %}
<link rel="stylesheet" href="{% static 'polls/style.css' %}">
<title>投票模块首页</title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>投票模块首页</h1>
![]({% static 'polls/images/my.jpg'%})
{%if question_list%}
<ul>
{%for question in question_list%}
<li><a href="{%url 'polls:detail' question.id%}">{{question.question_text}}</a></li>
{%endfor%}
</ul>
{%else%}
<p>Congratulations,目前没有什么问题</p>
{%endif%}
</body>
</html>
完成上述代码之后,我们打开网页访问应用的首页,就可以看到我们的样式和图片都加载OK了
2. 使用第三方模块Bootstrap
进入http://www.bootcss.com
下载bootstrap框架文件,这里我使用的是bootstrap3.4的版本。下载好之后,将解压得到的bootstrap文件中的css/、js/、font/
三个文件拷贝到我们项目的mysite/polls/static/lib/
文件夹下
项目目录结构
接下来,我们编辑mysite/polls/templates/index.html
页面,引入bootstrap并添加它的样式处理如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{% load static %}
<link rel="stylesheet" href="{% static 'polls/lib/bootstrap3.4/css/bootstrap.min.css' %}">
<title>投票模块首页</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<div class="row">
<div class="page-header">
<h1>用户问题列表 <small>解决方案提供平台</small></h1>
</div>
</div>
<div class="row">
{%if question_list%}
<table class="table table-hover table-striped">
<tr>
<th>问题编号</th>
<th>问题描述</th>
<th>操作</th>
</tr>
{%for question in question_list%}
<tr>
<td>{{forloop.counter}}</td>
<td>{{question.question_text}}</td>
<td><a href="{% url 'polls:vote' question.id%}">查看详细</a></td>
</tr>
{%endfor%}
</table>
{%else%}
<p>Congratulations,目前没有什么问题</p>
{%endif%}
</div>
</div>
</body>
</html>
重新启动项目,我们打开浏览器访问项目首页,可以看到一个非常漂亮的首页呈现在了眼前
本节内容对于静态文件(如样式表文件css、脚本文件js、图片文件image)的处理就说到这里。大家如果有什么问题的话可以留言的哦!