duanliusong6395
duanliusong6395
2015-09-25 09:08

包括来自header.php的样式表和相对路径

i am working on a website and i am looking for a way to include all my stylesheets and scripts relatively. Including the php-files is easy:

<?php include 'header.php'; ?>  

or

<?php include '../header.php'; ?>  

or by referencing the root-path:

<?php include '/header.php'; ?> 

But: All the stylesheets and scripts are not loaded on pages located in ‘/products‘, because they are located relatively to the root-directory and not to root/products.

For example:

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

Is there a way to include stylesheets and scripts relativlely, without taking care of where the page is located, that is calling header.php?

I am working on a local server with mamp and there are many websites in the mamp-directory.

Thanks in advance!

Tim

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • douxie3625 douxie3625 6年前

    It's all about the HTML. The following will load a stylesheet relative to the page you are currently on.

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

    For example, if your page is /products/page1.html. The browser will try to load /products/css/styles.css

    An absolute path would look like:

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

    Note the additional forward slash. In this case although your page is /products/page1.html. The browser will try to load /css/styles.css

    You can also use the base tag to change the relative urls as in the first example.

    <base href="/assets/" />
    <link href="css/styles.css" rel="stylesheet">
    

    This time the browser will try to load /assets/css/styles.css

    点赞 评论 复制链接分享
  • douweng1935 douweng1935 6年前

    Okay, i've found the solution:

    The base-function tells my website to be based in http://localhost/planilux/02/

    <base href="http://localhost/planilux/02/" />
    

    I've been trying to get my stylesheet by telling the path to be root-based:

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

    The little slash before cssin the path was the problem.

    This works out fine:

    <link href="css/hacks.css" rel="stylesheet">
    

    Thanks !!! Have a nice day!

    点赞 评论 复制链接分享

为你推荐