我正在使用flask-python、css、HTML构建一个网站。 我无法获得透明的下拉菜单，我更改了 css 代码的样式并为 HTML 布局提供了正确的代码。 下拉出现在中心，没有任何我在 CSS 样式中指定的样式 如果我只在 HTMl 和 CSS 中为下拉菜单编写代码。下拉菜单工作得很好。 主要python脚本
from flask import Flask,render_template
import os
from flask import send_from_directory
app = Flask(__name__)
@app.route('/')
def home():
return render_template("home.html")
@app.route('/favicon.ico')
def favicon():
return send_from_directory(os.path.join(app.root_path, 'static'),
'favicon.ico', mimetype='image/vnd.microsoft.icon')
@app.route('/projects/')
def projects():
return render_template("projects.html")
if __name__ == "__main__":
app.run(debug = True)
布局代码 layout.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body>
<head>
<meta charset="utf-8">
<title>Developer | Krishan</title>
<link rel = "stylesheet" href ="{{ url_for('static' , filename = 'css/main.css') }}">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<header>
<div class="container">
<h1 class = "logo">Krishan K B's Webpage</h1>
<strong><nav>
<ul class = "menu">
<li><a href ="{{ url_for('home') }}">Home</a></li>
<li><a href ="{{ url_for('projects') }}">Projects</a>
<ul class = "menu">
<li><a>Disaster Managment</a></li>
<li><a>Data Analytics</a></li>
<li><a>Volcanoes & Population</a></li>
<li><a>Games</a></li>
<li><a>Book App</a></li>
</ul>
</li>
</ul>
</nav></strong>
</div>
</header>
<div class = "container">
{%block content%}
{%endblock%}
</div>
</body>
</html>
样式 css 代码 style.css
body{
margin: 0 auto;
text-align: center;
font-family: brandon-grotesque,HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}
ul {
margin: 0px;
padding: 0px;
list-style : none;
}
ul li {
float : left;
width : 200px;
height : 40px;
background-color: #020202;
opacity : .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color : white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
h1{
text-align: center;
font-family: 'Yellowtail', cursive;
color: #e46922;
margin: 50px auto 0 auto;
font-size:60px;
}
h2{
color:#66bfbf;
text-align: center;
font-family:'monntserrat',sans-serif;
padding-bottom: 10px;
}
h3{
color: #11999e;
font-family:'monntserrat',sans-serif;
}
p{
line-height: 2;
width: 40%;
margin: 40px auto 60px;
}
hr{
border: dotted #eaf6f6 6px;
border-bottom: none;
width: 6%;
margin: 100px auto;
}
a{
color: #80b838;
font-family:'monntserrat',sans-serif;
margin: 10px 20px;
text-decoration: none;
}
a:hover{
color: #eaf6f6;
}
.head{
color: #66bfbf;
font-size: 140%;
}
.top{
background-color: #E4F9F5;
position: relative;
padding-top: 100px;
}
.middle{
margin: 100px 0;
}
.bottom{
background-color: #66bfbf; ;
padding: 50px 0 10px;
}
.intro{
width: 30%;
margin: auto;
}
.top-cloud{
position: absolute;
right: 180px;
top: 30px;
}
.below-cloud{
position: absolute;
left: 150px;
bottom: 230px;
}
.img{
float: left;
margin-left: 320px;
}
.img-code{
float: right;
margin-right: 320px;
}
.skils{
width: 30%;
margin: auto;
}
.copyright{
color: #eaf6f6;
font-size: 0.75rem;
}
.contact-message{
width: 40%;
margin: 40px auto 60px;
}
.contact{
padding-bottom: 100px;
}
.btn {
margin: 100px;
background: #45b29a;
background-image: -webkit-linear-gradient(top, #45b29a, #45b29a);
background-image: -moz-linear-gradient(top, #45b29a, #45b29a);
background-image: -ms-linear-gradient(top, #45b29a, #45b29a);
background-image: -o-linear-gradient(top, #45b29a, #45b29a);
background-image: linear-gradient(to bottom, #45b29a, #45b29a);
-webkit-border-radius: 6;
-moz-border-radius: 6;
border-radius: 6px;
font-family: Arial;
color: #1b7f69;
font-size: 21px;
padding: 10px 20px 10px 20px;
text-decoration: none;
}
.btn:hover {
background: #45b29a;
background-image: -webkit-linear-gradient(top, #45b29a, #1b7f69);
background-image: -moz-linear-gradient(top, #45b29a, #1b7f69);
background-image: -ms-linear-gradient(top, #45b29a, #1b7f69);
background-image: -o-linear-gradient(top, #45b29a, #1b7f69);
background-image: linear-gradient(to bottom, #45b29a, #1b7f69);
text-decoration: none;
}
我收到的输出： enter image description here
答案 0 :(得分：0)
我认为你的 css 没有被flask 正确渲染，你需要hard reload
在此之后转到开发人员工具 > 源选项卡，然后搜索 css 文件并交叉检查它是否正确呈现。
答案 1 :(得分：0)
谢谢，我确实重新加载了它，它可以工作，但现在我无法在主页中看到下拉列表或任何菜单，但是当我键入 /projects/ 并将网址本地主机打开时，我可以在我的项目网页中看到它网址。所有 css 样式更改都运行良好，但现在我的主页中没有选项菜单。 这是我的主页，没有下拉菜单或任何菜单选项可以转到项目网页： enter image description here
这是我的项目网页，其中有一个下拉菜单和一个包含所有样式的菜单。 enter image description here
主页代码：
{%extends "layout.html"%}
{%block content%}
<div class = "home">
<div class="top">
<img class="top-cloud" src="{{ url_for('static' , filename = 'images/clo.png') }}" alt="cloud-img" height="200px">
<h1> I'm Krishan.</h1>
<p class="head">A Back End Developer.</p>
<img class="below-cloud" src="{{ url_for('static' , filename = 'images/clo.png') }}" alt="cloud-img" height="200px">
<img src="{{ url_for('static' , filename = 'images/land.svg') }}" alt="mounntains-img" height="350px">
</div>
<div class="middle">
<img class="profile" src="{{ url_for('static' , filename = 'images/profile.png') }}" alt="profile" height="150px" >
<h2>Hi.</h2>
<P class="intro"> I'm a Programme developer,web developer and designer,UI Designer based in Bangalore,India.I have a passion for web app,data analytics,web design,data analytics and coding and love to create new apps,website for web and mobile devices.</P>
</div>
<hr>
<div>
<h2>What I can do.</h2>
<img class="img" src="{{ url_for('static' , filename = 'images/coding.png') }}" alt="" height="150px" >
<p>I like to keep it simple. My goals is to develop a new programme which would be beneficial for the people and be enviromen friendly.</p>
</div>
<hr>
<div class="skill">
<h2>Develop what you need.</h2>
<img class="img-code" src="{{ url_for('static' , filename = 'images/code-img.png') }}" alt="" height="150px" >
<p class="skills">I'm a developer, so I know how to create your website,application or any other programme to run across devices using the latest technologies available.</p>
</div>
<hr>
<div class="contact">
<h2>Get in touch.</h2>
<h3>I’m currently available for freelance work.</h3>
<p class="contact-message">if you have a project that you want to get started, think you need my help with something or just fancy saying hey, then get in touch.</p>
<a class="btn" href="mailto:krishankbhushan@gmail.com">message me</a>
</div>
</div>
<div class="bottom">
<a class="footer-link" href="https://www.linkedin.com/in/krishan-k-b-0a164b125/">Linkedin</a><i class="fab fa-twitter"></i>
<a class="fab fa-twitter" href=" https://twitter.com/krishankbhushan"><i class="fa fa-twitter"></i>Twitter</a>
<i class="fa fa-twitter" style="font-size:24px"></i>
<p class="copyright">©️ 2021 Krishan.All rights reserved.</p>
</div>
</div>
{%endblock%}