運行Flask時CSS無法正常工作

我正在使用CMDER創建我的網頁，我試圖讓我的CSS正常運行，但是CSS的某些部分無法正常工作。例如我的#mainPicture不顯示，我的contentBox和背景顏色不起作用。這是我的css文件。運行Flask時CSS無法正常工作

body { 
margin: 0; 
padding: 0; 
text-align: left; 
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif; 
font-size: 13px; 
color: #061C37; 
background: #014D5D url_for('static', filename='images/background.png'); 
background-repeat:repeat-x; 
} 
* 
{ 
    margin: 0 auto 0 auto; 
text-align:left;} 

#page 
{ 
    display: block; 
    height:auto; 
    position: relative; 
    overflow: hidden; 
    width: 800px; 
} 

.topNaviagationLink 
{ 
text-align:center; 
position:relative; 
margin-top:30px; 
font-size:16px; 
margin-left:-10px; 
width:121px; 
height: 35px; 
line-height: 35px; 
float:left; 
color:#CEEAEE; 
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif; 
} 


.topNaviagationLink a 
{ 
text-decoration:none; 
color:#CDE2FC; 
} 

.topNaviagationLink a:hover 
{ 
text-align:center; 
border-bottom:none; 
color:#0C61C9; 
display: block; 
width:121px; 
height: 35px; 
line-height: 35px; 
background-image:url_for('static', filename='images/tab.png'); 

} 

#mainPicture 
{ 
width:670px; 
height:345px; 
background-color:#FFFFFF; 
} 

#mainPicture 
{ 
width:670px; 
height:345px; 
background-color:#FFFFFF; 
} 

#mainPicture .picture 
{ 
position:relative; 
width:650px; 
height:325px; 
top:10px; 
background-image:url_for('static', filename='images/hudson1.jpg'); 
background-repeat:no-repeat; 
margin-left:10px; 
} 

#headerTitle 
{ 
position:relative; 
top:30px; 
left:40px; 
font-size:25px; 
color:#061C37; 
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif; 
} 

#headerSubtext 
{ 
position:relative; 
top:30px; 
left:50px; 
font-size:14px; 
color:#008CBA; 
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif; 
} 

.contentBox 
{ 
width:670px; 
height:auto; 
background-color:#FFFFFF; 
margin-top:10px; 
} 

.contentBox .innerBox 
{ 
position:relative; 
width:650px; 
height:auto; 
top:10px; 
margin-left:10px; 
background-image:url(content_back.png)url_for('static', filename='images/content_back.png'); 
background-repeat:repeat-x; 
padding-bottom:35px; 
} 

.contentTitle 
{ 
font-size:19px; 
margin-bottom:0px; 
padding-top:18px; 
margin-left:15px; 
margin-top:15px; 
} 

.contentText 
{ 
font-size:13px; 
line-height:24px; 
margin-left:13px; 
margin-right:13px; 
} 

html, body { 
text-align: center; 
} 
p {text-align: left;} 

input[type=submit] { 
background-color: white; 
color: black; 
border: 2px solid #008CBA; 
padding: 16px 32px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
font-size: 14px; 
font-family:"Adobe Garamond Pro Bold", Georgia, "Times New Roman", Times, serif; 
margin: 4px 2px; 
-webkit-transition-duration: 0.4s; /* Safari */ 
transition-duration: 0.4s; 
cursor: pointer; 
} 
input[type=submit]:hover { 
background-color: #061C37; 
color: white; 
}

我的應用

webapp.py

靜態文件夾 - cssfolder --imagesfolder

模板文件夾 - index.html的 - newyork.html

這是新的york.html：

<!doctype html> 
<head> 
<title>New York</title> 
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}"> 
</head> 
<div class="innerBox"> 
<h2>New York</h2>  
<div class="contentText"><p> 
New York is a state in the northeastern United States, and is the 27th-most extensive, fourth-most populous, and seventh-most densely populated U.S. state. New York is bordered by New Jersey and Pennsylvania to the south and Connecticut, Massachusetts, and Vermont to the east. The state has a maritime border in the Atlantic Ocean with Rhode Island, east of Long Island, as well as an international border with the Canadian provinces of Quebec to the north and Ontario to the west and north. 
</p> 
<img src="{{ url_for('static', filename='images/newyork1.jpg') }}" alt="New York" style="width:750px;height:350px;"> 
<p> 
The state of New York, with an estimated 19.8 million residents in 2015, is often referred to as New York State to distinguish it from New York City, the state's most populous city and its economic hub. With an estimated population of 8.55 million in 2015, New York City is the most populous city in the United States and the premier gateway for legal immigration to the United States. The New York City Metropolitan Area is one of the most populous urban agglomerations in the world. New York City is a global city, exerting a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment, its fast pace defining the term New York minute. 
</p></div> 
</div>

，這是我的index.html：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$("#newyorkbutton").click(function(){ 
$.get("/newyork", function(data, status){ 
$("#city").html(data); 
}); 
}); 
}); 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>A Blog ABout My Travels</title> 
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static', filename='css/theme.css') }}"> 
</head> 

<body> 

<div id="mainPicture"> 
    <div class="picture"> 
     <div id="headerTitle">Places I've Been</div> 
     <div id="headerSubtext">A Blog About My Travels</div> 
    </div> 
</div> 
<div id="page"> 
    <input type="submit" name="NewYork" id="newyorkbutton" value="New York"> 
</div> 
    <div id="city" class="contentBox"> 
    <div class="innerBox"> 
     <h2>Welcome to My Travels</h2> 
     <div class="contentText"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br /> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>   
</div> 
</div> 

</body> 
</html>

它帶來了在紐約模板不錯，但它並沒有內容框之內拿出。這些按鈕也完美地顯示了我在問題頂部提到的問題。

任何幫助將是偉大的。

來源

2016-11-29 Dylan

'url_for（）'函數不會在你的CSS文件中工作，因爲它不會被Jinja渲染。用相對路徑替換它，它應該工作。 – abigperson

css文件不是模板。你不能使用像{{}}這樣的模板語義或者像url_for這樣的函數。當生成的HTML到達那裏時，它只是簡單地包含在瀏覽器中。 – joecascio

我有這個相同的問題。 HTML文件中的CSS URL不是服務器URL數據庫中的文件。如果您正在使用燒瓶，請將此代碼添加到您的flask.py文件中。

@app.route('/css/<file>') # the route name, <file> is like a request.args 
def css(): 
    return render_template(file) # the file variable is created 
           # when a the <file> is something.

然後把你的CSS文件在你的模板文件夾，把文件名的HTML像這樣，<link rel="stylesheet" href="/file.css">

你可以做同樣的任何其他文件類型。

來源

2016-11-29 20:04:55

運行Flask時CSS無法正常工作

回答

相關問題