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

最新推荐文章于 2024-05-30 09:04:35 发布
最新推荐文章于 2024-05-30 09:04:35 发布
阅读量1.3k 收藏 9
点赞数
分类专栏： django 文章标签： django css python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46815330/article/details/120907543
版权

文章目录

页面设计

在这里插入图片描述

导航栏设计

在这里插入图片描述
在导航栏添加首页和博客
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实战之美化页面
东方佑
03-15 2万+
书接https://blog.csdn.net/weixin_32759777/article/details/104352341
Django（三）-HTML页面美化工具-CSS使用
qiujin000的博客
06-25 809
在应用目录（我的为mypro/myblog）下，新建static文件夹，然后在static文件夹下再建文件夹css，在css文件夹中新建文件myblog.css。CSS为层叠样式表 (Cascading Style Sheets) ，是美化网站页面的一种语言。此处还使用了Bootstrap ，它是 HTML 和 CSS 的框架之一，需要添加到。django默认对css的静态文件拒绝访问，需要进行配置才能正常使用。加载静态文件方法二,可以不加 load static，但要把路径写死。5.设置HTML文件。
Django框架使用Bootstrap美化登陆注册页面
weixin_39098318的博客
04-02 4457
背景 昨天写的登陆注册页面只把功能实现完，还没有对页面进行美化，那么今天我们就完成昨天的任务！ 一、思路 使用现在比较流行的前端框架Bootstrap，外加自己写的一点点css来进行美化！ 一般都是下载框架，导入，引用，美化。 二、实现 1.下载Bootstrap4 https://v4.bootcss.com/docs/getting-started/download/ 由于Bootstrap4...
使用 Django SimpleUI 快速搭建美观的管理界面
最新发布
Code掘金的博客
05-30 1218
是一个基于 Django Admin 的扩展，旨在提供一套简洁、美观、易用的管理界面。它提供了丰富的定制选项和插件支持，可以轻松地满足各种管理界面需求。使用 Django SimpleUI，开发者可以快速搭建出功能完善、外观优美的管理界面，提高开发效率。如果需要更灵活的页面布局和组件，你可以通过编写定制代码来实现。例如，你可以自定义某个模型的管理界面，添加额外的字段或者定制表单的样式。创建一个新的 admin 模块或者在现有的 admin 模块中添加定制代码。编写自定义的 admin 类，继承自或者。
【Django学习笔记（二）】CSS语言介绍
禾戊之昂的博客
03-29 1095
通过本篇文章，可以快速了解 CSS 、CSS的应用方式、选择器、样式等，并通过小米商城的案例进行展示，对于学习 Django 框架的后端开发者，可以快速了解前端相关的知识。
Django初识（7.使用前端库快速美化页面）
weixin_51803729的博客
02-08 2152
Django初识（7.使用前端库快速美化页面）
Python+前端html、css美化综合+博客首页网页搭建
05-14
本资源主要是利用html语言和css语言搭建了博客园首页的示例网页页面 对前端html和css所有的知识进行复习运用 通过搭建项目的方式熟悉Python搭建前端的知识 适用于在对前端开发学习的伙伴，通过示例代码的方式理解和...
Django+boostrap 美化admin后台的操作
09-17
标题中的“Django+Bootstrap 美化admin后台的操作”是指使用Bootstrap框架来改进Django管理后台（admin界面）的视觉样式，使它看起来更加现代和用户友好。Django的admin界面是开发者用来管理和操作数据库的强大工具...
基于Django+html+css的校园外卖配送平台.zip
01-15
通过HTML进行页面布局和交互设计，CSS实现视觉美化，而Django作为后端框架负责处理数据逻辑和业务流程。开发者可能通过这个项目学习到如何将前后端技术有效地融合，以实现一个高效且用户体验良好的外卖配送系统。 ...
Python-djangoadmin美化采用layui作为基本框架改写大部分页面
08-12
"Python-djangoadmin美化采用layui作为基本框架改写大部分页面"这个项目旨在提升Django内置的admin界面的用户体验，通过引入layui这一现代前端框架，对默认的admin模板进行了全面的改造。 layui是一款优秀的前端UI...
portfolio:django 3简单页面组合
04-02
在这个Django项目中，标签“CSS”表明开发者使用了CSS来美化和布局页面，定义颜色、字体、大小、间距等视觉效果，以及实现响应式设计，使页面在不同设备上都能有良好的显示效果。可能包含了一个或多个CSS文件，如`...
python3 django 静态html 中文乱码_python-django加载HTML/CSS样式
weixin_39548438的博客
12-09 440
一、如何在django里面加载html的css样式：在服务器运行在本地时：127.0.0.1:8000端口时候，需要先配置好你的django。1、对于django而言，加载html，django会通过templates中放置的HTML来加载。但是单纯的HTML在实际的网站中是不现实的，必定会要嵌入CSS和js等样式。此时django默认是对css、js的静态文件是拒绝访问的，必须要在里面进行配置才...
django admin页面美化
qinshi501的博客
02-15 1461
在你的 Django 项目的 settings.py 文件中，确保 STATICFILES_DIRS 包含了你的静态文件夹的路径。通过这些方法，你可以大大改善 Django Admin 页面的外观和感觉，使其更加符合你的项目需求和品牌风格。性能：尽量减少加载的 CSS 和 JavaScript 文件的大小，以提高 Admin 页面的加载速度。这是最简单的方法，你可以通过添加自定义 CSS 文件来覆盖 Django Admin 的默认样式。如果你想要更深入的定制，你可以直接修改 Admin 的模板。
如何将Django中的管理端网站变得好看又与众不同
LoadingCreate的博客
06-22 1018
django-material提供了额外的组件，例如卡片、选项卡、快速搜索和过滤器，这些组件可以极大地提高管理页面的设计和功能。django-admin-interface是一个现代化的Django管理插件，提供了漂亮的UI设计和现代的布局。django-suit是另一个非常流行的Django管理插件，它提供一种新的风格，可以替代Django内置的管理UI。以上是五个Django管理插件，它们都提供了漂亮和现代的UI设计、现代的布局和丰富的UI组件库。在Django中，管理页面是管理数据的重要部分。
django管理界面美化_Django管理界面
culing2941的博客
09-16 2039
django管理界面美化Here you will learn about working with django admin interface. 在这里，您将了解有关使用django管理界面的信息。 Prerequiests:It is necessary to learn about models first before working with Django admin pan...
Django-simpleUI(Django-admin)后台美化
m0_37411645的博客
11-24 2463
Django-simpleUI django-amdin控制界面自由定义布局处理（借用图片展示效果） 第一步 创建项目 django-admin startproject demo 第二步 创建APP python manage.py startapp background 第三步 修改setting.py修改以下几处 ALLOWED_HOSTS = [’*’, ] #Application definition INSTALLED_APPS = [ 'simpleui', 'tasks
django后台管理界面美化
Dawn的博客
12-21 2576
本文首发地址：https://www.dawnsite.cn/archives/147.html django自带后台管理系统，但是界面略显‘简陋’ 一. 前置任务 建立数据库表和管理员信息 python manage.py migrate # 初始化默认表信息 python manage.py createsuperuser # 创建后台管理员账号 二. 使用simpleui开源项目一键美化界面 只需两步： 设置文件包括该项目 setting.py INSTALLED_APPS = [
Django Admin快速美化详解
小谷同学
07-26 5149
Django的后台快速美化详解 一直听说别人一天搞出来一个后端管理系统，今天发现了新大陆，哈哈哈 1.Django中admin设置中文 在settings.py中设置 LANGUAGE_CODE = 'zh-Hans' TIME_ZONE = 'Asia/Shanghai' 2.Django中admin页面标题设置中文 在你的主模块中的admin.py中添加下面两行 admin.site.site_header = '后台管理系统' admin.site.index_title = '首页'
Django(二)精美博客搭建(1)实现登录/注册功能
Mikasa的博客
06-04 4490
前言 之前我们做了一个很简单的个人博客搭建，不论是页面还是功能都很粗糙 所以从这篇开始我打算做一个比较完整的【个人博客网站】，可能会分好几篇博客来讲述 其中设计到的一些知识点也会和大家详细说下 简易版blog搭建：https://blog.csdn.net/Makasa/article/details/124982130?spm=1001.2014.3001.5502 环境： Pycharm python3.6 一、Django框架介绍 1、创建Django项目 直接在pycharm里新建一
django联系人列表前端展示并美化页面
03-04
要使用Django构建联系人列表，并美化它们的页面，您可以遵循以下步骤： 1. 创建Django项目和应用程序：运行以下命令来创建一个新的Django项目和应用程序： ``` django-admin startproject myproject cd myproject python manage.py startapp contacts ``` 2. 创建联系人模型：在contacts/models.py文件中定义联系人模型，如下所示： ```python from django.db import models class Contact(models.Model): first_name = models.CharField(max_length=50) last_name = models.CharField(max_length=50) email = models.EmailField(max_length=254) phone = models.CharField(max_length=20) ``` 3. 运行迁移：运行以下命令来创建并应用数据库迁移： ``` python manage.py makemigrations python manage.py migrate ``` 4. 创建视图：在contacts/views.py文件中创建一个视图，用于显示联系人列表： ```python from django.shortcuts import render from .models import Contact def contact_list(request): contacts = Contact.objects.all() return render(request, 'contacts/contact_list.html', {'contacts': contacts}) ``` 5. 创建模板：创建一个模板来显示联系人列表，例如contacts/templates/contacts/contact_list.html： ```html {% extends 'base.html' %} {% block content %} <h1>Contact List</h1> <ul> {% for contact in contacts %} <li>{{ contact.first_name }} {{ contact.last_name }} - {{ contact.email }} - {{ contact.phone }}</li> {% empty %} <li>No contacts yet.</li> {% endfor %} </ul> {% endblock %} ``` 6. 创建URL：在contacts/urls.py文件中定义一个URL模式，以便访问联系人列表视图： ```python from django.urls import path from .views import contact_list urlpatterns = [ path('', contact_list, name='contact_list'), ] ``` 7. 更新项目URL配置：将应用程序的URL配置包含在项目级别的URL配置中，例如myproject/urls.py： ```python from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('contacts/', include('contacts.urls')), ] ``` 8. 添加样式：如果您想要美化联系人列表页面，可以将CSS样式添加到base.html或contact_list.html模板中。 这些步骤应该能够让您构建一个简单的联系人列表，并美化它们的页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值