Question

好的，我有一个名为app.py的web.py文件。 app.py引用index.html和foo.html。

这两个html文件都调用得很好，我的意思是当我运行app.py并转到http://localhost:8080/和http://localhost:8080/Foo这两个网页都显示网页就好了，问题是与foo.html文件tho。我在那里有一个大的部分应该使用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; }
}

Answer 1

根据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">

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

1 个答案: