2016-04-06 19 views
1

我最近问了一个关于我的php包括并收到答案的问题。现在,包含访问正确的文件,我的HTML/CSS/JavaScript网页显示了一些希望。唯一的问题是,PHP包括网页都这样看:如何能包括访问的css文件

PHP include page (not accessing css)

的这个代替:

What the page should look like (this page is not using php includes)

是否有PHP的一种方式包括访问css文件?我现在为包含包括一个页面的代码是:

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="styles.css" type="text/css" /> 
<script type="text/javascript" src="main.js"></script> 
<title> Water Polo, The Best Sport</title> 
</head> 
<body> 
<div class="wrapper"> 
<?php 
include'../includes/header.php'; 
?> 
<?php 
include'../includes/navbar.php'; 
?> 
<div class= "content"> 
</div> 
<?php 
include'../includes/footer.php'; 
?> 
</div> 
</body> 
</html> 

的header.php

<?php echo'<div class ="header"> 
<h1>The Best Sport</h1> 
<h1 class="sitetitle">AllWaterPolo</h1> 
<img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" /> 
<h2 class="homeScreenLink"> <a href ="index.html">Water Polo!</a></h2></div>';> 

为了发展我目前使用的甲基苯丙胺和运行的是一个文件夹中的代码的网站把它放在htdocs中。

我从php include中取出标题,并使css文件与文档一起工作,但有一点仍然相同。我通过php包含在文档中的代码没有考虑到css文档的效果,但是头文件现在不在包含文件中,而是写入文档的写入工作。有没有办法允许通过PHP包含的代码访问工作的CSS文件?如果它有助于回答过程,我会发布任何必要的照片。请在下面评论。

+0

您需要使用绝对路径。 – SLaks

+0

这是HTML的东西,而不是PHP。您的路径可能是错误的,请尝试使用绝对URL。 (您可以通过在浏览器中打开您的页面源代码并点击与css的链接来检查这一点) – JaxCze

+0

如果网站仍在开发中,而且还没有一个活的网站,您可以给我一个绝对路径或网址的例子包括使用CSS的工作?谢谢! – sbswim

回答

0

您已正确识别出该问题,即HTML无法找到CSS。这是直接因为这个标签:

<link rel="stylesheet" href="styles.css" type="text/css" /> 

具体来说,标签的这一部分:

href="styles.css" 

你告诉你的代码来寻找styles.css文件在同一目录中index.php文件。那是对的吗?

通常情况下,网站结构看起来是这样的:

public_html 
    - css 
    - js 
    - includes 
    - img 

您的网站看起来这将构成:

includes 
public_html 

想象自己的index.php文件中。包含INCLUDEd的所有文件都成为index.php的一部分,就好像它们原来在那里一样。所以,你期望在这里找到CSS文件(按你的<link rel="stylesheet"标签):

public_html/style.css 

如果他们真的是一个CSS文件夹中,那么也许这将解决它:

<link rel="stylesheet" href="css/styles.css" type="text/css" /> 

更新:

无需echo出PHP的HTML,你可以从字面上只是这样做:

的header.php

<div class ="header"> 
    <h1>The Best Sport</h1> 
    <h1 class="sitetitle">AllWaterPolo</h1> 
    <img src ="img/51wmckj8p1l__sx300__1.png" class="wpball" alt="Water Polo Ball" /> 
    <h2 class="homeScreenLink"> <a href ="index.html">Water Polo!</a></h2> 
</div> 

如果其他包括文件是相似的,那么它出现在渲染的文件都将是HTML。因此,下一步是:你的样式表在哪里?尝试这个。在浏览器中键入的address bar

localhost/styles.css 

看看是否出现你的样式表。如果没有,试试这个:

localhost/css/styles.css 

如果第二个作品,然后再更改本:

<link rel="stylesheet" href="styles.css" type="text/css" /> 

这样:

<link rel="stylesheet" href="css/styles.css" type="text/css" /> 

注:我可能没有你的道路结构正确。根据需要修改。

+0

我的网页结构与您展示的完全一样,但是我包含在我网站页面中的php文件似乎无法访问已经在标题中的css链接。我没有包含的主页是完美的,并与CSS一起工作。 – sbswim

+0

你可以发布'header' include吗? *只需编辑您的问题,在底部按Enter键两次,键入三个破折号,再按Enter两次,粘贴标题代码,然后单击保存按钮*另外,请告诉我们您是如何开发您的网站的 - 使用XAMPP? WAMP/MAMP? HostGator的?学校帐户?或者只是在你的硬盘上的文件夹? – gibberish

+0

刚做过检查。 – sbswim

0

简答题=没有。

你可能想看看使用SASS。除了缩小css文件外,还可以设置它,以便主要(在您的情况下为styles.css)从几个SASS文件中提取。例如,您可以拥有以下SASS文件:main.scss,header.scss,navbar.scss,& footer.scss。如果您的IDE支持SASS,那么当您保存这些文件中的任何一个时,它都可以自动将所有四个文件编译到您的styles.css文件中。然后你所需要的就是引用那个文件并且你已经设置好了。

http://thesassway.com/beginner/how-to-structure-a-sass-project

+1

SASS可能比这张海报刚刚准备好的更复杂一点。但是您可能想提及SASS的主要卖点,如CSS变量,函数等等。也许是链接到视频演示。 – gibberish

+0

好点 - 谢谢!它需要一段时间,安装程序非常依赖于正在使用的IDE。另一方面,一旦设置正确,它非常棒,值得一试。 fusion3k,你在用什么IDE? – KC135Q