[Débutant] [Python / Django] Un ingénieur Web débutant a essayé un tutoriel Django - Partie 6
introduction
Ravi de vous rencontrer, tout le monde. Je publierai le processus de création d'une application de vote (sondage) en utilisant Django comme mémorandum. Puisque je suis un débutant de Qiita, veuillez comprendre qu'il peut être difficile à lire.
séries
- [Débutant] [Python / Django] Un ingénieur Web débutant a essayé un tutoriel Django-No. 0-
- [Débutant] [Python / Django] Un ingénieur Web débutant a essayé un didacticiel Django - Partie 1-
- [Débutant] [Python / Django] Un ingénieur Web débutant a essayé un didacticiel Django - Partie 2-
- [Débutant] [Python / Django] Un ingénieur Web débutant a essayé un didacticiel Django - Partie 3
- [Débutant] [Python / Django] Un ingénieur Web débutant a essayé le didacticiel Django - Partie 4
Commence travail
Cette fois, nous travaillerons avec des fichiers statiques. Les fichiers statiques sont JavaScript, CSS, images, etc.
Personnalisez la structure de votre application
Créez un fichier SCC. Tout d'abord, créez un répertoire pour stocker le fichier CSS.
Créez un répertoire "polls / static / polls /" selon les spécifications par défaut de Django. Créons un fichier style.css en dessous.
Écrivez du CSS.
polls/static/polls/style.css
li a {
color: red;
}
Chargez CSS dans HTML. N'oubliez pas d'utiliser la balise de modèle {% static%} pour le moment.
polls/templates/index.html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
Démarrez le serveur et vérifiez que SCC est appliqué.
(poll-HcNSSqhc) C:\django\poll>python manage.py runserver
Le lien est maintenant rouge.
Laissez-le dans un vert plus naturel.
polls/static/polls/style.css
li a {
color: green;
}
Ajouter une image d'arrière-plan
Créez un dossier d'images. Les images sont également un type de fichier statique, alors créez un dossier "polls / static / polls / images" et placez le logo Django en dessous.
polls/static/polls/style.css
body {
background-image: url("images/django.png ");
background-size: 30%;
background-repeat: no-repeat;
}
L'image d'arrière-plan s'affiche. Maintenant que l'image a été lue, c'est OK pour le moment.
C'est tout pour aujourd'hui. Merci beaucoup.
Recommended Posts