10使用CSS美化页面

技术交流QQ群:1027579432，欢迎你的加入！

本教程来源于B站杨仕航Django2.0开发视频教程，如需转载，必须注明来源！

1.页面设计

2.导航栏设计

打开blog文件夹的urls.py文件，在文件中添加博客列表blog_list页面的路由，如下所示：

from django.urls import path
from . import viewsurlpatterns = [# http:localhost:8000/blog/1path('', views.blog_list, name="blog_list"),path('<int:blog_pk>', views.blog_detail, name="blog_detail"),path('type/<int:blog_type_pk>', views.blogs_with_type, name="blogs_with_type"),
]

打开mysite文件夹目录下的templates文件夹下的base.html文件，在首页中增加首页和博客两个显示的标题，如下所示：

<!DOCTYPE html>
<html lang="en">
<head><title>{% block title %}{% endblock %}</title><meta charset="UTF-8">
</head>
<body><div><a href="{% url 'home' %}"><h3>个人博客网站</h3></a><a href="/">首页</a><a href="{% url 'blog_list' %}">博客</a></div><hr>{% block content %} {% endblock %}
</body>
</html>

接着在mysite文件目录下，创建首页的请求处理的方法views.py文件，文件的内容如下:

from django.shortcuts import render_to_responsedef home(request):context = {}return render_to_response("home.html", context)

然后，打开mysite文件目录下的templates文件夹，然后创建网站首页的模板页面home.html，内容如下所示：

{% extends 'base.html' %}{% block title %}我的网站|首页
{% endblock %}{% block content %}<h3>欢迎访问我的网站，随便看</h3>
{% endblock %}

最后，需要对博客首页的路由进行修改，打开mysite文件目录下的urls.py文件，修改原始文件中打开首页的路由：

from django.contrib import admin
from django.urls import include, path
from . import viewsurlpatterns = [# 博客首页path('', views.home, name="home"),   # 博客首页的路由已经修改！path('admin/', admin.site.urls),path('blog/', include('blog.urls')),]

3.使用CSS

使用CSS对HTML进行修饰，CSS即层叠样式表。对首页的前端页面进行CSS美化，打开base.html文件，添加如下内容：

<!DOCTYPE html>
<html lang="en">
<head><title>{% block title %}{% endblock %}</title><meta charset="UTF-8">
</head>
<body><div class="nav"><a  class="logo" href="{% url 'home' %}"><h3>个人博客网站</h3></a><a href="/">首页</a><a href="{% url 'blog_list' %}">博客</a></div>{% block content %} {% endblock %}<style>* {margin: 0;padding: 0;}div.nav {background-color: #eee;border-bottom: 1px solid #ccc;}div.nav a {text-decoration: none;color: #000;padding: 10px 5px;}div.nav a.logo {display: inline-block;font-size: 120%;}</style>
</body>
</html>

同时，对网站首页的前端页面home.html进行CSS美化，添加如下内容：

{% extends 'base.html' %}{% block title %}我的网站|首页
{% endblock %}{% block content %}<h3 class="home-content">欢迎访问我的网站，随便看</h3><style>h3.home-content {font-size: 222%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style>
{% endblock %}

4.使用静态文件

在项目根目录下创建静态文件夹static，如下图所示。在static文件夹下创建base.css文件，内容如下所示。这样就可以解决上一小节中在HTML中嵌入CSS代码的混乱感。

* {margin: 0;padding: 0;
}div.nav {background-color: #eee;border-bottom: 1px solid #ccc;
}div.nav a {text-decoration: none;color: #000;padding: 10px 5px;
}div.nav a.logo {display: inline-block;font-size: 120%;
}

打开mysite文件夹下的全局设置文件settings.py，在该文件的最后添加静态文件夹static所存放的位置，添加如下内容所示：
```
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),
]
```

在base.html文件中引入static文件夹下的base.css文件，有两种方法：下面采用方法1。此时，base.html文件如下所示：

<!-- 方法2：引入static文件夹下的base.css文件 -->
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head><title>{% block title %}{% endblock %}</title><meta charset="UTF-8"><!-- 方法1：引入static文件夹下的base.css文件  --><link rel="stylesheet" href="/static/base.css"><!-- 方法2：引入static文件夹下的base.css文件 --><!-- <link rel="stylesheet" href="{% static 'base.css' %}"> -->
</head>
<body><div class="nav"><a  class="logo" href="{% url 'home' %}"><h3>个人博客网站</h3></a><a href="/">首页</a><a href="{% url 'blog_list' %}">博客</a></div>{% block content %} {% endblock %}
</body>
</html>

同理，在static文件夹下创建home.css，然后将home.html中的CSS代码剪切至home.css中。如下所示：
```
h3.home-content {font-size: 222%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}
```

由于home.html文件是对base.html文件的拓展，于是，对base.html文件进行修改增加模板标签**{% block header_extends %}{% endblock %}**，修改后的文件内容如下所示：

<!DOCTYPE html>
<html lang="en">
<head><title>{% block title %}{% endblock %}</title><meta charset="UTF-8"><link rel="stylesheet" href="/static/base.css">{% block header_extends %}{% endblock %}
</head>
<body><div class="nav"><a  class="logo" href="{% url 'home' %}"><h3>个人博客网站</h3></a><a href="/">首页</a><a href="{% url 'blog_list' %}">博客</a></div>{% block content %} {% endblock %}
</body>
</html>

最后，在home.html中对模板标签**{% block header_extends %}{% endblock %}**进行详细说明。因此需要在home.html中引入home.css才能对博客首页的前端页面进行CSS美化，此处使用方法2进行引入CSS文件。home.html文件中的内容如下：

{% extends 'base.html' %}{% load staticfiles %}{% block title %}我的网站|首页
{% endblock %}{% block header_extends %}<link rel="stylesheet" href="{% static 'home.css' %}">
{% endblock %}{% block content %}<h3 class="home-content">欢迎访问我的网站，随便看</h3>
{% endblock %}