为什么css不影响我的PHP页面？

I am learning the php and get some difficulties, I am trying to include the php file in header of another file, but the css is not working?

here is my project directory structure Project Structure

and here is my php code... blogpage.php

 <html lang="en">
<head>   
    <?php include 'head.php';?>

    <title>Off Canvas Template for Bootstrap</title>

</head>

I have included the path in Struts-2/blogpage.php

here is my head.php

   <!-- Bootstrap core CSS -->
  <link href="/css/bootstrap.min.css" rel="stylesheet">

  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">

   <!-- Custom styles for this template -->
  <link href="css/offcanvas.css" rel="stylesheet">
   <link href="css/blog.css" rel="stylesheet">

Is CSS folder located under the head.php?

Try to add slash to all links:

   <!-- Bootstrap core CSS -->
  <link href="/css/bootstrap.min.css" rel="stylesheet">

  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

   <!-- Custom styles for this template -->
  <link href="/css/offcanvas.css" rel="stylesheet">
   <link href="/css/blog.css" rel="stylesheet">

You may check, adding the links directly, without including th php. Try in that way to see if the links work.

Solution One:

As per your folder structure you have all the style-sheets under the CSS folder and you are trying to include it in the PHP file which is located outside the CSS folder and the procedure it that you have to directly point it out to the CSS folder to pertain the links to all the files that you provide in head.php.

The head.php should look like this so that it will not pertain to any error.

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="css/blog.css" rel="stylesheet" type="text/css">

Errors:

  1. Your forward slash trailing in the first link will fails since you have added the forward slash over to the bootstrap.css and hence that file will not call out in blogpage.php page. That is the reason you are not getting css over to the blogpage.php.
  2. The type="text/css" is missing to the stylesheet call in the head.php and this may also cause the Error.

And pertaing to that you need to call the head.php in the blogpage.php as follows:

<html lang="en">
<head>   
<?php include ('../head.php'); ?>
<title>Off Canvas Template for Bootstrap</title>
</head>

Best Practice

But you can wrap up all the head.php, footer.php, header.php into the includes folder so that it will be a constant under that folder and you can provide up the links without any error.

Since you are calling it inside the Struts-2 folder your path may fail sometimes and the CSS may result in Error.

Tips:One the site is loaded up fully you press CTRL+U so that your entire code will open up in the new window (View Page Source) and you can check to that whether all the links that you are proving are executing correct in the browser.

Solution Two:

You can add up the forward slash over to the CSS folder structure since it will not fails up when you try to add it u over to any of the page that you use. Since all the communication will be done from the root directory on all calls

And your head.php will look like

<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="/css/offcanvas.css" rel="stylesheet" type="text/css">
<link href="/css/blog.css" rel="stylesheet" type="text/css">