python - 获取 web.py 以呈现调用 css 文件的 html 页面时出错

标签 python html css web.py

好的,我有了名为 app.py 的 web.py 文件。 app.py 引用 index.htmlfoo.html

这两个 html 文件调用都很好,我的意思是当我运行 app.py 并转到 http://localhost:8080/http://localhost:8080/Foo 它们都可以很好地显示网页,问题出在 foo.html 文件上。我在那里有一个很大的部分,应该使用 rotate.css 文件并使该部分中的文本旋转。问题是文本甚至没有显示。

文件如下:

app.py

import web

urls = (
    '/', 'Index',
    '/Foo', 'Foo'
)

app = web.application(urls, globals())

render = web.template.render('templates/')

class Index(object):
    def GET(self):
        greeting_Index = "Hello World"
        return render.index(greeting = greeting_Index)

class Foo(object):
    def GET(self):
        greeting_Foo = 'FooBAR'
        return render.foo(greeting = greeting_Foo)

if __name__ == "__main__":
    app.run()

foo.html

$def with (greeting)
$var cssfiles: static/rotate.css

<html>
    <head>
        <meta charset="UTF-8">
        <title>Foobar</title>
    </head>

<body>
$if greeting:
    <em style="color: red; font-size: 5em;">Welcome to the Foo bar. $greeting.</em>
$else:
    Herro world!

    <section class="rw-wrapper">
        <h2 class="rw-sentence">
            <span>Real poetry is like</span>
            <span>creating</span>
            <div class="rw-words rw-words-1">
                <span>breathtaking moments</span>
                <span>lovely sounds</span>
                <span>incredible magic</span>
                <span>unseen experiences</span>
                <span>happy feelings</span>
                <span>beautiful butterflies</span>
            </div>
            <br />
            <span>with a silent touch of</span>
            <div class="rw-words rw-words-2">
                <span>sugar</span>
                <span>spice</span>
                <span>colors</span>
                <span>happiness</span>
                <span>wonder</span>
                <span>happiness</span>
            </div>
        </h2>
    </section>

</body>

</html>

rotate.css

.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: 'Bree Serif';
    padding: 10px;
}

.rw-sentence{
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.rw-sentence span{
    color: #444;
    white-space: nowrap;
    font-size: 200%;
    font-weight: normal;
}

.rw-words{
    display: inline;
    text-indent: 10px;
}

.rw-words span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    color: #6b969d;
}

.rw-words-1 span{
    animation: rotateWordsFirst 18s linear infinite 0s;
}

.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
}

.rw-words span:nth-child(2){
    animation-delay: 3s;
    color: #6b889d;
}

.rw-words span:nth-child(3){
    animation-delay: 6s;
    color: #6b739d;
}

.rw-words span:nth-child(4){
    animation-delay: 9s;
    color: #7a6b9d;
}

.rw-words span:nth-child(5){
    animation-delay: 12s;
    color: #8d6b9d;
}

.rw-words span:nth-child(6){
    animation-delay: 15s;
    color: #9b6b9d;
}

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

最佳答案

根据 http://webpy.org/cookbook/staticfiles您可能必须更改 apache.conf 文件以允许 apache 提供这些文件。

而且我确实注意到,在您的 html 文件中,您实际上没有链接到 css 文件

<link rel="stylesheet" href="static/rotate.css" type="text/css">

头部的某个地方丢失了,或者因为你将它用作变量,所以它应该是

<link rel="stylesheet" href="$cssfiles" type="text/css">

关于python - 获取 web.py 以呈现调用 css 文件的 html 页面时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21999502/

相关文章:

javascript - 任何 Python 替代 Selenium 以编程方式登录需要 JavaScript 登录的网站?

python - 为最大成对匹配排序数组

python - 感知器学习算法不起作用

javascript - 使用Javascript向服务器发送多个请求,直到服务器返回200

jquery - 用HTML5和Canvas画出网站效果

javascript - 新的 DIV 出现在另一个 Div 的悬停/鼠标悬停上

html - 100% 宽度 Table & Div 大小不完全一样

python - tempfile 和 listdir 奇怪的行为

jquery - 防止循环

css - Highcharts/Highstock : Auto scroll on the graph with overflow-x, 而不是滚动条