Django入门(二) 添加外部网页样式

原创

hellowgw 2016-03-08 23:05:35 博主文章分类：django ©著作权

©著作权归作者所有：来自51CTO博客作者hellowgw的原创作品，谢绝转载，否则将追究法律责任

上一节里我们已经可以使用Django将一个html文件返回给用户了。但是如果我们想将页面做的漂亮点，势必要用到css样式、js脚本等辅助工具加以装饰。在制作前段页面到时候我们单独建立css、js、plugins等目录来存储这些样式的文件。在Django中一样可以这样做，不过我们要把这些目录都统一的创建到static目录下。

1、在mydjango项目目录下，创建一个名字叫做static的文件夹

2、在static目录下创建提到img、css、js、plugins等目录

3、修改子目录mydjango目录下的setting.py文件，在文件里添加如下内容

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS=(
    os.path.join(BASE_DIR,'static'),  #注意括号后面的还有个逗号
)

4、在css目录下创建一个从commons.css

在js目录下引入jQuery

在plugins目录下引入bootstrap

commons.css

.first-line{
    color: red;
}
.second-line{
    color: green;
}
.backcolor{
    background-color: #8a6d3b;
}

在写入一定的样式后，编写测试用的index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--引用bootstrap提供的css样式-->
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <!--引用自己的编写的commons.css样式-->
    <link rel="stylesheet" href="/static/css/commons.css">
</head>
<body>
    <div class="first-line h1" id="1">
        first line
    </div>
    <div class="second-line h1" id="2">
        second line
    </div>
    <button type="button" class="btn btn-primary" id="bt">Primary</button>
<!--引用jQuery-->
<script type="application/javascript" src="/static/js/jquery-2.2.1.min.js"></script>
<!--引用bootstrap提供的js-->
<script type="application/javascript" src="/static/plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script>
//    定义一个事件，当点击按钮的时候给第二行添加背景色
    $(function(){
        $('#bt').click(function(){
            $('#2').addClass('backcolor')
        });
    });
</script>
</body>
</html>

这里要注意，在引入jQuery和bootstrap的时候 script type=type="application/javascript" 千万写成其他的格式，否则影响js的使用