【发布时间】：2014-02-24 21:34:08
【问题描述】：
好的，所以我有一个名为 app.py 的 web.py 文件。
app.py 引用 index.html 和 foo.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; }
}
【问题讨论】：
-
看起来您没有指定 css 文件的路由，因此当客户端请求该 css 文件时，服务器不知道要做什么，如果您使用现代浏览器，请检查开发中的网络选项卡控制台，看看你得到的是
404还是200 -
我收到了
200，是不是很糟糕，我很抱歉我对 html 相当不熟悉。另外，我的印象是foo.html文件中的$var cssfiles: static/rotate.css指向css 文件 -
自从 Arron 去世后，我没有接触过 web.py，但我相信如果您在静态文件夹中有文件，它们会自动提供，
200表示请求是OK和404表示Not Found他们被称为HTTP Response codes -
所以您认为我在
app.py文件中缺少关于rotate.css文件的某种类型的引用？ -
是的，这将是我的最佳猜测，我创建了一个答案来更好地解释我认为可能是什么问题。