Django2.0：【Django2.0教程】10.使用CSS美化页面视频学习笔记

一般页面包括三部分：导航栏、主体内容和尾注。

导航栏设计

新建templates/home.html：

{% extends 'base.html' %}

{% block title %}
    我的网站|首页
{% endblock %}

{% block content %}
    <h3>欢迎访问我的网站，随便看</h3>
{% endblock %}

新建mysite/views.py：

from django.shortcuts import render_to_response

def home(request):
    context = {}
    return render_to_response('home.html', context)

修改mysite/urls.py：

from django.contrib import admin
from django.urls import path, include
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),
]

修改blog/urls.py：

from django.urls import path
from . import views

urlpatterns = [
    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',)
]

使用CSS

修改templates/base.heml：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</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 type="text/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%;
        }
    </style>
</body>
</html>

修改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%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
{% endblock %}

使用静态文件

静态文件包括CSS文件、JS文件和图片。

新建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%;
}

修改templates/base.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <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>

修改mysite/settings.py：

...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.0/howto/static-files/

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

另外一种方法，Django自动地引入了一个库，可以在mysite/settings.py中看到：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles', # 这句
    'blog',
]

修改templates/base.html：

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'base.css' %}">
</head>
...

新建static/home.css

h3.home_content {
    font-size: 222%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

修改home.html：

{% extends 'base.html' %}
{# 模板页面中也需要load #}
{% load staticfiles %}

{% block title %}
    我的网站|首页
{% endblock %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'home.css' %}">
{% endblock %}

{% block content %}
    <h3 class="home_content">欢迎访问我的网站，随便看</h3>
{% endblock %}

Django2.0：【Django2.0教程】10.使用CSS美化页面 视频学习笔记

导航栏设计

使用CSS

使用静态文件

猜你喜欢

Django2.0：【Django2.0教程】10.使用CSS美化页面视频学习笔记