HTML 在 Flask 中无法正确显示，Python

Question

我正在尝试使用 Flask 制作一个网站。我使用 TeleportHQ 设计了 HTML，这是一个拖放式 HTML 设计器，可为您提供 HTML 和 CSS 文件。我的网站看起来像我想要的那样。我下载了 HTML 和 CSS。当我打开 index.html 文件时，它会在浏览器中打开并且运行良好。然后，我将 HTML 和 CSS 复制并粘贴到我的 Flask 应用程序中，它将中间的所有内容相互重叠。

我不确定我做错了什么。

这是我的路线

@main.route("/")
@main.route("/home")
def home():

    return render_template('index.html')

这里是 index.html（注意：我已将样式 sheet 的链接从 href="./style.css" 更改为 href="{{ url_for('static', filename='style.css') 所以它可以在静态文件中找到 css)

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Alienated Quiet Lark</title>
    <meta property="og:title" content="Alienated Quiet Lark" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta property="twitter:card" content="summary_large_image" />
    <style>
      html {  line-height: 1.15;}body {  margin: 0;}* {  box-sizing: border-box;  border-width: 0;  border-style: solid;}p,li,ul,pre,div,h1,h2,h3,h4,h5,h6 {  margin: 0;  padding: 0;}button,input,optgroup,select,textarea {  font-family: inherit;  font-size: 100%;  line-height: 1.15;  margin: 0;}button,select {  text-transform: none;}button,[type="button"],[type="reset"],[type="submit"] {  -webkit-appearance: button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {  border-style: none;  padding: 0;}button:-moz-focus,[type="button"]:-moz-focus,[type="reset"]:-moz-focus,[type="submit"]:-moz-focus {  outline: 1px dotted ButtonText;}a {  color: inherit;  text-decoration: inherit;}input {  padding: 2px 4px;}img {  display: block;}
    </style>
    <style>
      html {
        font-family: Inter;
        font-size: 16px;
      }

      body {
        font-weight: 400;
        font-style:normal;
        text-decoration: none;
        text-transform: none;
        letter-spacing: normal;
        line-height: 1.15;
        color: var(--dl-color-gray-black);
        background-color: var(--dl-color-gray-white);

      }
    </style>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
    />
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
  </head>
  <body>
    <div>
      <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='home.css') }}">

      <div id="page_holder1" class="home-container">
        <div id="page_holder" class="home-container1">
          <div id="logo_holder" class="home-container2">
            <img
              src="http://ops-software.com/wp-content/uploads/2021/11/cropped-cropped-1-1.png"
              alt="image"
              id="company_logo"
              class="home-image"
            />
          </div>
          <div id="text_holder" class="home-container3">
            <span id="option_text">Please select an option</span>
          </div>
          <div class="home-container4">
            <div id="whale_flight" class="home-container5">
              <span class="home-text01">Whale Watching Flight</span>
              <span class="home-text02">
                <span>Panaramic Whale Flights and Sceanic</span>
                <br />
                <span>Views - 30 or 40</span>
              </span>
              <button
                id="view_whale"
                name="view_whale"
                class="home-button button"
              >
                View
              </button>
            </div>
            <div id="sceanic_flight" class="home-container6">
              <span class="home-text05">Spectacular Scenic Flights</span>
              <span class="home-text06">
                <span>View the Ocean south and mountians north and MORE!!</span>
                <br />
                <span>15 - 25 - 30 Minutes</span>
              </span>
              <button
                id="view_scenic"
                name="vew_scenic"
                class="home-button1 button"
              >
                View
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS风格

:root {
  --dl-color-gray-500: #595959;
  --dl-color-gray-700: #999999;
  --dl-color-gray-900: #D9D9D9;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-danger-300: #A22020;
  --dl-color-danger-500: #BF2626;
  --dl-color-danger-700: #E14747;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #FFFFFF;
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-unit: 16px;
  --dl-color-primary-100: #003EB3;
  --dl-color-primary-300: #0074F0;
  --dl-color-primary-500: #14A9FF;
  --dl-color-primary-700: #85DCFF;
  --dl-color-success-300: #199033;
  --dl-color-success-500: #32A94C;
  --dl-color-success-700: #4CC366;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-radius-radius-round: 50%;
  --dl-space-space-halfunit: 8px;
  --dl-space-space-sixunits: 96px;
  --dl-space-space-twounits: 32px;
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-space-space-fiveunits: 80px;
  --dl-space-space-fourunits: 64px;
  --dl-space-space-threeunits: 48px;
  --dl-space-space-oneandhalfunits: 24px;
}
.button {
  color: var(--dl-color-gray-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.input {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.textarea {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}
.list-item {
  display: list-item;
}
.teleport-show {
  display: flex !important;
}
.content {
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
.heading {
  font-size: 32px;
  font-family: Inter;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

css首页

.home-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
}
.home-container1 {
  flex: 0 0 auto;
  width: 100%;
  height: 705px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.home-container2 {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-self: flex-start;
  margin-top: var(--dl-space-space-fourunits);
  align-items: center;
  justify-content: center;
}
.home-image {
  width: 312px;
  height: 108px;
  object-fit: cover;
}
.home-container3 {
  flex: 0 0 auto;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-container4 {
  width: 100%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  align-items: center;
  justify-content: center;
}
.home-container5 {
  flex: 0 0 auto;
  width: 457px;
  height: 284px;
  margin: 25px;
  display: flex;
  box-shadow: 5px 5px 10px 5px #d4d4d4;
  transition: 0.3s;
  align-items: flex-start;
  border-color: rgba(120, 120, 120, 0.4);
  border-style: dashed;
  border-width: 0px;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  background-size: cover;
  justify-content: flex-end;
  background-image: url('https://images.unsplash.com/photo-1568430462989-44163eb1752f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=500&q=80');
}
.home-container5:hover {
  box-shadow: 5px 5px 10px 10px #d4d4d4;
}
.home-text01 {
  color: var(--dl-color-gray-white);
  font-size: 30px;
  margin-left: 5px;
}
.home-text02 {
  color: var(--dl-color-gray-white);
  margin-left: 8px;
}
.home-button {
  color: var(--dl-color-gray-white);
  align-self: flex-end;
  transition: 0.3s;
  border-color: var(--dl-color-primary-300);
  border-width: 3px;
  margin-right: var(--dl-space-space-unit);
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-unit);
  background-color: var(--dl-color-primary-300);
}
.home-button:focus {
  border-color: var(--dl-color-primary-100);
  border-radius: 10px;
  background-color: var(--dl-color-primary-100);
}
.home-button:hover {
  border-color: var(--dl-color-primary-100);
}
.home-container6 {
  flex: 0 0 auto;
  width: 457px;
  height: 284px;
  margin: 25px;
  display: flex;
  box-shadow: 5px 5px 10px 5px #d4d4d4;
  transition: 0.3s;
  align-items: flex-start;
  border-color: rgba(120, 120, 120, 0.4);
  border-style: dashed;
  border-width: 0px;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  background-size: cover;
  justify-content: flex-end;
  background-image: url('https://i0.wp.com/sunsetobsession.com/wp-content/uploads/2018/12/Sunrise-at-Sea.jpg?fit=1800%2C1200&ssl=1');
}
.home-container6:hover {
  box-shadow: 5px 5px 10px 10px #d4d4d4;
}
.home-text05 {
  color: var(--dl-color-gray-white);
  font-size: 30px;
  margin-left: 5px;
}
.home-text06 {
  color: var(--dl-color-gray-white);
  margin-left: 8px;
}
.home-button1 {
  color: var(--dl-color-gray-white);
  align-self: flex-end;
  transition: 0.3s;
  border-color: var(--dl-color-primary-300);
  border-width: 3px;
  margin-right: var(--dl-space-space-unit);
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-unit);
  background-color: var(--dl-color-primary-300);
}
.home-button1:focus {
  border-color: var(--dl-color-primary-100);
  border-radius: 10px;
  background-color: var(--dl-color-primary-100);
}
.home-button1:hover {
  border-color: var(--dl-color-primary-100);
}

有人能帮忙吗？

谢谢

Answer 1

各种更新....

我安装了 flask 并尝试查看问题是否存在，奇怪的是我没有发现您提供的代码的问题。

这是在网站的某个页面上吗？我看到你列出了 app.route('/') 然后是 app.route('/home') 当我清理了你发布的一些代码，并将样式标签转移到 main.css 我没有看到任何问题。 我会提供截图，如果你需要我的代码！

Screenshot of how it looks for me!

代码如下：

--HTML--

    <!DOCTYPE html>

<html lang="en">
  <head>
    <title>Alienated Quiet Lark</title>
    <meta property="og:title" content="Alienated Quiet Lark" />
    <meta property="twitter:card" content="summary_large_image" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <meta property="twitter:card" content="summary_large_image" />
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='main.css') }}"
    />
  </head>

  <body>
    <div>
      <div id="page_holder1" class="home-container">
        <div id="page_holder" class="home-container1">
          <div id="logo_holder" class="home-container2">
            <img
              src="http://ops-software.com/wp-content/uploads/2021/11/cropped-cropped-1-1.png"
              alt="image"
              id="company_logo"
              class="home-image"
            />
          </div>

          <div id="text_holder" class="home-container3">
            <span id="option_text">Please select an option</span>
          </div>

          <div class="home-container4">
            <div id="whale_flight" class="home-container5">
              <span class="home-text01">Whale Watching Flight</span>
              <span class="home-text02">
                <span>Panaramic Whale Flights and Sceanic</span>
                <br />
                <span>Views - 30 or 40</span>
              </span>
              <button
                id="view_whale"
                name="view_whale"
                class="home-button button"
              >
                View
              </button>
            </div>

            <div id="sceanic_flight" class="home-container6">
              <span class="home-text05">Spectacular Scenic Flights</span>
              <span class="home-text06">
                <span>View the Ocean south and mountians north and MORE!!</span>
                <br />
                <span>15 - 25 - 30 Minutes</span>
              </span>
              <button
                id="view_scenic"
                name="vew_scenic"
                class="home-button1 button"
              >
                View
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

--CSS--

 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

:root {
  --dl-color-gray-500: #595959;
  --dl-color-gray-700: #999999;
  --dl-color-gray-900: #d9d9d9;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-danger-300: #a22020;
  --dl-color-danger-500: #bf2626;
  --dl-color-danger-700: #e14747;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #ffffff;
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-unit: 16px;
  --dl-color-primary-100: #003eb3;
  --dl-color-primary-300: #0074f0;
  --dl-color-primary-500: #14a9ff;
  --dl-color-primary-700: #85dcff;
  --dl-color-success-300: #199033;
  --dl-color-success-500: #32a94c;
  --dl-color-success-700: #4cc366;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-radius-radius-round: 50%;
  --dl-space-space-halfunit: 8px;
  --dl-space-space-sixunits: 96px;
  --dl-space-space-twounits: 32px;
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-space-space-fiveunits: 80px;
  --dl-space-space-fourunits: 64px;
  --dl-space-space-threeunits: 48px;
  --dl-space-space-oneandhalfunits: 24px;
}
.button {
  color: var(--dl-color-gray-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.input {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.textarea {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.list {
  width: 100%;
  margin: 1em 0px 1em 0px;
  display: block;
  padding: 0px 0px 0px 1.5rem;
  list-style-type: none;
  list-style-position: outside;
}
.list-item {
  display: list-item;
}
.teleport-show {
  display: flex !important;
}
.content {
  font-size: 16px;
  font-family: Inter;
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}
.heading {
  font-size: 32px;
  font-family: Inter;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.home-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: 100vh;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
}
.home-container1 {
  flex: 0 0 auto;
  width: 100%;
  height: 705px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.home-container2 {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-self: flex-start;
  margin-top: var(--dl-space-space-fourunits);
  align-items: center;
  justify-content: center;
}
.home-image {
  width: 312px;
  height: 108px;
  object-fit: cover;
}
.home-container3 {
  flex: 0 0 auto;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-container4 {
  width: 100%;
  height: 50%;
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  align-items: center;
  justify-content: center;
}
.home-container5 {
  flex: 0 0 auto;
  width: 457px;
  height: 284px;
  margin: 25px;
  display: flex;
  box-shadow: 5px 5px 10px 5px #d4d4d4;
  transition: 0.3s;
  align-items: flex-start;
  border-color: rgba(120, 120, 120, 0.4);
  border-style: dashed;
  border-width: 0px;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  background-size: cover;
  justify-content: flex-end;
  background-image: url("https://images.unsplash.com/photo-1568430462989-44163eb1752f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=500&q=80");
}
.home-container5:hover {
  box-shadow: 5px 5px 10px 10px #d4d4d4;
}
.home-text01 {
  color: var(--dl-color-gray-white);
  font-size: 30px;
  margin-left: 5px;
}
.home-text02 {
  color: var(--dl-color-gray-white);
  margin-left: 8px;
}
.home-button {
  color: var(--dl-color-gray-white);
  align-self: flex-end;
  transition: 0.3s;
  border-color: var(--dl-color-primary-300);
  border-width: 3px;
  margin-right: var(--dl-space-space-unit);
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-unit);
  background-color: var(--dl-color-primary-300);
}
.home-button:focus {
  border-color: var(--dl-color-primary-100);
  border-radius: 10px;
  background-color: var(--dl-color-primary-100);
}
.home-button:hover {
  border-color: var(--dl-color-primary-100);
}
.home-container6 {
  flex: 0 0 auto;
  width: 457px;
  height: 284px;
  margin: 25px;
  display: flex;
  box-shadow: 5px 5px 10px 5px #d4d4d4;
  transition: 0.3s;
  align-items: flex-start;
  border-color: rgba(120, 120, 120, 0.4);
  border-style: dashed;
  border-width: 0px;
  border-radius: var(--dl-radius-radius-radius8);
  flex-direction: column;
  background-size: cover;
  justify-content: flex-end;
  background-image: url("https://i0.wp.com/sunsetobsession.com/wp-content/uploads/2018/12/Sunrise-at-Sea.jpg?fit=1800%2C1200&ssl=1");
}
.home-container6:hover {
  box-shadow: 5px 5px 10px 10px #d4d4d4;
}
.home-text05 {
  color: var(--dl-color-gray-white);
  font-size: 30px;
  margin-left: 5px;
}
.home-text06 {
  color: var(--dl-color-gray-white);
  margin-left: 8px;
}
.home-button1 {
  color: var(--dl-color-gray-white);
  align-self: flex-end;
  transition: 0.3s;
  border-color: var(--dl-color-primary-300);
  border-width: 3px;
  margin-right: var(--dl-space-space-unit);
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-unit);
  background-color: var(--dl-color-primary-300);
}
.home-button1:focus {
  border-color: var(--dl-color-primary-100);
  border-radius: 10px;
  background-color: var(--dl-color-primary-100);
}
.home-button1:hover {
  border-color: var(--dl-color-primary-100);
}

这也是我目录的图片！ Directory!

忽略目录中的一些文件夹，例如 imagesforstack（它只包含我针对此问题的所有屏幕截图，以便我保持井井有条）

我把它放在组织的服务文件夹中，

templates 是我认为是 html 的默认配置，至少在 99 个错误之后它解决了。

和 .css 的静态（我将其命名为 main.css 但是，我相信您可以使用任何名称来摆脱它，只需确保在您的 py 文件中更改它）

app.py 满足我的烧瓶要求，如路由等

HTML 在 Flask 中无法正确显示，Python

HTML not being displayed properly in Flask, Python

html

css

python

flask

各种更新....

代码如下：