Question

我想在使用Udacity的Web开发课程时，使用Google App Engine创建的简单Web应用程序的HTML部分添加一些样式。但是，我添加的CSS文件似乎只部分应用于页面。这是HTML代码：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="../static/main.css" />
    <title>What do ya wanna do?</title>
</head>

<body>
    <form class="wrapper">
        <a value="birth" class="myButton">Mystify your text!</a>
        <a value="rot13" class="myButton">Enter your birthday</a>
        <a value="signup" class="myButton">Feel like signing up?</a>
    </form>
</body>
</html>

这是我的CSS文件（我没有很多CSS技能，所以我使用http://www.bestcssbuttongenerator.com/创建了这个：）

.wrapper {
    position:absolute;
    top: 30%;
    left: 25%;
    margin-top: -20px;
    margin-left: -10px;

.myButton {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    background-color:#ededed;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    border-radius:7px;
    display:inline-block;
    cursor:pointer;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:21px 45px;
    text-decoration:none;
}
.myButton:hover {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));
    background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);
    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);
    background-color:#dfdfdf;
}
.myButton:active {
    position:relative;
    top:1px;
}

最后，这是我的app.yaml文件：

application: appudacityhelloworld
version: 1
runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /static
  static_dir: static

- url: /.*
  script: hello.application

libraries:
- name: jinja2
  version: latest

似乎有效的CSS的唯一部分是<form>的位置。我在/templates文件夹中有我的HTML代码，在/static文件夹中有我的CSS，除了CSS文件的内容外，一切看起来都像我开发的另一个应用程序。我已经尝试了一切，我开始认为GAE在处理CSS时有一些限制。我错过了什么或是这样吗？

Answer 1

你在.wrapper css规则的末尾错过了大括号。

变化：

.wrapper {
    position:absolute;
    top: 30%;
    left: 25%;
    margin-top: -20px;
    margin-left: -10px;

为：

.wrapper {
    position:absolute;
    top: 30%;
    left: 25%;
    margin-top: -20px;
    margin-left: -10px;
}

一切都适用。

CSS文件仅部分适用于Google App Engine

1 个答案: