菜单
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

将 CSS 文件添加到项目中


项目 - My Tennis Club

如果您已完成整个 Django 教程的所有步骤,您的电脑上将有一个名为 my_tennis_club 的项目,其中包含 5 名会员

我们想向此项目添加一个样式表,并将其放入 mystaticfiles 文件夹中

my_tennis_club
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/
        mystyles.css

CSS 文件名由您选择,在本例中我们称之为 mystyles.css

打开 CSS 文件并插入以下内容

my_tennis_club/mystaticfiles/mystyles.css:

body {
  background-color: violet;
}

修改主模板

现在您有了一个 CSS 文件,下一步是将此文件包含在主模板中

打开主模板文件并添加以下内容

my_tennis_club/members/templates/master.html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}{% endblock %}</title>
  <link rel="stylesheet" href="{% static 'mystyles.css' %}">  
</head>
<body>

{% block content %}
{% endblock %}

</body>
</html>

检查设置

确保您的 settings.py 文件包含一个 STATICFILES_DIRS 列表,其中引用了根目录中的 mystaticfiles 文件夹,并且您已指定一个 STATICFILES_ROOT 文件夹

my_tennis_club/my_tennis_club/settings.py:

.
.
STATIC_ROOT = BASE_DIR / 'productionfiles'

STATIC_URL = 'static/'

#Add this in your settings.py file:
STATICFILES_DIRS = [
    BASE_DIR / 'mystaticfiles'
]
.
.

收集静态文件

每次更改静态文件时,都必须运行 collectstatic 命令才能使更改生效

py manage.py collectstatic

如果您之前在项目中执行过此命令,Django 会向您提出一个问题

您已请求将静态文件收集到目标
位置,如您的设置中所指定

    C:\Users\Your Name\myworld\my_tennis_club\productionfiles

这将覆盖现有文件!
您确定要继续吗?

输入 'yes' 继续,或输入 'no' 取消

输入 'yes'。这将更新静态文件中所做的任何更改,并得到以下结果

1 个静态文件已复制到 'C:\Users\Your Name\minverden\my_tennis_club\productionfiles',132 个未修改。

现在,如果您运行该项目

py manage.py runserver

它看起来会像这样

如果您已在自己的计算机上完成所有步骤,您可以在浏览器中看到结果

在浏览器窗口中,在地址栏中键入 127.0.0.1:8000/members/


给样式增添色彩!

在上面的示例中,我们向您展示了如何将样式表包含到您的项目中。

我们最终得到了一个紫色的网页,但 CSS 的作用不仅仅是改变背景颜色。

我们要对样式做更多操作,并得到类似这样的结果

首先,用以下内容替换 mystyles.css 文件中的内容

my_tennis_club/mystaticfiles/mystyles.css:

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
body {
  margin:0;
  font: 600 18px 'Source Sans Pro', sans-serif;
  letter-spacing: 0.64px;
  color: #585d74;
}
.topnav {
  background-color:#375BDC;
  color:#ffffff;
  padding:10px;
}
.topnav a:link, .topnav a:visited {
  text-decoration: none;
  color: #ffffff; 
}
.topnav a:hover, .topnav a:active {
  text-decoration: underline;
}
.mycard {
  background-color: #f1f1f1;
  background-image: linear-gradient(to bottom, #375BDC, #4D70EF); 
  background-size: 100% 120px;
  background-repeat: no-repeat;
  margin: 40px auto;
  width: 350px;
  border-radius: 5px;
  box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23); 
  padding: 20px;
}
.mycard h1 {
  text-align: center;
  color:#ffffff;
  margin:20px 0 60px 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  background-color: #ffffff;
  background-image: linear-gradient(to right, #375BDC, #4D70EF); 
  background-size: 50px 60px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform .25s;
  border-radius: 5px;
  box-shadow: 0 5px 7px -1px rgba(51, 51, 51, 0.23);
  padding: 15px;
  padding-left: 70px;
  margin-top: 5px;
}
li:hover {
  transform: scale(1.1);
}
a:link, a:visited {
  color: #375BDC; 
}
.main, .main h1 {
  text-align:center;
  color:#375BDC;
}

修改模板

您还需要对模板进行一些更改

Master

我们希望所有页面都有相同的顶部导航,因此我们将顶部导航插入到 master.html

my_tennis_club/members/templates/master.html:

{% load static %}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="{% static 'mystyles.css' %}">
  <title>{% block title %}{% endblock %}</title>
</head>
<body>

<div class="topnav">
  <a href="/">HOME</a> |
  <a href="/members">MEMBERS</a>
</div>

{% block content %}
{% endblock %}

</body>
</html>

Members

all_members.html 中,我们想对 HTML 代码进行一些更改。

成员被放入了一个 div 元素中,链接变成了带有 onclick 属性的列表项。

我们还想删除导航,因为它现在是主模板的一部分。

my_tennis_club/members/templates/all_members.html:

{% extends "master.html" %}

{% block title %}
  My Tennis Club - List of all members
{% endblock %}


{% block content %}
  <div class="mycard">
    <h1>Members</h1>
    <ul>
      {% for x in mymembers %}
        <li onclick="window.location = 'details/{{ x.id }}'">{{ x.firstname }} {{ x.lastname }}</li>
      {% endfor %}
    </ul>
  </div>
{% endblock %}

详情

details.html 中,我们将成员详细信息放入一个 div 元素中,并删除返回成员的链接,因为那现在是主模板中导航的一部分。

my_tennis_club/members/templates/details.html:

{% extends "master.html" %}

{% block title %}
  Details about {{ mymember.firstname }} {{ mymember.lastname }}
{% endblock %}

{% block content %}
  <div class="mycard">
    <h1>{{ mymember.firstname }} {{ mymember.lastname }}</h1>
    <p>Phone {{ mymember.phone }}</p>
    <p>Member since: {{ mymember.joined_date }}</p>
  </div>
{% endblock %}  

主菜单

main.html 模板中,我们将一些 HTML 代码放入一个 div 元素中

my_tennis_club/members/templates/main.html:

{% extends "master.html" %}

{% block title %}
  My Tennis Club
{% endblock %}

{% block content %}
  <div class="main">
    <h1>My Tennis Club</h1>

    <h3>Members</h3>
  
    <p>Check out all our <a href="members/">members</a></p>
  </div>
{% endblock %}

收集静态文件

由于我们对静态 mystyles.css 文件进行了一些更改,因此我们必须运行 collectstatic 命令才能使更改生效

py manage.py collectstatic

现在,如果您运行该项目

py manage.py runserver

您可以看到结果应该是什么样子

或者,如果您已在自己的计算机上完成所有步骤,您可以在浏览器中看到结果

在浏览器窗口中,在地址栏中键入 127.0.0.1:8000/members/



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持