### 修改Django网页的颜色和样式 #### 自定义Django管理界面的CSS样式和字体 为了改变Django管理界面的颜色和其他样式，可以通过创建并链接自定义的CSS文件到`settings.py`中的静态路径下。具体来说，在项目的根目录下的`static/admin/css/`文件夹内放置一个新的CSS文件，并在此文件中编写所需的样式规则[^1]。 对于想要覆盖默认样式的特定部分，可以利用浏览器开发者工具查看现有类名或ID名称，从而针对性地设置新的样式属性。例如： ```css /* static/admin/css/custom.css */ body { background-color: #f8f9fa; } h1, .module caption { color: darkblue !important; } ``` 接着，在`settings.py`里添加这段配置让Django知道要加载这个额外的样式表： ```python STATICFILES_DIRS = [ BASE_DIR / "static", ] INSTALLED_APPS += ['django.contrib.admin.apps.SimpleAdminConfig'] X_FRAME_OPTIONS = 'SAMEORIGIN' ADMIN_MEDIA_PREFIX = '/static/admin/' ``` 请注意，如果使用的是较新版本的Django，则可能需要调整上述某些选项以适应框架更新后的变化。 #### 修改Form表单的样式 当涉及到前端展示时，除了管理员区域外的一般Web页面也可以轻松定制其外观。针对由Django Forms生成的标准HTML `<form>`标签及其内部组件，可以直接在模板文件中引入外部CSS资源或者直接嵌入内联样式来美化这些元素[^2]。 这里给出一个简单的例子说明如何操作： ```html <!-- templates/my_template.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Form</title> <link rel="stylesheet" href="{% static 'css/forms.css' %}"> </head> <body> <form action="/submit/" method="post">{% csrf_token %} {{ form.as_p }} <button type="submit">提交</button> </form> </body> </html> ``` 以及对应的CSS文件内容可能是这样的： ```css /* static/css/forms.css */ input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } button[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } ``` #### 更改后台列表字段的状态指示符颜色 若希望进一步增强用户体验，比如根据不同条件动态改变表格行内的图标颜色（如勾选标记），可以在模型层面上做文章。通过重写模型方法返回带有适当样式的HTML片段给视图层呈现出来[^4]。 下面是一个关于如何基于状态值应用不同色彩的例子： ```python from django.db import models from django.utils.html import format_html class Article(models.Model): STATUS_CHOICES = ( ('draft', '草稿'), ('published', '发布') ) title = models.CharField(max_length=255) content = models.TextField() status = models.CharField( max_length=10, choices=STATUS_CHOICES, default='draft' ) def colored_status(self): if self.status == 'draft': color_code = '#ffcccb' # light red elif self.status == 'published': color_code = '#dfffdf' # light green return format_html('<span style="background:{};">{}</span>', color_code, dict(Article.STATUS_CHOICES)[self.status]) ``` 这样做的好处是可以保持业务逻辑清晰的同时也实现了UI上的差异化表现效果。