【django】五、使用CSS美化页面_django网页精美界面-CSDN博客

本文档详细介绍了如何使用Django框架设计和修改博客网站的导航栏，包括添加首页和博客链接，设置样式如背景颜色、字体颜色、边框等，并通过CSS实现元素布局和间距调整。同时，展示了如何创建静态文件夹，引入CSS文件以实现页面样式的统一管理，以及如何迁移和应用这些CSS到首页页面。

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

文章目录

页面设计
导航栏设计
修改首页和博客的前端显示
添加首页页面
使用css
将个人博客网站设置成一个块
设置导航栏里面的样式, 下划线全都不要
设置背景颜色 , 内边距外边距, 和字体颜色
设置边框线
设置标签和标签的间距
调整内容部分的显示
使用静态文件
创建base页面对应的css文件
引入静态文件
迁移home页面的CSS

页面设计

在这里插入图片描述

导航栏设计

在这里插入图片描述
在导航栏添加首页和博客
blog/urls.py

from django.urls import path
from . import views

urlpatterns = [
    # http://localhost:8000/blog
    # 博客列表, 目录什么也不写, 代表访问博客列表目录
    path('', views.blog_list, name='blog_list'),
    path('<int:blog_pk>', views.blog_detail, name='blog_detail'),
    path('type/<int:blog_type_pk>', views.blog_with_type, name='blog_with_type'),
]

修改首页和博客的前端显示

base.html

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