您现在的位置是：首页 > 文章详情

Django 搭建CMDB系统完整[2](设置CSS\JS\IMAGES)

日期：2018-08-20点击：444收藏

在cmdb里面新建static目录，用于存放css js images

mkdir -p /dj/cmdb/static/images,scripts,style

设置settings.py

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')
STATICFILES_DIRS = [
("style", os.path.join(STATIC_ROOT, 'style')),
("images", os.path.join(STATIC_ROOT, 'images')),
("scripts", os.path.join(STATIC_ROOT, 'scripts')),
]

设置urls.py

from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.contrib import staticfiles
from django.views.static import serve
urlpatterns = [
url(r'^static/(?P<path>.*) $',serve,{'document_root': settings.STATIC_ROOT}), url(r'^$ ',views.main_page,name='main_page'),
url(r'^login/$', login),
]

template中引用格式为

login_css.css文件

@charset "UTF-8";

{
margin: 0;
padding: 0;
list-style: none;
}

html,body {
background: #0D1D3E;
font: normal 15px "Microsoft YaHei";
}

login_area {

width: 100%; height: 433px; position: absolute; top: 22%;

}

login_box {

margin: 0 auto; width: 812px; height: 408px; background: url('../../images/login/login.png') 0px 0px no-repeat; position: relative;

}

login_form {

width: 370px; height: 320px; position: absolute; top: 10px; right: 20px;

}

login_tip {

height: 35px; list-style: 35px; font-weight: bold; color: red; padding-top: 15px; margin-top: 55px;

}

btn_area {

margin-top: 20px; margin-left: 80px;

}

.username,.pwd {
width: 200px;
height: 30px;
line-height: 30px;
margin-top: 20px;
outline: 0;
padding: 5px;
border: 1px solid;
border-color: #C0C0C0 #D9D9D9 #D9D9D9;
border-radius: 2px;
background: #FFF;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0
rgba(255, 255, 255, 0.2);
-webkit-transition: box-shadow, border-color .5s ease-in-out;
-moz-transition: box-shadow, border-color .5s ease-in-out;
-o-transition: box-shadow, border-color .5s ease-in-out;
}

.login_btn {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
border-style: none;
cursor: pointer;
font-family: "Microsoft YaHei", "微软雅黑", "sans-serif";
background: url('../../images/login/btn.jpg') 0px -1px no-repeat;
}

.login_btn:hover {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
border-style: none;
cursor: pointer;
font-family: "Microsoft YaHei", "微软雅黑", "sans-serif";
background: url('../../images/login/btn_hover.jpg') 0px 0px no-repeat;
color: #fff;
}

login.html文件

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CMDB-后台系统</title>
<link href="/static/style/authority/login_css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/static/scripts/jquery/jquery-1.7.1.js"></script>
</head>
<body>
{% if form.has_errors %}
<p>Your username and password didn't match.
Please try again.</p>
{% endif %}
<div id="login_center">
<div id="login_area">
<div id="login_box">
<div id="login_form">
<form id="submitForm" action="." method="post">
<div id="login_tip">
<span id="login_err" class="sty_txt2"></span>
</div>
<div>
<label for="id_username">用户名:{{ form.username }}
</div>
<div>
<label for="id_password">密码:</label>{{ form.password }}
</div>
<div id="btn_area">
<input type="hidden" name="next" value="/" />
{% csrf_token %}
<input type="submit" class="login_btn" id="login_sub" value="登录">
<input type="reset" class="login_btn" id="login_ret" value="重置">
</div>
</form>
</div>
</div>
</div>
</div>