Django (3)-HTML page beautification tool-CSS usage

Open mypro/myblog/template/archive.html:

1 Introduction

CSS is Cascading Style Sheets, a language used to beautify website pages.

2. Add static files

In the application directory (mine is mypro/myblog), create a new static folder, then create a folder css under the static folder, and create a new file myblog.css in the css folder.

3. Configure

Django denies access to CSS static files by default and needs to be configured for normal use.

Open mypro/settings.py, pull down the code and find:

STATIC_URL = 'static/'

Add below: (remember to import os)

STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]

4. Edit myblog.css file

For tutorials, please refer to:w3school online tutorialsThe world's largest Chinese Web technology tutorial. https://www.w3school.com.cn/

5.Set HTML file

Method one for loading static files:

 {% load static %}
...
 <link rel="stylesheet" href="{% static 'css/myblog.css' %}">

Method 2 for loading static files, you don’t need to add load static, but the path must be hard-coded.

<link rel="stylesheet" href="{%  '/static/css/myblog.css' %}">

Method one is used here.

Bootstrap is also used here, which is one of the frameworks of HTML and CSS and needs to be added to .html file <head>

This will not add any files to your project. It simply points to a file that exists on the Internet.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

Open mypro/myblog/templates/archive.html and edit as follows:

    {% load static %}
    <html>
        <head>
            <title>There is my blog</title>
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
            <link rel="stylesheet" href="{% static 'css/myblog.css' %}">
        </head>
        <body>
            <div>
                <h1><a href="/">There is my blog</a></h1>
            </div>

            {% for post in posts %}
                <div>
                    <h1><a href="">{
   
   { post.title }}</a></h1>
                    <p>{
   
   { post.body }}</p>
                </div>
            {% endfor %}
        </body>
    </html>

Start the server and refresh the page: (This page is ugly, you can change it yourself)

Django (3)-HTML page beautification tool-CSS usage

Guess you like