【问题标题】:My CSS only applied to a single page instead of all pages CodeIgniter我的 CSS 仅适用于单个页面而不是所有页面 CodeIgniter
【发布时间】:2016-03-10 03:43:46
【问题描述】:

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

Controller->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');
    }
}

查看->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.phpabout.php 仅包含显示内容的HTML 标记。

【问题讨论】:

  • 您是否在 config.php 中设置了基本 url 还是将其留空?在 codeigniter 3 中,如果您将其留空,链接可能不起作用
  • @wolfgang1983 是的。我在 config.php 中设置了我的基本 url。我将其设置为我正在使用的域名
  • 您能否通过单击带有标题视图和控制器的标签下方的编辑按钮来编辑您的问题。
  • 你是否在自动加载中设置了 URL 助手。你能把你的代码展示给我看吗?
  • @Jitendra 是的。我在 autoload.php 中设置了我的 URL 助手。我会发表我的看法。

标签: javascript php css codeigniter responsive-design


【解决方案1】:

您没有type="text/css",同时删除&lt;noscript&gt; &lt;noscript&gt;

<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>

【讨论】:

  • 感谢您的帮助。 CSS 现在应用于所有页面。但是去掉 noscript 标签后,就不是非响应式设计了。与之前使用 noscirpt 标记不同的是,当您尝试调整窗口大小时,该网站会转向适合移动设备的网站。
  • 非常感谢,刚刚通过在 css 工作表路径定义中包含基本 url 解决了同样的问题
【解决方案2】:

使用 &lt;link rel="stylesheet" href="&lt;?PHP echo base_url();?&gt;css/something.css" /&gt; 应该可以解决您的问题,这样它总是在每个页面上都包含 CSS。

【讨论】:

  • 我已经在使用 codeigniter 的 base_url 助手,这样我就可以在我的目录中提供 .css 文件的确切路径。我已经尝试过你之前推荐的,但效果是一样的。基本 url (barangayxyz.net23.net) 正在应用 css,但关于页面 (barangayxyz.net23.net/pages/about) 仍然没有。甚至 (barangayxyz.net23.net/pages/index 不应用与基本 url 基本相同的 css。
【解决方案3】:

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

您的样式表不要使用 css/something.css,而是使用 ../css/something.css

../ 的作用是让它在进入 CSS 目录之前返回一个目录。如果需要进一步说明,请回复。谢谢! :)

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

更新 1: 您可能误解了我和其他人所说的内容。

在您的主页上,您位于您的主目录中,因此您的主页代码可以正常工作,因为 CSS 文件夹与您的索引页位于同一目录中。

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

类比:

假设我在 Windows 上,并且在 C:\ 驱动器中。在 C:\ 驱动器内,我有以下内容:

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

所以,每当我进入这个目录时,它总是显示为 index.html。 index.html 文件与 CSS 文件夹位于同一目录中。所以,链接到 CSS/something.css 是有意义的。

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

这是否意味着您必须在页面所在的每个文件夹中都有一个 CSS 文件夹?不!您所要做的就是将其添加到链接的开头:../

您可能会问自己,在文件夹之前添加 ../ 有何帮助? ../ 的作用是检查 PREVIOUS 目录中的 CSS 文件夹。

我希望这能解决问题! :)

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

【讨论】:

  • 我已经在使用 codeigniter 的 base_url 助手,这样我就可以在我的目录中提供 .css 文件的确切路径。我已经尝试过您之前推荐的方法,但效果相同。基本 url (barangayxyz.net23.net) 正在应用 css,但关于页面 (barangayxyz.net23.net/pages/about) 仍然没有。甚至(barangayxyz.net23.net/pages/index 不应用基本上作为基本 url 的 css。
  • 我访问了您拍摄的网页。我将 ../ 添加到 url 以使其正常工作。我确保这有效,并且当您添加 ../
  • 您不需要删除任何 noscript 标签。
  • 而且你不需要 因为它没有按照你想要的方式工作。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2012-08-04
  • 2017-11-21
  • 2015-08-14
  • 1970-01-01
  • 1970-01-01
  • 2022-01-06
  • 1970-01-01
相关资源
最近更新 更多