如何从我的表单的 css 文件中更改一些内容?

我有一个扩展我的基本 HTML 文件的文件,该文件包含一个表单。我想为表单创建边距,并更改提交按钮和表单文本框的颜色以匹配我网站的主题。我该如何在我的 CSS 文件中执行此操作?截至目前,边距似乎不起作用,而且我也不确定如何像我之前提到的那样更改颜色。


search.html 文件


{% extends 'base.html' %}

{%load static%}

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


  <body>


    {% block content %}


        <container >  

        <center>

            <form action="/searchoutput/" method="post">

              {% csrf_token %}

              Input Text:

              <input type="text" name="param" required> <br><br>

              {{data_external}}<br><br>

              {{data}}

              <br><br>

              <input type="submit" value="Check for Service">


              </form>

        </container>

        </center>

    {% endblock %}



  </body>

表单.css 文件


form {

 margin-top: 200px;

}

基础.html


{%load static%}

<!DOCTYPE html>

<html>

<head>

<title>TweetyBird</title>



    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



慕虎7371278
浏览 93回答 1
1回答

汪汪一只猫

在 base.html ({%block staticfiles%}) 中的 head 标签下方添加一个块标签。现在在 search.html 中将你的 css 添加到 staticfiles 块中。由于您扩展了 base.html,因此只有 search.html 的块内容会被 base.html 块中的内容替换由于您的链接标记在块之外,因此 css 甚至不会被拾取。另外最好在 base.html 中使用 body 标签而不是 search.html
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Python