Django - 使用CSS美化页面

最新推荐文章于 2024-02-25 16:49:52 发布
最新推荐文章于 2024-02-25 16:49:52 发布
阅读量2.8k 收藏 24
点赞数 3
分类专栏： Django 文章标签： django
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33962481/article/details/109989139
版权

目录

页面设计

在这里插入图片描述

导航栏设计

在这里插入图片描述

  • 在导航栏添加首页和博客
    • 添加访问博客链接设置
      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'),
]

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

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

使用静态文件

  • 创建一个静态文件夹
    在这里插入图片描述

创建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>

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

迁移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 %}
学习中的小菜鸟.
关注
  • 3
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
django-rest-captcha
05-27
Django Rest验证码 django-simple-captcha轻量级版本，可与django-rest-framework 。 特征 速度：使用cache代替数据库 安全性：用于生成密钥和图像的联合方法。 （一个键不能生成很多图像） 简单：只需一个rest api（用于生成，刷新图像）。 用法 将RestCaptchaSerializer添加到受保护的请求验证器中： from rest_captcha serializer import RestCaptchaSerializer class HumanOnlyDataSerializer(RestCaptchaSerializer): pass 这段代码向您的序列化器添加了两个必填字段（captcha_key，captcha_value） 为了提供此字段，客户端（js代码）应生成密钥： > curl -X PO
Django用户界面模板
Oner.wv的专栏
04-27 782
在之前理解Django那篇文章中，我们学习了在Django中如何使用视图。现在，这篇文章将学习如何使用Django模板。模板是在Django项目中构建用户界面的主要工具。让我们学习一下在...
Django Blog | 10 自定义Form，美化页面并实现文章编辑功能
最新发布
Trb201013的博客
02-25 875
在上一节更新完成后，我们的文章发布界面是上面这样，感觉也还行，像个样子，当又感觉有点简陋，确实，无论是页面左右边距，还是输入框，还是发布按钮，就凸显出一股穷酸劲。接下来，我们还需将入口配置在前端页面上，就是在哪里显示这个编辑按钮，一般来说，编辑按钮都是在文章详情页面的，所以我们也将其放置到文章详情页面，所以我们直接修改下。Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。
django-rest-framework-role-filters：django-rest-framework的简单角色过滤
02-05
django-rest-framework-role-filters：django-rest-framework的简单角色过滤
Python+前端html、css美化综合+博客首页网页搭建
05-14
本资源主要是利用html语言和css语言搭建了博客园首页的示例网页页面 对前端html和css所有的知识进行复习运用 通过搭建项目的方式熟悉Python搭建前端的知识 适用于在对前端开发学习的伙伴，通过示例代码的方式理解和记忆相关知识 并投入到实际中进行运用 资源包括前端html基本所有标签的运用， 同时有css选择器运用、浮动运用、盒子模型运用等
django-tables2-column-shifter:django-tables2的简单扩展可以动态显示或隐藏列。 使用JQuery，Bootstrap 3，Bootstrap 4，Bootstrap 5和Django> = 1.9
04-29
django-tables2-column-shifter 关于应用程序： django-tables2的简单扩展，可使用jQuery动态显示或隐藏列。 应用程序使用Web存储来存储列是否可见的信息。 使用JQuery，Bootstrap3或Bootstrap4或Bootstrap5以及Django> = 1.9。 警告： -从2.0版开始，默认情况下，我的扩展程序可与bootstrap4一起使用。 我强烈建议从引导类上指示的表类继承显式。 即，如果您在版本5的项目引导程序中使用，则Tables类应继承自：django_tables2_column_shifter.tables.ColumnShiftTableBootstrap5。 现在，您应该继承： 对于bootstrap2-ColumnShiftTableBootstrap2， 对于bootstrap3-ColumnSh
Django中如何配置CSS文件
热门推荐
qq_23366365的博客
02-21 1万+
Django中如何配置css文件 我的编辑器是pycharm，Django版本是2.1.0 1、在项目中manage.py同级目录下新建static文件夹，在static文件夹下新建css文件夹，在css文件夹下新建我们的css文件mysheet.css。我的文件目录如下图所示： mysheet.css具体内容如下图所示： 2、在与项目同名的包MyTest下的settings.py中配置静态文...
Django（三）-HTML页面美化工具-CSS使用
qiujin000的博客
06-25 641
在应用目录（我的为mypro/myblog）下，新建static文件夹，然后在static文件夹下再建文件夹css，在css文件夹中新建文件myblog.css。CSS为层叠样式表 (Cascading Style Sheets) ，是美化网站页面的一种语言。此处还使用了Bootstrap ，它是 HTML 和 CSS 的框架之一，需要添加到。django默认对css的静态文件拒绝访问，需要进行配置才能正常使用。加载静态文件方法二,可以不加 load static，但要把路径写死。5.设置HTML文件。
django模板中引入CSS和JS
s586的专栏
01-14 2790
因为在django中一般用来存放的模板的目录为template目录(注意：这个需要在settings.py中设置)，但是template目录是外部不能直接访问的，所以我们必须要把css文件和js文件放在外部可以直接访问的目录中，最好的办法就是自己指定一个目录，一般我们是放在static目录中，详细的方法如下。参考如下的代码，把需要引用css文件的链接修改为从“/static/css/”下面的文件。见上面的图，然后把需要用到的的css文件全部复制到css目录中，需要用到的js文件全部复制到js目录中。
Django学习笔记：CSS基础
那么大圆筒的博客
03-10 1033
CSS基础 css概述 CSS是一组格式设置规则，用于控制Web页面的外观。例如，让HTML中的某个div或者span元素北京颜色改为黑色，或者设置图片元素img的长、宽、显示位置等，这些外观的设置功能都可以通过CSS来控制。在Web开发浅短中，HTML用来控制页面的内容，而CSS用来控制页面内容的显示方式。 CSS中的内容一般与HTML中的元素绑定起来，由选择符和属性组成，选择符后面跟着属性，但被一对花括号所包围。属性和值由冒号分隔，每个属性生命以分号结尾。典型的CSS样式设计代码如下 body{
django-registration：Django-registration（redux）为Django网站提供用户注册功能
02-05
django-registration：Django-registration（redux）为Django网站提供用户注册功能
django-css-grid:用于创建CSS网格的Django应用
04-30
django-css-grid 用于创建CSS网格的Django应用 通过点子安装 pip install git+https://github.com/raiderrobert/django-css-grid/ 在Django教程中工作 我将对周围发生的事情做出一些假设。 这些是根据Django教程进行的： : 假设您具有以下模型 # polls/models.py from django.db import models class Question(models.Model): question_text = models.CharField(max_length=200) pub_date = models.DateTimeField('date published') def __str__(self): return self.qu
python3 django 静态html 中文乱码_python-django加载HTML/CSS样式
weixin_39548438的博客
12-09 418
一、如何在django里面加载html的css样式：在服务器运行在本地时：127.0.0.1:8000端口时候，需要先配置好你的django。1、对于django而言，加载html，django会通过templates中放置的HTML来加载。但是单纯的HTML在实际的网站中是不现实的，必定会要嵌入CSS和js等样式。此时django默认是对css、js的静态文件是拒绝访问的，必须要在里面进行配置才...
django导入多个html文件,Django导入静态文件
weixin_35998791的博客
06-16 659
引言这个问题出在以Djiango做后台的前端界面上。按以往的习惯，css，js，image等静态文件直接在前端html中写好链接，直接丢上去就可以，但当我把含外部css的html在丢到Django后发现，css并没有载入，自然，其他静态文件也是如此。最初百度查找解决方案，但很多使用的版本与我的不同，解决方案也有偏差，其他可用的方案也并没有讲清楚(其实就是我没能理解)，于是自己去看了文档写下了自己的...
Django学习笔记3---CSS
yychentracy的博客
12-23 594
什么是CSS 层叠样式表,是用来表示HTML等文件样式的计算机语言，不仅可以静态的修饰网页，还可以配合多种脚本语言动态的对网页各元素进行格式化．CSS可以对网页中元素位置的排版进行像素级精确控制，支持所有的字体字号样式，拥有对网页对象盒模型样式编辑的能力． CSS的语法 选择器｛属性：值；属性：值；属性：值；｝ 选择器一般指的是HTML的标签 注释 /*....*/ 使用CSS的方式 (1)内联: 在html中直接写: <li style="color:#fc0">内联样式(inline s
django css_在应用程序上实现CSS Django的
cumt951045的博客
07-25 601
django cssCSS (Cascade Style Sheets) are used to implement design. CSS(级联样式表)用于实现设计。 Step 1: Create a Sandbox, Activate it, Install Django and Create Sample Project 步骤1：创建一个沙箱，将其激活，安装Django并创建示例项目 ...
Django 中如何使用css 详细解析
brandyzhaowei的专栏
06-19 1228
按照如下的设置来做就可以了，讲的非常清楚： settings.py: MEDIA_ROOT = 'C:/Server/Projects/project_name/static/' MEDIA_URL = '/static/' ADMIN_MEDIA_PREFIX = '/media/' urls.py: from django.conf import settings ...
Django框架使用Bootstrap美化登陆注册页面
weixin_39098318的博客
04-02 4289
背景 昨天写的登陆注册页面只把功能实现完，还没有对页面进行美化，那么今天我们就完成昨天的任务！ 一、思路 使用现在比较流行的前端框架Bootstrap，外加自己写的一点点css来进行美化！ 一般都是下载框架，导入，引用，美化。 二、实现 1.下载Bootstrap4 https://v4.bootcss.com/docs/getting-started/download/ 由于Bootstrap4...
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模板中。 这些步骤应该能够让您构建一个简单的联系人列表，并美化它们的页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值