10 使用CSS美化页面

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

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

1.页面设计

页面设计.png

2.导航栏设计

导航栏设计.png

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

from django.urls import path
from . import views


urlpatterns = [
    # http:localhost:8000/blog/1
    path('', 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_response


def 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 views

urlpatterns = [
    # 博客首页
    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.使用静态文件

静态文件.png

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

static文件夹.png

* {
    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 %}