Question

我正在使用Codeigniter框架创建一个简单的网站。我还下载了一个响应式HTML5模板。问题是CSS仅应用于站点的基本URL。但是当我访问其他页面时，CSS不会被应用。请参阅下面的屏幕截图。

控制器 - ＆GT; Pages.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Pages extends CI_Controller {

    function index()
    {
         if ( ! file_exists(APPPATH.'/views/index.php'))
        {
                // Whoops, we don't have a page for that!
                show_404();
        }
                $this->load->view('header');
                $this->load->view('index');
                $this->load->view('footer');
    }

    function about()
    {
         if ( ! file_exists(APPPATH.'/views/about.php'))
        {
                // Whoops, we don't have a page for that!
                show_404();
        }
                $this->load->view('header');
                $this->load->view('index');
                $this->load->view('footer');
    }
}

视图 - ＆GT;的header.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE HTML>

<html>
	<head>
		<title>Official Website of Barangay Canlubang</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700italic,400,300,700' rel='stylesheet' type='text/css'>
		<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="<?php echo base_url();?>js/skel.min.js"></script>
		<script src="<?php echo base_url();?>js/skel-panels.min.js"></script>
		<script src="<?php echo base_url();?>js/init.js"></script>
		<noscript>
			<link rel="stylesheet" href="<?php echo base_url();?>css/skel-noscript.css" />
			<link rel="stylesheet" href="<?php echo base_url();?>css/style.css" />
			<link rel="stylesheet" href="<?php echo base_url();?>css/style-desktop.css" />
		</noscript>
		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
		<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
	</head>

视图中的index.php和about.php仅包含显示内容的HTML标记。

Answer 1

您没有type="text/css"，也删除了<noscript> <noscript>

<noscript>
<link rel="stylesheet" href="<?php echo base_url();?>css/skel-noscript.css" />
<link rel="stylesheet" href="<?php echo base_url();?>css/style.css" />
<link rel="stylesheet" href="<?php echo base_url();?>css/style-desktop.css" />
</noscript>

更改为

<head>
// Meta
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

// Title
<title>Official Website of Barangay Canlubang</title>

// CSS
<link type="text/css" rel="stylesheet" href="<?php echo base_url();?>css/skel-noscript.css" />
<link type="text/css" rel="stylesheet" href="<?php echo base_url();?>css/style.css" />
<link type="text/css" rel="stylesheet" href="<?php echo base_url();?>css/style-desktop.css" />

// Scripts
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="<?php echo base_url();?>js/skel.min.js"></script>
<script src="<?php echo base_url();?>js/skel-panels.min.js"></script>
<script src="<?php echo base_url();?>js/init.js"></script>

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>

Answer 2

很简单，您的CSS链接在其他页面上不正确。当你在主页上时，将CSS链接到css / something.css是有效的，但当你进入其他页面时，它就像进入另一个文件夹一样。所以，你需要你的链接返回一个目录。

不要让你的样式表有css / something.css，而是../ css / something.css

../做的是让它在进入CSS目录之前返回一个目录。如果需要进一步澄清，请回复。谢谢！：）

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

更新1： 你可能误解了对方和我说的话。

在您的主页上，您位于主目录中，因此您对主页的代码将起作用，因为CSS文件夹与索引页位于同一目录中。

但是，当你转到另一个页面时，你将进入主页所在目录的子目录，因此CSS文件夹位于该文件夹之外的文件夹中。

类比：

让我们说我在Windows上，而且我在C：\ Drive中。在C：\驱动器中，我有以下内容：

一个名为CSS的文件夹一个名为about的文件夹一个名为index.html的文件

因此，每当我转到此目录时，它始终显示为index.html。 index.html文件与CSS文件夹位于同一目录中。因此，链接到CSS / something.css是有道理的。

现在，我要去关于页面。我这样做是通过进入about文件夹。但是，当我尝试链接到CSS文件夹时，它不存在，因为它位于about文件夹之前的文件夹中。

这是否意味着您必须在您的网页所在的每个文件夹中都有一个CSS文件夹？没有！您所要做的就是将其添加到链接的开头：../

您可能会问自己，如何在文件夹帮助之前添加../？什么../做的是它检查PREVIOUS目录中的CSS文件夹。

我希望能够解决问题！：）

（另外，是的，我已经进入了您的网页，并尝试修改HTML以查看它是否有效。一旦您为非主页的页面中的所有CSS文件添加这些更改，它就可以正常工作。）

Answer 3

使用<link rel="stylesheet" href="<?PHP echo base_url();?>css/something.css" />可以解决您的问题，这样每个页面上都会包含CSS。

我的CSS仅适用于单个页面而不是所有页面CodeIgniter

3 个答案: