CSS样式没有正确填充

时间:2017-02-21 18:25:36

标签: python html css flask jinja2

我有一个烧瓶应用程序我正在构建,我正在努力使外观更好,但颜色没有按预期填充。知道为什么颜色没有正确通过。 (我在IE浏览器和Chrome浏览器中看过它并且它是一样的。)

Example of Output - Colors are not correct

文件夹结构是(还有其他HTML文件,但它们与重新创建问题无关):

main/site_tables.py
main/templates/view.html
main/static/style.css

python代码(site_tables.py)是:

#Import various necessary packages
from flask import render_template, Flask, request
import pandas
from pandas.tseries.holiday import USFederalHolidayCalendar
import datetime
import urllib2
import os.path

#Start App from Flask
app = Flask(__name__)

#Set IP Address and Port for outputting web address
out_IP_address = "0.0.0.0"
out_port = 5000

#Set location for original files being read in and edit file locations
#Kept seperate for audit reasons
origLoc = "C:/Orig"
editLoc = "C:/Edit"

#Set name of files prefix
fileName = "Rand_Calls"

#Define holidays for long period of time
cal = USFederalHolidayCalendar()
holidays = cal.holidays(start='2017-01-01', end='2030-12-31').to_pydatetime()

#Set first empty link - tables
@app.route("/tables/")
#Set dynamically populated links tables/date where date is formatted YYYYMMDD
@app.route("/tables/<date>",methods=['GET', 'POST'])
def j_show_html(date):
    #date provided by webaddress for example: date = "20170214"
    #Format date to datetime
    date2 = datetime.datetime.strptime(date,"%Y%m%d")
    if request.method == "GET":
        #If date hasn't occured; display why missing
        if date2 > datetime.datetime.today()  - datetime.timedelta(days=2):
            return render_template('future.html',
            labels = urllib2.unquote(date.encode('ascii','ignore')))
        #If date was a holiday; display why missing
        elif date2 in holidays:
            return render_template('holiday.html',
            labels = urllib2.unquote(date.encode('ascii','ignore')))
        #If date was a weekend; display why missing
        elif date2.weekday() in (5,6):
            return render_template('weekend.html',
            labels = urllib2.unquote(date.encode('ascii','ignore')))
        #Load report; if not edited before then from original location
        else:
            if os.path.isfile(editLoc+"/"+fileName+"_"+date+"_"+date+".xlsx"):
                report = pandas.read_excel(editLoc+"/"+fileName+"_"+date+"_"+date+".xlsx")
            else:
                report = pandas.read_excel(origLoc+"/"+fileName+"_"+date+"_"+date+".xlsx")
            return render_template('view.html',
            tables=[report.to_html(index=False)],
#            titles = ['na'],
            labels = urllib2.unquote(date.encode('ascii','ignore')))

#Call the app
if __name__ == "__main__":
    app.run(host=out_IP_address,port=out_port,debug=True)

HTML文件(view.html)是:

<!-- Jinja2 code for table page creation -->
<!doctype html>
<title>{{labels}}</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page contenteditable="">
  <h1>QA_Report_{{labels}}</h1>
  {% for table in tables %}
    {{ table|safe }}
  {% endfor %}
</div>

CSS文件是(style.css):

body            { font-family: sans-serif;}
a, h1, h2       { color: #d03027; } /*Color = Specific Red */
h1, h2          { margin: 0; }
h1              { border-bottom: 2px solid #ceccd0; } /*Color - Light Grey*/
h2              { font-size: 1.2em; }

table.dataframe, .dataframe th, .dataframe td 
{
  border: none;
  border-bottom: 1px solid #ceccd0; /*Color = Light Grey*/
  border-collapse: collapse;
  text-align:left;
  padding: 10px;
  margin-bottom: 40px;
  font-size: 0.9em;
}

tr:nth-child(odd)      { background-color:#ffffff; } /*Color = White            */
tr:nth-child(even)  { background-color:#004977; color:#ffffff; } /*Color = Specific Blue */
tr:hover            { background-color:#d03027; } /*Color = Specific Red  */

1 个答案:

答案 0 :(得分:0)

找出问题所在。

网页正在缓存中。我清除了浏览器历史记录,并且发生了变化。 (使用Ctrl + Shift + R重新加载页面也会允许新的更改)。

将此作为答案发布,以防止任何人遇到同样的问题。