从零开始的django开发生活之使用CSS美化页面（4）

最新推荐文章于 2024-02-15 22:10:54 发布

代码渣渣辉

最新推荐文章于 2024-02-15 22:10:54 发布

阅读量481

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/qq_41323150/article/details/103300890

版权

WEB 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

四、使用CSS美化页面

1、页面设计

首部：导航栏

中部：主题内容

尾部：尾注

1）导航栏设计

Logo网站名称+首页+博客

-------首页设计流程-------

首先，在base.html添加这两个链接

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

'/'表示根目录，在这里就是localhost:8000

其次，首页添加之后意味着我们之前在总路由文件中添加的 path('', views.blog_list, name='home'),已经失效，应再写另一种方法用于展示首页内容，由于这个方法不属于app blog，所以我在项目文件夹添加了views.py，加入以下代码

from django.shortcuts import render_to_response

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

接下来，我在templates文件夹下（非blog内部）创建了首页模板文件home.html，并使用了模板继承方法：

{% extends 'base.html' %}

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

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

最后，在总路由文件中，需要作出以下改动：

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

from . import views 从当前目录下引入views

将path('', views.blog_list, name='home')改为path(’’, views.home, name=‘home’),`

这样，我就完成了首页的设计

-------博客页面------

博客页面比较简单，由于之前我将总路由中的用于展示博客列表的path改动，所以只需要在blog中的路由文件添加相应路由

path('', views.blog_list, name='blog_list'),

最终结果就是这样啦，很丑，所以接下来继续美化

在这里插入图片描述

2、使用CSS

CSS（层叠样式表）：用于修饰html的语言

进入我们开发的网站页面，F12进入开发者模式，选中需要修改的元素，在element.style中改动样式就可以实时看到效果了，当然改动之后要加入模板代码中

在这里插入图片描述

我在title标签下添加如下样式

<style type="text/css">
      a.logo{
        display: inline-block;
        text-decoration: none;
      }
    </style>

然后在“个人博客网站”的a标签引入样式 `

        <h3>个人博客网站</h3>

就出现如下效果：

在这里插入图片描述
最终多次调试结果如下：

在这里插入图片描述

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      div.nav{
        background-color: #eee;
        padding: 10px 5px;
        border-bottom: 1px solid #ccc;
      }
      div.nav a{
        text-decoration: none;
        color: #000;
        padding: 5px 10px;
      }
      div.nav a.logo{
        display: inline-block;
        font-size: 120%;
      }
    </style>
</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

{% extends 'base.html' %}

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

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

    <style type="text/css">
        h3.home-content{
            font-size: 200%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
{% endblock %}

3、使用静态文件

实际上，以上每个页面都要写一份CSS的话，显得模板会很繁杂，不如把CSS代码抽象封装成CSS文件，使用时直接在模板文件引用，修改时也很方便

CSS代码–>CSS文件

CSS文件、js文件、图片统称为静态文件，顾名思义，静态文件是一经生成，不轻易修改的文件，除非修改文件源代码

首先，我们在总目录下新建static文件夹用于存储刚写好的css文件

将base.html style中的内容提取出来，放在static中，并为其命名base.css,其中代码如下：

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

其次，我们要想在base.html中引用此CSS静态文件，需要在settings中尾行加入：STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]意思同之前所讲templates相同，url路由也是通过此路径找到静态文件，所以必须设置

接下来，有两种方法引用这个静态文件

第一种，在base.html中head标签内加入 <link rel="stylesheet" href="/static/base.css">

第二种，使用django为我们提供的库，

在base.html中第一行加入 {% load staticfiles %}，然后再head标签内加入 <link rel="stylesheet" href="{% static 'base.css' %}">，个人倾向第二种

下面home.html处理方法与base.html相同，只不过在最后引用时，因为home.html继承base.html，所以加入链接时，需要先在base.html中加入 {% block header_extends %}{% endblock %}

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

同时在 {% extends 'base.html' %}下面加上 {% load staticfiles %}因为模板继承的时候，{}内的内容是不被识别的。

base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <!-- <link rel="stylesheet" href="/static/base.css"> -->
    <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

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

当然，上面的页面仍然很丑，所以下面我会继续学习CSS的框架Bootstrap