【django】五、使用CSS美化页面

最新推荐文章于 2024-05-30 09:04:35 发布

范德彪陕西分彪

最新推荐文章于 2024-05-30 09:04:35 发布

阅读量1.3k

点赞数

分类专栏： django 文章标签： django css python

本文链接：https://blog.csdn.net/weixin_46815330/article/details/120907543

版权

django 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

页面设计
导航栏设计
修改首页和博客的前端显示
添加首页页面
使用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 %}
</body>
</html>

添加跳转到首页的方法, 因为首页不是一个单独的app应用, 所以在mysite文件夹里面创建一个views.py文件, 用来处理跳转到首页的方法
views.py

from django.shortcuts import render_to_response

def home(request):
    content = {}
    # 跳转到home.html首页, 因为只用来显示, 不需要数据, 所以传一个空的字典
    render_to_response('home.html', content)

添加首页页面

首页也是基于模板文件的, 引入base.html, 首页只显示一句话就可以
home.html

{% extends 'base.html' %}

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

{% block content %}
    <h3>欢迎访问我的博客</h3>
{% endblock %}

使用css

第一：用于修饰html语言
第二：使用style标签，一般加在body标签尾部

将个人博客网站设置成一个块

使用display: inline-block
对a标签进行设置, 有多个a标签, 怎么区分 ? 在a标签里面添加一个class属性.
给div标签页添加一个class属性
base.html

<!DOCTYPE html>
......
<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">
        a.logo {
            display: inline-block;
        }
    </style>
</body>
</html>

在这里插入图片描述

设置导航栏里面的样式, 下划线全都不要

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

设置背景颜色 , 内边距外边距, 和字体颜色

<style type="text/css">
        {# 设置内边距和外边距 #}
        body {
            margin: 0;
            padding: 0;
        }
        div.nav {
            background-color: #eee;
        }
        div.nav a{
            {# 设置导航栏里面的样式, 下划线全都不要 #}
            text-decoration: none;
            {# 添加字体颜色 #}
            color: black;
        }
        div.nav a.logo {
            {# 让个人博客网站设置成一个块, 使首页和博客在同一行 #}
            display: inline-block;
        }
    </style>

设置边框线

只设置底部的线, 所以使用border-bottom, 宽度设置为1px, 设置为实线solid

<style type="text/css">
        div.nav {
            {# 设置背景颜色 #}
            background-color: #eee;
            {# 设置边框 #}
            border-bottom: 1px solid #ccc
        }
</style>

设置标签和标签的间距

<style type="text/css">
        div.nav a{
            {# 设置导航栏里面的样式, 下划线全都不要 #}
            text-decoration: none;
            {# 添加字体颜色 #}
            color: black;
            {# 设置标签和标签的间距 #}
            padding: 5px 10px;
        }
        div.nav a.logo {
            {# 让个人博客网站设置成一个块, 使首页和博客在同一行 #}
            display: inline-block;
            {# 设置字体大小 #}
            font-size: 120%;
        }
</style>

调整内容部分的显示

home页面添加class属性

{% 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;
            left: 50%;
            top: 50%;
            {# 相对位置进行偏移 #}
            transform: translate(-50%,-50%);
        }
    </style>
{% endblock %}

使用静态文件

创建一个文件夹static

创建base页面对应的css文件

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: black;
    {# 设置标签和标签的间距 #}
    padding: 5px 10px;
}
div.nav a.logo {
    {# 让个人博客网站设置成一个块, 使首页和博客在同一行 #}
    display: inline-block;
    {# 设置字体大小 #}
    font-size: 120%;
}

配置settings文件, 使能找到static文件
使用os.path.join 拼接根目录和静态文件夹

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

引入静态文件

方法一：

<link rel="stylesheet" href="/static/base.css">

方法二：使用Django自带库 {% load staticfiles %}

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

迁移home页面的CSS

把css封装到一个文件里面, home.css
因为home.html是基于base.html , 所以在base.html中拓展一个写css的块

<head>
    .....
    {% block header_extends %}{% endblock %}
</head>

加载static并引入css

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

范德彪陕西分彪

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
【django】五、使用CSS美化页面

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

扫一扫