Wamp服务器不显示css答案

【问题标题】：Wamp server not showing cssWamp服务器不显示css
【发布时间】：2017-11-22 01:41:22
【问题描述】：

我在一个 .css 文件中创建了两个 div，然后我将该 .css 文件链接到一个像这样的 php 头文件中

<!DOCTYPE html>

<html>
<head>

<link rel="stylesheet" href="css/headercss.css" type="text/css" media="screen" title="default">

</head>


<body bgcolor="#F0F0F0">

<div class="div_menu">
<h1> asdasd </h1>
</div>

<div class="div_main">

这是css文件

@charset "utf-8";
/* CSS Document */


.div_menu{
background-image:url('table_header_options.jpg');
width:70%;
margin:auto;
height:50px;
}

.div_main{
background-color:#FFF;
margin:auto;
width:69.75%;
height:800px;
margin-top:15px;

border-width:1px;
border-style:solid;
border-bottom-color:#ddd;
border-right-color:#ddd;
border-top-color:#aaa;
border-left-color:#aaa;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

我确信目录没有任何问题，因为当我仅使用 google chrome 运行 php 文件时一切正常，但是当我尝试通过 wamp 服务器从 localhost 打开它时，除了 h1 标记之外，所有内容都消失了。

任何帮助将不胜感激！

【问题讨论】：

打开开发者工具并重新加载，单击网络选项卡并查找 css 文件，确保它（以及所有相关资源）返回 HTTP 200
“在 chrome 中可以正常工作，但不能从 localhost”是什么意思？您是在实时环境中进行在线测试，还是使用其他程序来访问您的本地主机？
在线测试，但我的意思是没有 css 效果通过 localhost 显示，但是当我只需右键单击并使用 google chrome 打开 php 文件时，一切看起来都是正确的。为什么？
我没有说它会起作用，我说的是ensure it returns HTTP 200。你在那里得到什么？

标签： php html css codeigniter

【解决方案1】：

您需要确保从正确的相对位置调用 css。

由于这是一个 PHP 头文件，我假设您是从不同的地方调用它（例如 /、/about、/otherfolder 等）。

问题是您当前的代码将在 current 文件夹中查找 css 文件夹，而不是它实际所在的顶级文件夹。

因此：

<link rel="stylesheet" href="/css/headercss.css" type="text/css" media="screen" title="default">

注意/css/headercss.css 的绝对定位 - 前面的/ 表示“从顶部”。

编辑：原来 OP 正在使用 CodeIgniter 并且应该重新提交他的问题标记为这样。

【讨论】：

当我简单地使用谷歌浏览器打开但使用 localhost css 时一切正常
打开开发者控制台并查看 css 文件的返回码 - 注意 GET 调用试图找到它的位置（相对于它的实际位置）。
我应该从哪里打开开发者控制台？
如果问题出在目录上，那么为什么使用 google chrome 打开时一切正常？
因为在 chrome 中你没有解析 PHP - 它呈现为 HTML。尝试将放在那里并在 chrome 中打开它 - 它不会显示。在 localhost 中运行它，你会看到打印了“hello”。

【解决方案2】：

实际上，在您将所有内容传输到您的 wampserver 之后，您的图像会更改它的位置，因此您需要更改您设计的所有 div 的背景图像：url（''）。然后VIOLA就会出现

【讨论】：

【解决方案3】：

在 wamp 中为 apache 服务器使用 80 端口

【讨论】：