转载请注明:https://blog.csdn.net/weixin_40490238/article/details/84573309
django的准备工作:
打开pycharm创建的django项目,并新建一个python虚拟环境
打开命令行,输入:创建一个新的APP应用
python manage.py startapp robotWeb
创建成功后新建文件夹static,并在static文件下创建用来储存css,js,img的文件夹
文件目录如下:
settings.py文件,注册APP
扫描二维码关注公众号,回复:
4294622 查看本文章
static文件配置:settings.py最后添加
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
在css,js,img创建文件
css调用img例子:
body.style-2 {
background-color: #ffffff;
background-size: cover;
background-position: -30% center;
background-repeat: no-repeat;
background-image: url(/static/img/bg_2.jpg);
height: 100%;
}
在templates创建一个HTML页面:forgot.html (最后附上forgot.html代码)
html调用 js,css:
{% load static %}
<link rel="stylesheet" href={% static 'css/style.css' %}>
<script src={% static 'js/modernizr-2.6.2.min.js' %}></script>
访问forgot.html规则,views.py:
from django.shortcuts import render
# Create your views here.
def forgot(request):
return render(request, 'forgot.html')
路径访问urls.py:
from django.urls import path
from robotWeb import views
urlpatterns = [
path('', views.forgot),
]
最后成功运行
forgot.html:
<!DOCTYPE html >
<html lang="en">
{% load static %}
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Minimal and Clean Sign up / Login and Forgot Form by FreeHTML5.co</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Template by FreeHTML5.co" />
<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
<!-- Facebook and Twitter integration -->
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:url" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href={% static 'css/bootstrap.min.css' %}>
<link rel="stylesheet" href={% static 'css/animate.css' %}>
<link rel="stylesheet" href={% static 'css/style.css' %}>
<!-- Modernizr JS -->
<script src={% static 'js/modernizr-2.6.2.min.js' %}></script>
<!-- FOR IE9 below -->
<!--[if lt IE 9]>
<script src={% static 'js/respond.min.js' %}></script>
<![endif]-->
</head>
<body class="style-2">
<div class="container">
<div class="row">
<div class="col-md-4">
<!-- Start Sign In Form -->
<form action="#" class="fh5co-form animate-box" data-animate-effect="fadeInLeft">
<h2>Forgot Password</h2>
<div class="form-group">
<div class="alert alert-success" role="alert">Your email has been sent.</div>
</div>
<div class="form-group">
<label for="email" class="sr-only">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" autocomplete="off">
</div>
<div class="form-group">
<p><a href="sign-in.html">Sign In</a> or <a href="sign-up.html">Sign Up</a></p>
</div>
<div class="form-group">
<input type="submit" value="Send Email" class="btn btn-primary">
</div>
</form>
<!-- END Sign In Form -->
</div>
</div>
<div class="row" style="padding-top: 60px; clear: both;">
<div class="col-md-12 text-center">
<p><small>© All Rights Reserved <a href="http://47.107.56.104:8080" target="_blank" title="周定坤">周定坤</a></small></p></div>
</div>
</div>
<!-- jQuery -->
<script src={% static 'js/jquery.min.js' %}></script>
<!-- Bootstrap -->
<script src={% static 'js/bootstrap.min.js' %}></script>
<!-- Placeholder -->
<script src={% static 'js/jquery.placeholder.min.js' %}></script>
<!-- Waypoints -->
<script src={% static 'js/jquery.waypoints.min.js' %}></script>
<!-- Main JS -->
<script src={% static 'js/main.js' %}></script>
</body>
</html>