使用Google App Engine渲染html文件后，为什么在html文件中没有处理css命令？

Question

So I have a basic form in my application that I am hosting using Google App Engine. 因此，我的应用程序中有一个使用Google App Engine托管的基本表单。 When I type in a particular query, say 'CN', I want the CN.html file to be rendered. 当我键入一个特定的查询时，说“ CN”，我希望呈现CN.html文件。 I have redirected my path and stuff, and used if-else to allow CN.html file to be rendered when 'CN' is queried. 我已经重定向了路径和内容，并使用if-else允许在查询“ CN”时呈现CN.html文件。 However, all the inline CSS commands inside the CN.html are not considered, and all I get redirected to when I query 'CN' is to the basic HTML document void of all the CSS commands. 但是，不会考虑CN.html中的所有内联CSS命令，并且当我查询“ CN”时，我重定向到的所有内容都是所有CSS命令都没有的基本HTML文档。 Also, the images are not displayed. 同样，不显示图像。

Now, I have put the CN.html file in a folder called 'templates' in my directory and all the images in a folder called 'images'. 现在，我将CN.html文件放在目录中的“模板”文件夹中，并将所有图像放在“图像”文件夹中。

NOTE- 'templates' and 'images' also contain the html file of my front page and their images respectively. 注意-“模板”和“图像”还分别包含我的首页的html文件及其图像。 I don't think it should be a problem, though, right? 我认为这不应该是问题，对吗？

Here, check the live example of my problem yourself: 在这里，请亲自检查我的问题的实际示例：

go to www.deploymentapp.appspot.com and search for 'Computer Networks'. 请访问www.deploymentapp.appspot.com并搜索“计算机网络”。

So what seems to be the problem? 那么，似乎是什么问题呢？

EDIT(Including all the source code files for better understanding) 编辑（包括所有源代码文件以便更好地理解）

CN.html CN.html

<html>
<head>
    <title>Computer Network</title>
<link rel = "stylesheet" href = "/stylesheets/cn.css" type = "text/css">
</head>
<body>
    <div id='cn'>
        <img src = "/images/CN.jpg" width = '300px' height = '400px'>
    </div>
    <div id = 'cn_heading'>
        <h1>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbspComputer Networks</h1>
        <p class = 'pname'>by Andrew Tanenbaum</p>
    </div>
    <div id = 'buy'>
        <a href = '#'><img src = '/images/buy-now.jpg' width = '300px'     height = '100px'></a>
    <div id = 'details'>
        <p>Authored by : Andrew S. Tanenbaum, David J. Wetherall</p> 
        <p>Publisher : Pearson </p>
        <p>Price : Rs. 550 (Inclusive of taxes)</p>
    </div>

    <div id = 'description'>
            <p><h3>&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  COMPUTER NETWORKS 5TH EDITION</h3>
Computer Networks, Fifth Edition, is the ideal introduction to the networking field. This bestseller reflects the latest networking technologies with a special emphasis on wireless networking, including 802.11, 802.16, Bluetooth&trade, and 3G cellular, paired with fixed-network coverage of ADSL, Internet over cable, gigabit Ethernet, MLPS, and peer-to-peer networks. Notably, this latest edition incorporates new coverage on 3G mobile phone networks, Fiber to the Home, RIFD, delay-tolerant networks, and 802.11 security, in addition to expanded material on Internet routing, multicasting, congestion control, quality of service, real-time transport, and content distribution.

Tanenbaum takes a structured approach to explaining how networks work from the inside out. He starts with an explanation of the physical layer of networking, computer hardware and transmission systems then works his way up to network applications.

Salient Features
<ul>
<li>Wireless networks (802.12 and 802.16)</li>
<li>The 3G networks used by smart phones</li>
<li>RFID and sensor networks</li>
<li>Content Distribution using CDNs</li>
<li>Peer-to-peer networks</li>
<li>Real-time media (from stored, streaming, and live sources)</li>
<li>Internet telephony (voice over IP)</li>
<li>Delay-tolerant networks</li>
    </ul>
</p>
       </div>


        </body>
</html>

CN.css CN.css

#cn
{
    margin-top : 50px;
    margin-left : 50px;
    box-shadow : 5px 5px 5px black;
    width : 300px;

}
#cn_heading
{
    margin-top : -448px;
    margin-left : 425px;

}

.pname
{       font-style : italic;
}

#buy
{
    margin-top : 370px;
    margin-left : 50px;

}
#details
{
    margin-left : 425px;
    margin-top : -450px;
}

#description
{
    margin-left : 425px;
    margin-top : 20px;
}

.yaml file .yaml文件

application: deploymentapp
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico

- url: /images
  static_dir: images

- url: /stylesheets/
  static_dir: stylesheets

- url: .*
  script: main.app

libraries:
- name: webapp2
  version: "2.5.2"
- name: jinja2
  version: latest

here's the handler which handles what happens when 'Computer Networks' is queried: 这是处理程序，用于处理查询“计算机网络”时发生的情况：

class CNHandler(webapp2.RequestHandler):
    def write(self, *a, **kw):
        self.response.out.write(*a, **kw)
    def render_str(self, template, **params):
        t = jinja_env.get_template(template)
        return t.render(params)
    def render(self, template, **kw):
        self.write(self.render_str(template, **kw))
    def get(self):
        self.render("CN.html")

Answer 1

You're css file is either not deployed or you're applications static resources are configured incorrectly. 您的css文件未部署，或者您的应用程序静态资源配置不正确。

For example, after searching for 'Computer Networks', the related stylesheet results in a 404. http://www.deploymentapp.appspot.com/cn.css 例如，在搜索“计算机网络”之后，相关的样式表将生成404。http ://www.deploymentapp.appspot.com/cn.css

In regards to the image issue, you have not specified the correct path to the image. 关于图像问题，您尚未指定正确的图像路径。 For example: 例如：

<img src = "CN.jpg" width = '300px' height = '400px'>

Should be: 应该：

<img src = "/images/CN.jpg" width = '300px' height = '400px'>

使用Google App Engine渲染html文件后，为什么在html文件中没有处理css命令？

问题描述

1 个解决方案

解决方案1
1 2013-10-13 05:20:21

使用Google App Engine渲染html文件后，为什么在html文件中没有处理css命令？

问题描述

1 个解决方案

解决方案1 1 2013-10-13 05:20:21

解决方案1
1 2013-10-13 05:20:21