【Django2.0教程】10.使用CSS美化页面

最新推荐文章于 2021-01-30 20:42:05 发布

原创最新推荐文章于 2021-01-30 20:42:05 发布 · 899 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Django框架下创建并美化网站首页，包括定制视图、模板和URL配置，使用内联CSS进行初步布局，以及引入静态文件进一步优化页面样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网站的样式

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  %}
    <h3>欢迎光临你我的网站，随便来看！</h3>

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div class="nav">
       <a class="logo" href="{% url 'home' %}">
         <h2>个人博客网站</h2>
       </a>
        <a href="/">首页</a>
        <a href="{% url 'blog_list' %}">博客列表</a>
    </div>
    <hr>
    {% 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>

在home.html中增加内容居中的style代码

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

    </style>

{% 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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% staticbase css %}">####引用css文件
</head>
<body>
    <div class="nav">
       <a class="logo" href="{% url 'home' %}">
         <h2>个人博客网站</h2>
       </a>
        <a href="/">首页</a>
        <a href="{% url 'blog_list' %}">博客列表</a>
    </div>
    <hr>
    {% block content %}{% endblock %}


</body>
</html>

再对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 %}
    <link rel="stylesheet" href="{% static 'home.css' %}">#加载home.css
{% endblock %}
{% block content  %}
    <h3 class="home-content">欢迎光临我的网站，随便来看！</h3>


{% endblock %}