-1

我正在使用 Xampp 来测试我的 perl cgi 脚本。当我打开 cgi 脚本时，css 似乎不适用于页面。我在 html 文件中尝试了完全相同的代码，它工作正常，这表明 html 链接到正确的位置以找到 CSS。

$self->{content}=<<HTML;
<!DOCTYPE html>
<html>
<head>
<title>$title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/additional.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>

<body>
<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" >Bridge : $env </a>
        <ul class="nav">
            <li><a href="#"><i class="icon-upload"></i>upload</a></li>
            <li><a href="#"><i class="icon-search"></i>Search</a></li>
            <li><a href="#"><i class="icon-cog"></i>Admin</a></li>

        </ul>
    </div>
</div>
<div class="container">
    ...
  </div>
</body>
</html>
HTML
4

2 回答 2

5

本地主机/xampp/cgi-bin/web/css/bootstrap.min.css

您的 Web 服务器可能已配置为将其中的所有内容cgi-bin视为可执行文件。

CSS 不是服务器可以解释的编程语言，因此当您尝试加载它时，它可能会提供 500 错误。

不要将静态资源保存在cgi-bin.

于 2013-06-18T08:30:54.793 回答
-1

也许可以使用 http 连接进行测试：类似于：<link rel="stylesheet" href="http://192.168.0.32/bootstrap/css/bootstrap.min.css" media="screen"> 这是我的脚本（非常非常脏）：

 #!/usr/bin/perl

use CGI qw(:standard);
print header;
print_hdetails();
print"<body data-spy=\"scroll\" data-target=\"\.bs-docs-sidebar\">\n";
print_navbar();
print_headerofpage();
print_mysidebar();
print_mybodycontent();
print end_html;

sub print_hdetails{
print <<FORMULE;
  <!DOCTYPE html>    
  <html>
  <head>
    <base href="http://192.168.0.32/cgi-bin/"><!--[if lte IE 6]></base><![endif]-->
    <title>bootstrapstyle page</title>

    <meta charset="utf-8">  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
    <!-- for Bootstrap -->
    <script type="text/javascript" src="http://192.168.0.32/bootstrap/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://192.168.0.32/bootstrap/js/bootstrap.min.js"></script>
    <link href="http://192.168.0.32/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!--link href="http://192.168.0.32/silverstripe/themes/bootstrap/css/myadded.css" rel="stylesheet" media="screen"-->    
    <!--link rel="shortcut icon" href="http://192.168.0.32/silverstripe/themes/bootstrap/images/favicon.ico" /-->    
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  <!--link rel="stylesheet" type="text/css" href="themes/bootstrap/css/form.css?m=1373645318" /-->
  </head>

FORMULE

    }       
sub print_headerofpage {
    print <<CONTENT;
    <header class="jumbotron subhead" id="overview">
    <div class="container">    
    <p>&nbsp;&nbsp;&nbsp;&nbsp;
    <h2>bonjour!</h2><br>
    </p>
    </div>
    </header>
CONTENT

}
sub print_mysidebar{
    print <<MYSIDEBAR;
    <div class="container">
    <div class="row-fluid">
    <div class="span2">
    <h6>Sidebar content</h6>
    <p>
    class=span2
    </p>
    <ul class="nav nav-list bs-docs-sidenav">
    <li><a href="#components"><i class="icon-chevron-right"></i> 1. Choose components</a></li>
    <li><a href="#plugins"><i class="icon-chevron-right"></i> 2. Select jQuery plugins</a></li>
    <li><a href="#variables"><i class="icon-chevron-right"></i> 3. Customize variables</a></li>
    <li><a href="#download"><i class="icon-chevron-right"></i> 4. Download</a></li>
    </ul> 
    </div>   
MYSIDEBAR

}
sub print_mybodycontent{
    print <<MYBODYCONTENT;
      <div class="span10">      
      <h1>Hello, world! </h1>
      <p>
        ici c'est le body content class=span10
      </p>
      <p>
      <h4>Le sourire, il fait plaisir a ceux qui vous aiment. Il emmerde ceux qui vous detestent. </h4>
      </p>          
      </div>    
MYBODYCONTENT

}

sub print_navbar  {
    print <<LANAVBAR;
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="">
<a href="./index.html">Home</a>
</li>
<li class="">
<a href="./getting-started.html">Get started</a>
</li>
<li class="">
<a href="./scaffolding.html">Scaffolding</a>
</li>
<li class="">
<a href="./base-css.html">Base CSS</a>
</li>
<li class="">
<a href="./components.html">Components</a>
</li>
<li class="">
<a href="./javascript.html">JavaScript</a>
</li>
<li class="active">
<a href="./customize.html">Customize</a>
</li>
</ul>
</div>
</div>
</div>
</div>
LANAVBAR

}

这个对我有用。

于 2013-08-02T04:35:01.073 回答