凡人多烦事01

这个屌丝很懒，什么也没留下！

热门标签

Django - 使用CSS美化页面_django网页 css

作者：凡人多烦事01 | 2024-03-07 05:04:52

踩

django网页 css

页面设计

在这里插入图片描述

导航栏设计

在这里插入图片描述

在导航栏添加首页和博客
- 添加访问博客链接设置
  uls.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'),
]
1
2
3
4
5
6
7
8
9
10

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

添加跳转到首页的方法, 因为首页不是一个单独的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)
1
2
3
4
5
6

添加首页页面

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

{% extends 'base.html' %}

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

{% block content %}
    <h3>欢迎访问我的博客</h3>
{% endblock %}
1
2
3
4
5
6
7
8
9

使用CSS(层叠样式表)

用于修饰html的语言
使用style标签, 一般加在body标签尾部

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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

<style type="text/css">
    div.nav a{
    	
        text-decoration: none;
    }
    div.nav a.logo {
        display: inline-block;
    }
</style>
1
2
3
4
5
6
7
8
9

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

设置边框线

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

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

设置标签和标签的间距

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

调整内容部分的显示

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 %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用静态文件

创建一个静态文件夹

创建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%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

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

引入静态文件

第一种方法

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

第二种方法: 使用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>
1
2
3
4
5
6
7
8

注意 : 不要在css文件里面加中文注释, 否则会产生乱码, 导致css文件不生效 !!!

迁移home页面的css

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

<head>
    .....
    {% block header_extends %}{% endblock %}
</head>
1
2
3
4

加载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 %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/203660