Django来敲门~第一部分【8.网页中的css/js/image处理】

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


本节内容

  • 给页面添加样式修饰

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/文件夹下

bootstrap中文官网

项目目录结构

项目目录结构

接下来,我们编辑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>

重新启动项目,我们打开浏览器访问项目首页,可以看到一个非常漂亮的首页呈现在了眼前

使用bootstap样式修饰的网页


本节内容对于静态文件(如样式表文件css、脚本文件js、图片文件image)的处理就说到这里。大家如果有什么问题的话可以留言的哦!


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端达人

在 React 应用中获取数据

可以说 React 是构建 web 应用最流行的库。然而,它并不是全能的 web 框架。它只关注 MVC 中的 view 模块。

2852
来自专栏非著名程序员

环境配置:React Native智能开发工具,可代码提醒的IDE—VS Code

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) VS Code是一个专门为React Nat...

4115
来自专栏自动化测试实战

flask第十七篇——模板【1】

3005
来自专栏java闲聊

SpringBoot+Vue2.x登陆功能

3144
来自专栏云计算教程系列

如何使用WP-CLI安装WordPress

很多人都熟悉WordPress的安装,Wordpress安装起来非常简单,其号称5分钟快速安装。但是,当您需要部署多个Wordpress时,重复的工作会拖慢你大...

1712
来自专栏前端儿

iPhone页面的常用调试方法

某些页面需要设置HOST才能进行访问,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们

4711
来自专栏web前端-

初始vue

     vue是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,...

1083
来自专栏小尘哥的专栏

前后端分离Nuxt.js解决SEO问题

背景:由于后端程序猿通常对CSS 、JS掌握不是特别好,通常的开发模式,UI把静态html做好交给程序猿,程序猿开发,把静态html变成动态的时候经常会有各种样...

4554
来自专栏极客编程

Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?

浏览器正在逐步的支持原生JavaScript模块。Safari和Chrome的最新版本已经支持它们了,Firefox和Edge也将很快推出。

2102
来自专栏生信技能树

请品鉴我的vim配置

背景 本人是生信工程师,主要使用的语言是 python, R, perl, shell,经常要ssh到远程服务器上写代码,因此学习了vim,后来发现了spf13...

5966

扫码关注云+社区

领取腾讯云代金券