在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中引用格式为
<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>
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>
</body>
</html>
