简体   繁体   English

CSS样式无法正确填充

[英]CSS Style Not Populating Correctly

I have a flask app I'm building that I'm trying to make look better but the colors aren't populating as expected. 我正在构建一个烧瓶应用程序,试图使它看起来更好,但是颜色没有按预期填充。 Any idea why the colors don't come through correctly. 知道为什么颜色无法正确显示的任何想法。 (I've viewed it in IE and Chrome and it's the same). (我已经在IE和Chrome中查看了它,并且是相同的)。

输出示例-颜色不正确

The folder structure is (there are other HTML files, but they don't matter for recreating the issue): 文件夹结构为(还有其他HTML文件,但是它们对于重新创建问题无关紧要):

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

The python code (site_tables.py) is: 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)

The HTML file (view.html) is: 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>

The CSS file is (style.css) is: 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  */

Figured out the issue. 找出问题。

The webpage was being cached. 该网页已被缓存。 I cleared the browser history and the changes came through. 我清除了浏览器的历史记录,并进行了更改。 (Reloading the page with Ctrl+Shift+R will allow new changes to come through as well). (使用Ctrl + Shift + R重新加载页面也将允许进行新的更改)。

Posting this as an answer in case it helps anyone running into the same issue. 将其发布为答案,以防遇到任何相同问题的人。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM