gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:25:38 25 4
gpt4 key购买 nike

我想为我在参加 Udacity 的网络开发类(class)时使用 Google App Engine 创建的一个简单网络应用程序的 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> 的位置.我的 HTML 代码在 /templates 中文件夹和我的 CSS 在 /static文件夹,除了 CSS 文件的内容外,一切看起来都和我开发的另一个应用程序一模一样。我已经尝试了一切,我开始认为 GAE 在处理 CSS 方面可能有一些局限性。我是不是遗漏了什么或者是这样吗?

最佳答案

您在 .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;
}

一切都适用。

关于html - CSS 文件仅部分适用于 Google App Engine,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23743095/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com