【发布时间】：2020-09-04 08:46:27
【问题描述】：
我有一个简单的 HTML/CSS 文件：---
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="Creator" content="Aakash Gupta">
<meta name="From YouTube" content="Easy Tutorials">
<title>Complete Website Design</title>
<link rel="stylesheet" type="text/css" href="../static/tutorial_website.css">
</head>
<body>
<section class="header">
<div class="container">
<img src="../static/tutorial/images/logo.png" class="logo">
<div class="header-text"><h2>Tell me and I forget. Teach me and I remember.<br>Involve me and I learn’<br>–Benjamin Franklin</h2>
<br>
<span class="square"></span>
<p>
In 2014, India’s global education ranking slipped to 93. This, together with a series of scams faced by the Indian education sector, calls for an immediate need to bring reforms in our education system. Indian Education System has been synonymous with ‘Examinations’, ‘Board Exams’, ‘Entrance Exams’, ‘Marks’, etc.
</p>
<button class="common-btn">Read More</button>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
</div>
</section>
<nav id="side-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">FEATURES</a></li>
<li><a href="#">COURSES</a></li>
<li><a href="#">OFFER</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<img src="../static/tutorial/images/menu.png" id="menu-btn">
<!--about-->
<section class="about">
<div class="about-left-col">
<img src="../static/tutorial/images/about.png">
</div>
<div class="about-right-col">
<div class="about-text">
<h1>About Us</h1>
<p>
We are a consultancy that helps organisations achieve exceptional results by finding and applying practical solutions to complex business and people challenges. We interrupt existing patterns of thinking and instigate powerful, sustainable change.
</p>
<h2>One learns from books and example only that certain things can be done. Actual learning requires that you do those things.</h2>
<h3>---Frank Herbert</h3>
</div>
</div>
</section>
<!--FEATURES-->
<section class="features">
<div class="features-row">
<div id="features-col">
<img src="../static/tutorial/images/pic-1.png">
<h4>Learn Anywhere</h4>
<p>Switch between your computer,tablet or mobile device</p>
</div>
<div id="features-col">
<img src="../static/tutorial/images/pic-2.png">
<h4>Expert Teachers</h4>
<p>Learn from industry experts who are passionate about teachinhg</p>
</div>
<div id="features-col">
<img src="../static/tutorial/images/pic-3.png">
<h4>Unlimited Access</h4>
<p>Choose what you'd like to learn from out extensive subscription library</p>
</div>
</div>
</section>
<div class="features-btn">
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
<button class="common-btn">Start Free Trial</button>
</div>
<!--courses-->
<section class="courses">
<div class="container-course-row">
<div class="course-left-col">
<div class="course-text">
<h1>Browse our Top<br>Courses</h1>
<span class="square"></span>
<p>C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language, or "C with Classes". The language has expanded significantly over time, and modern C++ now has object-oriented, generic, and functional features in addition to facilities for low-level memory manipulation. </p>
<button class="common-btn">View all Courses</button>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
</div>
<div class="course-right-col">
<img src="../static/tutorial/images/course.png">
</div>
</div>
</section>
<!--offer-->
<section class="Offer">
<div class="about-left-col">
<img src="../static/tutorial/images/offer.png">
</div>
<div class="about-right-col">
<div class="about-text">
<h1>Limitless learning,<br>Limitless possibilities</h1>
<p style="margin: 20px 0">
We are a consultancy that helps organisations achieve exceptional results by finding and applying practical solutions to complex business and people challenges
</p>
<span class="square"></span>
<br>
<button class="common-btn" style="margin: 25px 0">Start Free Trial</button>
<br>
<div class="line">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</section>
<!--Contact-->
<section id="contact">
<div class="container-contact-row">
<div class="contact-left-col">
<h1>Sign Up to join our<br>learning community</h1>
<form>
<input type="text" placeholder="Enter Name">
<input type="email" placeholder="Enter e-mail">
<input type="password" placeholder="Enter password">
<div class="btn-box">
<button class="common-btn">Sign-up</button>
<button class="common-btn">Start Free Trial</button>
</div>
</form>
<div class="line" style="padding-left: 40px;">
<span class="line-1"></span><br>
<span class="line-2"></span><br>
<span class="line-3"></span>
</div>
</div>
<div class="contact-right-col">
<img src="../static/tutorial/images/contact.png">
</div>
</div>
</section>
<section class="footer">
<div class="container-footer-row">
<hr>
<div class="footer-left-col">
<div class="footer-links">
<div class="link-title">
<h4>Product</h4>
<small>Our Plan</small><br>
<small>Free Trial</small>
</div>
<div class="link-title">
<h4>About Us</h4>
<small>Request Demo</small><br>
<small>FAQs</small>
</div>
<div class="link-title">
<h4>Support</h4>
<small>Features</small><br>
<small>Contact Us</small>
</div>
<div class="link-title">
<h4>Explore</h4>
<small>Find a nonprofit</small><br>
<small>Coporate Solution</small>
</div>
</div>
</div>
<div class="footer-right-col">
<div class="footer-info">
<div class="copyright">
<small>support@Xypo.com</small><br>
<small>copyright 2020 Xypo</small>
</div>
<div class="footer-logo">
<img src="../static/tutorial/images/logo.png">
<button class="common-btn">English</button>
</div>
</div>
</div>
</div>
</section>
<!--icons-->
<div class="social-icons">
<img src="../static/tutorial/images/facebook.png">
<img src="../static/tutorial/images/instagram.png">
<img src="../static/tutorial/images/twitter.png">
<img src="../static/tutorial/images/linkedin.png">
</div>
<script type="text/javascript">
var menubtn = document.getElementById("menu-btn");
var sidenav = document.getElementById("side-nav");
sidenav.style.right= "-250px";
menubtn.onclick = function(){
if (sidenav.style.right == "-250px"){
sidenav.style.right="0";
}
else{
sidenav.style.right="-250px";
}
}
</script>
</body>
</html>
烧瓶：--
from flask import Flask
from flask import request,render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('Tutorial_website.html')
if __name__ == '__main__':
app.run(debug=True)
我已尝试遵守所有规则（据我所知），例如将 html 文件保存在“模板”文件夹中，将 css 文件和其他图像保存在“静态”文件夹中！但是网站上仍然看不到 CSS 和其他图像！ 目录结构是这样的：
python programs\
first_template.py
templates\
Tutorial_website.html
static\
tutorial_website.css
tutorial\
images\
...
我错过了什么？
编辑：我设法让照片可见，但 CSS 仍然没有应用，而不是 CSS 和图像都在同一个文件夹中，即“静态”！
【问题讨论】：
-
您是否尝试过 CRL+F5 并确保在
networks选项卡中文件有 404 错误消息？
标签： python html css python-3.x flask