【Django2.0教程】10.使用CSS美化页面
网站的样式
1、加首页(非博客列表)：
a 在mysite/mysite文件夹里新建views.py
from django.shortcuts import render_to_response
def home(request):
context ={}
return render_to_response('home.html',context )b 在templates文件夹里新建home.html
{% extends 'base.html' %}
{% block title %}
我的网站|首页
{% endblock %}
{% block content %}
欢迎光临你我的网站，随便来看！
{% endblock %}c 在mysite/mysite的urls.py 中，修改后如下：
from django.contrib import admin
from django.urls import include,path
from . import views
urlpatterns = [
path('',views.home,name = 'home'),#首页home不再对应博客列表了
path('admin/', admin.site.urls),
path('blog/',include('blog.urls')),##引用blog里面的urls
]2、使用CSS美化网页
在base.html中增加style
{% block title %}{% endblock %}
{% block content %}{% endblock %}
在home.html中增加内容居中的style代码
{% extends 'base.html' %}
{% block title %}
我的网站|首页
{% endblock %}
{% block content %}
欢迎光临我的网站，随便来看！
{% endblock %}
3、使用静态文件
首先目录设置，在settings.py 中设置：
新增加：STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
在mysite中创建static文件夹，新建base.css
*{
margin: 0;
padding: 0;
}
div.nav{
background-color: #eee;
border-bottom:1px solid #ccc;
padding: 10px 5px;
}
div.nav.a{
text-decoration: none;
color: #000;
padding: 5px 10px;
}
div.nav a.logo{
display:inline-block;
font-size: 120%;
}更改base.html文件如下：
{% load staticfiles %}###加载staticfiles
{% block title %}{% endblock %}
####引用css文件
{% block content %}{% endblock %}
再对home.html做如上相类似的操作：
在mysite中创建static文件夹，新建home.css
h3.home-content{
font-size: 222%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
在base.html中的head中增加如下语句
{% block header_extends %}{% endblock %} ###为home.html新增块
在home.html文件中增加如下：
{% extends 'base.html' %}
{% load staticfiles %}#仍然要加载静态文件
{% block title %}
我的网站|首页
{% endblock %}
{% block header_extends %}
#加载home.css
{% endblock %}
{% block content %}
欢迎光临我的网站，随便来看！
{% endblock %}