10、使用CSS美化页面
1、页面设计
- 导航栏
- Logo网站名称 + 导航
- xxx的网站 首页 博客
- 主体内容
- 尾注
1、打开 base.html，修改如下：
<!-- C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\blog\templates\base.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title> <!--block标签，参数为：block的名称为title。【注意】这个标签没有endblock-->
</head>
<body>
<div>
<a href="{% url 'home' %}">
<h3>个人博客网站</h3>
</a>
<a href="/">首页</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
<hr>
{% block content %}{% endblock %}<!--block标签，参数为：block的名称为contente-->
</body>
</html>
2、在 blog\urls.py 中添加如下代码：
# # C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\blog\urls.py
from django.urls import path
from . import views
'''
http://localhost:8000/blog/1 # 访问具体某篇文章 # http://localhost:8000/blog/ # 博客列表
http://localhost:8000 # 打开首页。总路由
'''
# start with blog
urlpatterns = [
# http://localhost:8000/blog/
path('', views.blog_list, name='blog_list'),
# http://localhost:8000/blog/1
path('<int:blog_pk>', views.blog_detail, name='blog_detail'),
# http://localhost:8000/blog/type/1
path('type/<int:blog_type_pk>', views.blogs_with_type, name='blogs_with_type'), # 这里前面需要加上type/，不然就会和上一条url重复了
]
3、首页的处理方法：在 mysite/mysite 目录下新建 views.py ，作为打开首页的处理方法，写入如下代码：
# # C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\mysite\views.py
# 首页的处理方法
from django.shortcuts import render_to_response
def home(request):
context = {}
return render_to_response('home.html', context)
4、首页的模板页面：在 mysite/templates 目录下新建 home.html ，写入如下代码：
<!-- C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\templates\home.html -->
<!-- 首页的模板页面 -->
{% extends 'base.html' %}
{% block title %}
我的网站 | 首页
{% endblock %}
{% block content %}
<h3>欢迎访问我的网站，随便看</h3>
{% endblock %}
5、首页处理方法对应的url路由设置：修改 mysite/mysite/urls.py 如下：
# # C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\mysite\urls.py
from django.contrib import admin
from django.urls import path, include
# from blog.views import blog_list
from . import views
urlpatterns = [
# path('', blog_list, name='home'), # 首页处理方法对应的路由设置
path('', views.home, name='home'), # 首页处理方法对应的url路由设置
path('admin/', admin.site.urls),
path('blog/', include('blog.urls')), # 应用分支路由设置
]
这样，网页结构就调整成我们想要的结构了，下一步我们就要将这个页面进行美化，我们可以通过一些排版进行美化，CSS就是一种用于修饰html的语言
2、使用CSS
- CSS（层叠样式表）——用于修饰html的语言
回到“首页”，我们想要对首页进行修饰，CSS需要写到一个标签（style）里面，style标签我们一般放到body末尾的地方或者head末尾地方，
修改base.html如下：
<!-- C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\blog\templates\base.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title> <!--block标签，参数为：block的名称为title。【注意】这个标签没有endblock-->
</head>
<body>
<div class="nav"> <!--导航栏，缩写是nav-->
<a class="logo" href="{% url 'home' %}"> <!--logo栏，取名称为logo-->
<h3>个人博客网站</h3>
</a>
<a href="/">首页</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{% block content %}{% endblock %}<!--block标签，参数为：block的名称为contente-->
<!--css-->
<style type="text/css">
* { /*对body全局进行设置*/ /*全局设置，外边距、内边距*/
margin: 0;
padding: 0;
}
div.nav { /*对导航栏进行设置*/
background-color: #eee; /*设置背景颜色,#eee灰色*/
border-bottom: 1px solid #ccc;/*设置底部边框线。粗细1px，形状solid，颜色#ccc*/
padding: 10px 5px;/*内边距。上下边距、左右边距*/
}
div.nav a { /*对所有的a标签进行设置*/
text-decoration: none; /*去掉导航栏里所有a标签的下划线*/
color: #000; /*设置字体颜色，#000黑色*/
padding: 5px 10px;/*设置内边距。上下边距、左右边距*/
}
div.nav a.logo { /*对class属性为logo的a标签进行设置*/
display: inline-block; /*设置成一个块*/
font-size: 120%;/*设置字体大小*/
}
</style>
</body>
</html>
修改home.html如下：
<!-- C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\templates\home.html -->
<!-- 首页的模板页面 -->
{% extends 'base.html' %}
{% block title %}
我的网站 | 首页
{% endblock %}
{% block content %}
<h3 class="home-content">欢迎访问我的网站，随便看</h3>
<style type="text/css">
h3.home-content {
font-size: 222%; /*字体*/
/*text-align: center; 左右居中*/
position: absolute; /*相对位置设置为：绝对*/
left: 50%; /*相对左边位置*/
top: 50%; /*相对上边位置*/
transform: translate(-50%, -50%); /*相对位置进行的偏移，左偏移一半，上偏移一半*/
}
</style>
{% endblock %}
当然，CSS也可以 在网页上按F12，进行设置：
这样的话，我们网站的首页页面就简单地做成这个样子。
我们发现一个问题，html内容和修饰HTML排配的css内容都在一个html文件中，这样会很影响我们看整个页面的结构。有另外一种方法，我们可以将css代码放到另外一个文件，这个文件就是css文件，然后html再去引用这个css文件就可以了。
3、使用静态文件
- CSS代码——>CSS文件、js文件、图片——静态文件
在项目根目录下新建一个文件夹static，在static下新建base.css，然后把base.html里面的css代码复制过来
static\base.css：
/* C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\static\base.css */
* { /*对body全局进行设置*/ /*全局设置，外边距、内边距*/
margin: 0;
padding: 0;
}
div.nav { /*对导航栏进行设置*/
background-color: #eee; /*设置背景颜色,#eee灰色*/
border-bottom: 1px solid #ccc;/*设置底部边框线。粗细1px，形状solid，颜色#ccc*/
padding: 10px 5px;/*内边距。上下边距、左右边距*/
}
div.nav a { /*对所有的a标签进行设置*/
text-decoration: none; /*去掉导航栏里所有a标签的下划线*/
color: #000; /*设置字体颜色，#000黑色*/
padding: 5px 10px;/*设置内边距。上下边距、左右边距*/
}
div.nav a.logo { /*对class属性为logo的a标签进行设置*/
display: inline-block; /*设置成一个块*/
font-size: 120%;/*设置字体大小*/
}
然后在base.html中引用该文件
用link（Tab键自动补全）标签引用，里面需要写一个指向静态的地址，这是个写死的地址，但这个地址是需要通过url路由去管理控制，我们打开settings.py，进行静态文件目录设置，添加如下代码：
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
保存之后，我们可以访问一下localhost:8000/static/base.css，看能不能访问到这个css文件的内容。
可以看到是能访问到的。那么我们就可以在base.html里面引用该css文件的地方，手动输入这个url地址
blog\templates\base.html：
<!-- C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\blog\templates\base.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title> <!--block标签，参数为：block的名称为title。【注意】这个标签没有endblock-->
<link rel="stylesheet" type="text/css" href="/static/base.css">
</head>
<body>
<div class="nav"> <!--导航栏，缩写是nav-->
<a class="logo" href="{% url 'home' %}"> <!--logo栏，取名称为logo-->
<h3>个人博客网站</h3>
</a>
<a href="/">首页</a>
<a href="{% url 'blog_list' %}">博客</a>
</div>
{% block content %}{% endblock %}<!--block标签，参数为：block的名称为contente-->
</body>
</html>
保存后刷新页面，成功。
除了这种方法以外，还有另外一种方法（建议使用这种，Django自动的给我们引用了一个库，在settings.py中的INSTALLED_APPS里面的'django.contrib.staticfiles'静态文件），在html中加载这个静态文件相关的标签之后，我们就可以用静态文件相关的标签了，路径就可以通过{% static 'base.css' %}访问静态文件的目录了：
同样的，我们将home.html按照类似的做法进行修改
在static目录下新建home.css，写入如下代码：
/*C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\static\home.css*/
h3.home-content {
font-size: 222%; /*字体*/
/*text-align: center; 左右居中*/
position: absolute; /*相对位置设置为：绝对*/
left: 50%; /*相对左边位置*/
top: 50%; /*相对上边位置*/
transform: translate(-50%, -50%); /*相对位置进行的偏移，左偏移一半，上偏移一半*/
}
因为home.html是拓展了base.html里面的模块的，所以在base.html中加入块，修改如下：
然后在home.html中引用这个块：【注意：{% load staticfiles %}这行代码不仅在base.html要加上，在base.html的拓展文件home.html中也要加上】
<!-- C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\templates\home.html -->
<!-- 首页的模板页面 -->
{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}
我的网站 | 首页
{% endblock %}
{% block header_extends %}
<link rel="stylesheet" type="text/css" href="{% static 'home.css' %}">
{% endblock %}
{% block content %}
<h3 class="home-content">欢迎访问我的网站，随便看</h3>
<!--
<style type="text/css">
h3.home-content {
font-size: 222%; /*字体*/
/*text-align: center; 左右居中*/
position: absolute; /*相对位置设置为：绝对*/
left: 50%; /*相对左边位置*/
top: 50%; /*相对上边位置*/
transform: translate(-50%, -50%); /*相对位置进行的偏移，左偏移一半，上偏移一半*/
}
</style> -->
{% endblock %}
Bootstrap：是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
