目录
day02分部式路由系统 练习
day03 静态文件访问1
分部式路由系统 练习
netease文件夹
# settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'index',
'music',
'sport',
'news',
]#urls.py
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
# 访问路径 /music/******,转交给music的urls去处理
url(r'^music/', include('music.urls')),
# 访问路径 /news/*****,转交给news的urls去处理
url(r'^news/', include('news.urls')),
# 访问路径只要不是 admin , music , news , 的话，一律交给 index 应用去处理
url(r'^', include('index.urls')),
]
index文件夹
#urls.py
from django.conf.urls import url
from .views import *
# http://localhost:8000/*****
urlpatterns = [
# 访问路径为空的时候，交给index_views去处理
url(r'^$', index_views),
# 访问路径是 /login 的时候，交给 login_views 去处理
url(r'^login/$', login_views),
]
urlpatterns += [
# 访问路径 /01_getTemp/
url(r'^01_getTemp/$', getTemp_views),
# 访问路径 /02_getTemp/
url(r'^02_getTemp/$', getTemp1_views),
# 访问路径 /03_var/
url(r'^03_var/$', var_views),
]# views.py
# -*- coding: utf-8 -*-
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
# Create your views here.
def index_views(request):
return HttpResponse('这是网站的首页')
def login_views(request):
return HttpResponse('这是登录页面...')
# /01_getTemp/ 的视图处理函数
def getTemp_views(request):
# 1.通过 loader 加载模板
t = loader.get_template('01_template.html')
# 2.将模板转换为字符串
html = t.render()
# 3.将字符串响应给客户端
return HttpResponse(html)
def getTemp1_views(request):
return render(request, '01_template.html')
def var_views(request):
# 声明变量字典
l = ['金毛狮王', '白眉鹰王', '青翼斧王']
t = ('潘金莲', '西门庆', '武大郎')
dic = {
'SHZ': '水浒传',
'XYJ': '西游记',
'HLM': '红楼梦',
}
f = fun(35, 53)
dog = Dog()
print(locals())
return render(request, '02_var.html', locals())
# vars = {
# 'num':15,
# 'str':'模板中的字符串变量',
# 'tup':t,
# 'list':l,
# 'dic':dic,
# 'fun':fun(35,53),
# 'dog':Dog()
# }
# return render(request,'02_var.html',vars)
def fun(num1, num2):
return num1 + num2
class Dog(object):
name = '阿拉斯加'
def eat(self):
return '吃狗粮'
03--------------------------------------------------------------------------------------------------------------
静态文件访问1
netease
#setting.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'index',
'music',
'sport',
'news',
]
# 设置静态文件的访问路径
STATIC_URL = '/static/'
# 设置静态文件的存储路径
STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),)
#urls.py
from django.conf.urls import url,include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
# 访问路径 /music/******,转交给music的urls去处理
url(r'^music/', include('music.urls')),
# 访问路径 /news/*****,转交给news的urls去处理
url(r'^news/',include('news.urls')),
# 访问路径只要不是 admin , music , news , 的话，一律交给 index 应用去处理
url(r'^',include('index.urls')),
]index
#urls.py
from django.conf.urls import url
from .views import *
# http://localhost:8000/*****
urlpatterns = [
# 访问路径为空的时候，交给index_views去处理
url(r'^$',index_views),
# 访问路径是 /login 的时候，交给 login_views 去处理
url(r'^login/$',login_views),
]
urlpatterns += [
# 访问路径 /01_getTemp/
url(r'^01_getTemp/$',getTemp_views),
# 访问路径 /02_getTemp/
url(r'^02_getTemp/$',getTemp1_views),
# 访问路径 /03_var/
url(r'^03_var/$',var_views),
# 访问路径 /04_static/
url(r'^04_static/$',static_views),
# 访问路径 /05_temp/
url(r'^05_temp/$',temp_views),
]
#views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader
# Create your views here.
def index_views(request):
return HttpResponse('这是网站的首页')
def login_views(request):
return HttpResponse('这是登录页面...')
# /01_getTemp/ 的视图处理函数
def getTemp_views(request):
#1.通过 loader 加载模板
t = loader.get_template('01_template.html')
#2.将模板转换为字符串
html = t.render()
#3.将字符串响应给客户端
return HttpResponse(html)
def getTemp1_views(request):
return render(request,'01_template.html')
def var_views(request):
# 声明变量字典
l = ['金毛狮王','白眉鹰王','青翼斧王','紫衫龙王','殷素素']
t = ('潘金莲','西门庆','武大郎')
dic = {
'SHZ':'水浒传',
'XYJ':'西游记',
'HLM':'红楼梦',
}
f = fun(35,53)
dog = Dog()
print(locals())
return render(request, '02_var.html', locals())
# vars = {
# 'num':15,
# 'str':'模板中的字符串变量',
# 'tup':t,
# 'list':l,
# 'dic':dic,
# 'fun':fun(35,53),
# 'dog':Dog()
# }
# /04_static/
def static_views(request):
return render(request,'03_static.html')
# /05_temp/
def temp_views(request):
return render(request,'04_temp.html')01_template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是我的第一个模板</h1>
</body>
</html>
02_var.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 模板中的 for 标签 : 循环遍历 l 变量 -->
{% for str in l %}
<p
{% if forloop.first %}
style="background-color:red;"
{% elif forloop.last %}
style="background-color:orange;"
{% else %}
style="background-color:blue;"
{% endif %}
>数据{{ forloop.counter0 }}：{{ str }}</p>
{% endfor %}
{% for str in l %}
<p
style="background-color:
{% if forloop.first %}
red
{% elif forloop.last%}
orange
{% else %}
blue
{% endif %}
;"
>{{ str }}</p>
{% endfor %}
<!-- 基本变量输出 -->
<h3>姓名：{{ uname }}</h3>
<h3>年龄：{{ uage }}</h3>
<h3>爱好：{{ uhobby }}</h3>
<!-- 显示各类型的变量 : {{ dog.name }} -->
{% comment %}
这是服务器端的注释
{% endcomment %}
<h3>num:{{ num }}</h3>
<h3>str:{{ str }}</h3>
<h3>tup:{{ t }}</h3>
<h3>tup[0]:{{ t.0 }}</h3>
<h3>list:{{ l }}</h3>
<h3>list[1]:{{ l.1 }}</h3>
<h3>dic:{{ dic }}</h3>
<h3>dic['XYJ']:{{ dic.XYJ }}</h3>
<h3>fun:{{ f }}</h3>
<h3>dog.name:{{ dog.name }}</h3>
<h3>dog.eat:{{ dog.eat }}</h3>
</body>
</html> 03_static.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是我的模板</h1>
<p>
<img src="/static/images/admin.png">
</p>
<p>
<img src="{% static 'images/list_filter.png' %}">
</p>
</body>
</html>04_temp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="/music/show">去往music中的show</a>
<br>
<a href="{% url 'show' %}">使用别名去往music中的show</a>
<br>
<a href="/music/show/2017/12">跳转到show/xxxx/xx</a>
<br>
<a href="{% url 'show_arg' 1234 56 %}">使用别名跳转到show/xxxx/xx</a>
</body>
</html>
静态文件练习fruitday项目
fruitDay
#urls.py
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^',include('index.urls')),
]#setting.py
# 静态文件访问路径
STATIC_URL = '/static/'
# 指定静态文件的存储路径
STATICFILES_DIRS = (os.path.join(BASE_DIR,'static'),)
index
#urls
from django.conf.urls import url
from .views import *
urlpatterns = [
#访问路径是 /
url(r'^$',index_views),
#访问路径是 /login
url(r'^login/$',login_views),
#访问路径是 /register
url(r'^register/$',register_views),
]
#views.py
from django.shortcuts import render
# Create your views here.
def index_views(request):
return render(request,'index.html')
# /login 对应的视图
def login_views(request):
return render(request,'login.html')
# /register 对应的视图
def register_views(request):
return render(request,'register.html')
static/css
index.css
body{
font:12px "Hiragino Sans GB","Microsoft YaHei",sans-serif;
color:#999;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
list-style:none;
}
a{
color:#999;
text-decoration:none;
}
a:hover{
color:#64a131;
text-decoration:underline;
}
img{
vertical-align:bottom;
}
.container{
width:990px;
margin:0 auto;
}
/*1、页面头部*/
#top{
/*高度，行高，背景颜色*/
height:30px;
line-height:30px;
background-color:#eee;
}
#list{
float:right;
}
#list>li{
float:left;
padding:0 5px;
/*box-sizing:border-box;
height:30px;*/
}
#list>li>b{
border-left:1px solid #999;
margin-right:10px;
}
#list>li>a:hover{
color:#F6AB00;
}
#top>a.address>u{
display:inline-block;
width:0px;
height:0px;
border:6px solid transparent;
border-top-color:#999;
/*相对定位：调整位置*/
position:relative;
top:4px;
/*border:5px solid #000;
border-left-color:#f00;
border-right-color:#ff0;
border-bottom-color:#0ff;*/
}
#top>a{
margin-left:10px;
}
/*3.banner广告*/
#banner{
margin:15px 0;
}
#banner img{
width:100%;
}
/*4.4幅小广告*/
#adv-img{
overflow:hidden;
}
#adv-img li{
float:left;
margin-right:10px;
}
#adv-img li.no-margin{
margin-right:0px;
}
#adv-img img{
width:240px;
}
/*5、主体内容*/
#main p.title>a{
color:#333;
float:right;
}
#main p.title>img{
width:356px;
}
#main p.title{
/*上边框，上内边距，上外边距，下外边距*/
border-top:1px solid #ccc;
padding-top:15px;
margin-top:25px;
margin-bottom:10px;
}
#main div.item>ul{
overflow:hidden;
}
#main div.item>ul>li{
/*宽度，左浮动，右外边距*/
width:190px;
float:left;
margin-right:10px;
/*下外边距*/
margin-bottom:10px;
}
#main div.item>ul>li.no-margin{
margin-right:0px;
}
#main div.item>ul>li>p>img{
width:190px;
/*过渡效果*/
transition:all .3s;
}
#main div.item>ul>li>p>img:hover{
transform:scale(1.1);
}
#main div.item>ul>li>p{
width:190px;
height:190px;
overflow:hidden;
}
#main div.content a.cart{
float:right;
}
#main div.content p{
color:#555;
margin-bottom:3px;
}
#main div.content{
margin-top:5px;
}
static/css
#login.css
/*1. 清除页面默认样式*/
body,h2,p{
margin: 0;
}
/*2. 外部容器样式*/
#container{
width: 990px;
margin: 0 auto;
}
/*3. 标题样式*/
#container h2{
font-weight: normal;
color: #999;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
/*4. 左列模块*/
.left{
float: left;
}
/*5. 右列*/
.right{
float: right;
margin-top: 70px;
margin-right: 40px;
}
/*6. 表单样式*/
.right p{
margin-top: 20px;
height: 40px;
}
.right .spanText{
float: left;
width: 64px;
height: 40px;
text-align: right;
line-height: 40px;
color: #999;
margin-right: 30px;
}
.right .uText{
box-sizing: border-box;
width: 300px;
height: 40px;
border: 1px solid #ccc;
outline: none;
font-size: 16px;
color: #555;
padding: 0 12px;
}
/*7.按钮样式*/
.right .isSaved input{
width: 18px;
height: 18px;
/*行内块元素与左右文本的对齐方式*/
vertical-align: middle;
}
.right .isSaved{
/*margin-left: 90px;*/
color: #999;
}
.right .forget{
float: right;
}
.forget a{
color: #999;
}
.login,.regist{
box-sizing: border-box;
width: 145px;
height: 39px;
border: 1px solid #64a131;
border-radius: 5px;
font-size: 18px;
color: #7bae55;
background: #f5ffed;
line-height: 39px;
}
.login{
color: white;
background: #64a131;
/*margin-left: 92px;*/
margin-right: 14px;
}
/*定位布局*/
.left{
position: relative;
}
.left a{
width: 153px;
height: 48px;
box-sizing: border-box;
border: 1px solid #64A131;
color: #64A131;
text-decoration: none;
text-align: center;
line-height: 48px;
border-radius: 5px;
/*绝对定位*/
position: absolute;
right: 173px;
bottom: 22px;
}
templates
# index.html
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="{% static 'css/index.css' %}">
</head>
<body>
<div class="container">
<!-- 1、网页头部 -->
<div id="top">
<!-- 1.1 右：列表 -->
<ul id="list">
<li>
<a href="#">[登录]</a>
,
<a href="#">[注册有惊喜]</a>
</li>
<li>
<b></b>
果园公告
</li>
<li>
<b></b>
<a href="#">券卡兑换</a>
</li>
<li>
<b></b>
手机果园
</li>
</ul>
<!-- 1.2 左：三个超链接 -->
<!-- 1.2.1 上海 -->
<a href="#" class="address">
上海
<u></u>
</a>
<!-- 1.2.2 满百包邮 -->
<a>满百包邮(环郊内)</a>
<!-- 1.2.3 星夜达 -->
<a href="#" class="xing">星夜达</a>
</div>
<!-- 2、LOGO 和 热门搜索 -->
<!-- 3、BANNER广告(横幅广告) -->
<div id="banner">
<img src="/static/images/banner1.jpg">
</div>
<!-- 4、四幅小广告 -->
<ul id="adv-img">
<li>
<a href="#">
<img src="/static/images/2ba20598135dbba5e97d241ebfa167d9.jpg">
</a>
</li>
<li>
<a href="#">
<img src="/static/images/25af37592bf484fbeaef1cc4ff1e09c7.jpg">
</a>
</li>
<li>
<a href="#">
<img src="/static/images/904419aa2e364412b3c07c3cbda24ef9.jpg">
</a>
</li>
<li class="no-margin">
<a href="#">
<img src="/static/images/d72b849b461c08d991c265df00a1bfde.jpg">
</a>
</li>
</ul>
<!-- 5、网页主体内容(各种产品) -->
<div id="main">
<!-- 5.1 礼品卡券 -->
<div class="item">
<!-- 5.1.1 上方 ：标题 + 更多 -->
<p class="title">
<a href="#">更多</a>
<img src="/static/images/t4.png">
</p>
<!-- 5.1.2 下方 ：内容 -->
<ul>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li class="no-margin">
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li class="no-margin">
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
</ul>
</div>
<!-- 5.2 家庭量贩 -->
<div class="item">
<!-- 5.1.1 上方 ：标题 + 更多 -->
<p class="title">
<a href="#">更多</a>
<img src="/static/images/t4.png">
</p>
<!-- 5.1.2 下方 ：内容 -->
<ul>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li class="no-margin">
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li>
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
<li class="no-margin">
<!-- 上 ：图像 -->
<p>
<img src="/static/images/1-270x270-3877-BXDY6KCU.jpg">
</p>
<!-- 下 ：文本 -->
<div class="content">
<!-- 右：购物车图标 -->
<a href="#" class="cart">
<img src="/static/images/cart.png">
</a>
<!-- 左上：商品名称 -->
<p>
欢乐时光水果礼篮
</p>
<!-- 左下：价格 + 规格 -->
<span>
¥188.00/1份
</span>
</div>
</li>
</ul>
</div>
<!-- 5.3 全球鲜果 -->
<!-- 5.4 生鲜美食 -->
</div>
<!-- 5、网页主体内容结束-->
<!-- 6、网页底部 -->
</div>
</body>
</html>
# login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="/static/css/login.css">
{% block style %}
{% endblock %}
</head>
<body>
<div id="container">
<h2>
<!-- 声明允许被子模板中修改的内容 -->
{% block title %}
会员登录
{% endblock %}
</h2>
<div class="left">
<img src="/static/images/huiyuan.jpg">
{% block link %}
<a href="/register">会员注册></a>
{% endblock %}
</div>
<div class="right">
{% block form %}
<form action="login" method="post">
<p>
<span class="spanText">手机号</span>
<input type="text" name="uphone" class="uText">
</p>
<p>
<span class="spanText">密码</span>
<input type="password" name="upwd" class="uText" placeholder="请输入6-20位号码字符">
</p>
<p>
<span class="spanText"></span>
<span class="isSaved">
<input type="checkbox" name="isSaved" checked>记住密码
</span>
<span class="forget">
<a href="#">忘记密码</a>
<a href="#">快捷登录</a>
</span>
</p>
<p>
<span class="spanText"></span>
<input type="submit" name="login" class="login">
<input type="button" name="regist" class="regist" value="注册会员">
</p>
</form>
{% endblock %}
</div>
</div>
</body>
</html># register.html
{% extends 'login.html' %}
{% block title %}
注册会员
{% endblock %}
{% block link %}
<a href="/login">会员登录</a>
{% endblock %}
{% block form %}
<form action="register" method="post">
<p>
<span class="spanText">手机号</span>
<input type="text" name="uphone" class="uText">
</p>
<p>
<span class="spanText">密码</span>
<input type="password" name="upwd" class="uText">
</p>
<p>
<span class="spanText">确认密码</span>
<input type="password" id="cpwd" class="uText">
</p>
<p>
<span class="spanText">用户名</span>
<input type="text" name="uname" class="uText">
</p>
<p>
<span class="spanText">邮箱</span>
<input type="email" name="uemail" class="uText">
</p>
<p>
<span class="spanText"></span>
<input type="submit" name="login" class="login" value="注册">
<input type="button" name="regist" class="regist" value="会员登录" onclick="location.href='/login'">
</p>
</form>
{% endblock %}
{% block style %}
<style>
.right{
margin-top:20px;
}
</style>
{% endblock %}
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
