Practise2项目中index.php无法成功链接login.css文件如何处理

问题原因 #

• 路径根目录映射错误：以/开头的绝对路径指向的是Web服务器配置的站点根目录，而非你本地的Practise2项目文件夹。比如你本地服务根目录是xampp的htdocs文件夹，浏览器会直接请求htdocs/Resources/styles/login.css，而非目标的htdocs/Practise2/Resources/styles/login.css，自然返回404。
• 大小写或拼写不匹配：部分系统（比如Linux服务器）区分文件名大小写，需要确认Resources、styles、login.css的拼写、大小写和实际文件夹/文件名完全一致。
• 目录访问权限限制：Web服务器可能配置了Resources目录的静态资源访问规则，禁止外部直接读取该目录下的文件。

解决方法 #

1. 优先使用相对路径（最稳妥，适配不同部署环境）
   因为index.php和Resources文件夹处于同一级目录，直接去掉路径开头的/即可，代码如下：

<link rel="stylesheet" href="Resources/styles/login.css">

2. 调整绝对路径适配站点配置
   如果你本地访问index.php的地址是http://localhost/Practise2/index.php，说明站点根目录下还有Practise2一层文件夹，绝对路径需要补上该层级：

<link rel="stylesheet" href="/Practise2/Resources/styles/login.css">

3. PHP项目可配置动态根路径（适合多环境部署）
   先在index.php头部定义站点根URL常量，后续资源路径直接拼接常量即可，上线时只需修改一次常量值：

<?php
// 本地开发环境配置
define('SITE_URL', 'http://localhost/Practise2/');
?>
<!-- 引用css -->
<link rel="stylesheet" href="<?php echo SITE_URL; ?>Resources/styles/login.css">

快速排查技巧 #

打开浏览器按F12调出开发者工具，切换到「网络」面板刷新页面，找到login.css的请求项，查看请求的完整路径和返回状态码，如果是404就对比请求路径和实际文件路径的差异，可快速定位问题。

内容的提问来源于stack exchange，提问作者Elizabeth Richard