时间戳

首页 > 解决方案 > Django - CSS 没有样式化 HTML 页面

html - Django - CSS 没有样式化 HTML 页面

问题描述

我正在为我的 Django Web 应用程序创建一个简单的仪表板页面。我有一个简单的 HTML 文件，但我的 CSS 文件没有设置它的样式。我有{% load static %}在我的 HTML 文件的顶部，并使用以下代码链接 2 个文件：<link rel="stylesheet" href="{% static 'dashboardstyles.css' %}">

有人可以帮我解决这个问题吗？我在下面包含了 HTML 和 CSS 代码。谢谢！

HTML：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>GoodDeed - Dashboard</title>
  <link rel="stylesheet" href="{% static 'dashboardstyles.css' %}">

</head>
<body>
    
    
    
        <!-- end row -->
        <div class="frame">
         <div class="center">
           
             <div class="profile">
                <div class="image">
                   <div class="circle-1"></div>
                   <div class="circle-2"></div>
                   <img src="https://images-na.ssl-images-amazon.com/images/I/51e6kpkyuIL._AC_SL1200_.jpg" width="70" height="70" alt="Image">
                </div>
                
                <div class="name">{{ user.get_full_name }}</div>
                <div class="job"> {{ user.get_username }}</div>
                
                <div class="actions">
                   <button class="btn">Events</button>
                   <button class="btn">News</button>
                </div>
             </div>
             
             <!--Add points and stuff later-->
             <div class="stats">
                <div class="box">
                   <span class="value">0</span>  
                   <span class="parameter">Points</span>
                </div>
                <div class="box">
                   <span class="value">0</span>
                   <span class="parameter">Donations</span>
                </div>
                <div class="box">
                   <span class="value">0</span>
                   <span class="parameter">People Helped</span>
                </div>
             </div>
         </div>
       </div>
      
          
   
</body>
</html>

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,300);
body{
  background:#DCDCDC;
  
}


.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  background: #CA7C4E;
  background: -webkit-linear-gradient(bottom left, #EEBE6C 0%, #CA7C4E 100%);
  background: -moz-linear-gradient(bottom left, #EEBE6C 0%, #CA7C4E 100%);
  background: -o-linear-gradient(bottom left, #EEBE6C 0%, #CA7C4E 100%);
  background: linear-gradient(to top right, #EEBE6C 0%, #CA7C4E 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#EEBE6C", endColorstr="#CA7C4E",GradientType=1 );
  color: #786450;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50px;
  left: 40px;
  height: 299px;
  width: 320px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
}

.profile {
  float: left;
  width: 200px;
  height: 320px;
  text-align: center;
}
.profile .image {
  position: relative;
  width: 70px;
  height: 70px;
  margin: 38px auto 0 auto;
}
.profile .image .circle-1, .profile .image .circle-2 {
  position: absolute;
  box-sizing: border-box;
  width: 76px;
  height: 76px;
  top: -3px;
  left: -3px;
  border-width: 1px;
  border-style: solid;
  border-color: #786450 #786450 #786450 transparent;
  border-radius: 50%;
  transition: all 1.5s ease-in-out;
}
.profile .image .circle-2 {
  width: 82px;
  height: 82px;
  top: -6px;
  left: -6px;
  border-color: #786450 transparent #786450 #786450;
}
.profile .image img {
  display: block;
  border-radius: 50%;
  background: #F5E8DF;
}
.profile .image:hover {
  cursor: pointer;
}
.profile .image:hover .circle-1, .profile .image:hover .circle-2 {
  transform: rotate(360deg);
}
.profile .image:hover .circle-2 {
  transform: rotate(-360deg);
}
.profile .name {
  font-size: 15px;
  font-weight: 600;
  margin-top: 20px;
}
.profile .job {
  font-size: 11px;
  line-height: 15px;
}
.profile .actions {
  margin-top: 33px;
}
.profile .actions .btn {
  display: block;
  width: 120px;
  height: 30px;
  margin: 0 auto 10px auto;
  background: none;
  border: 1px solid #786450;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
  color: #786450;
}
.profile .actions .btn:hover {
  background: #786450;
  color: #fff;
}

.stats {
  float: left;
}
.stats .box {
  box-sizing: border-box;
  width: 120px;
  height: 99px;
  background: #F5E8DF;
  text-align: center;
  padding-top: 28px;
  transition: all 0.4s ease-in-out;
}
.stats .box:hover {
  background: #E1CFC2;
  cursor: pointer;
}
.stats .box:nth-child(2) {
  margin: 1px 0;
}
.stats span {
  display: block;
}
.stats .value {
  font-size: 18px;
  font-weight: 600;
}
.stats .parameter {
  font-size: 11px;
}

文件位置：

在此处输入图像描述

设置.py

"""
Django settings for GoodDeedWeb project.

Generated by 'django-admin startproject' using Django 3.1.6.

For more information on this file, see
https://docs.djangoproject.com/en/3.1/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.1/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'utz7)^jpd1e%bd)pxqi7i%@p$$m6b3+efsgmw&y9zn9grs4qs+'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crispy_forms',
    'home',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'GoodDeedWeb.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'GoodDeedWeb.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

CRISPY_TEMPLATE_PACK = 'bootstrap3'

STATIC_URL = '/static/'

标签： htmlcssdjango

解决方案

您的文件中没有任何STATICFILES_DIRS价值settings.py。将此添加到您的 settings.py 文件中，紧跟在 STATIC_URL 变量之后。这是 Django 必须查找的静态文件的位置。

STATICFILES_DIRS = [
    BASE_DIR / "home/static",
]

推荐阅读