我的CSS只应用于单个页面而不是所有页面CodeIgniter

eagi6jfj  于 2022-12-07  发布在  其他
关注(0)|答案(4)|浏览(154)

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

控制器-〉页面.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');
    }
}

查看-〉标题.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标记。

wz1wpwve

wz1wpwve1#

您没有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>
czq61nw1

czq61nw12#

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

ubby3x7f

ubby3x7f3#

很简单,你的CSS链接在其他页面上是不正确的。当你在你的主页上,有CSS链接到css/something.css工作,但当你进入你的其他页面,它就像进入另一个文件夹。所以,你需要你的链接回到一个目录。
您的样式表不是使用css/something.css,而是使用../css/something.css
../所做的是让它在进入CSS目录之前返回一个目录。如果需要更多的澄清,请回复。谢谢!:)

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

**更新1:**您可能误解了对方和我的谈话内容。

在您的主页上,您位于您的home目录中,因此您的主页代码可以正常工作,因为CSS文件夹与索引页位于同一目录中。
然而,当你进入另一个页面时,你进入的是你的主页所在目录的子目录,所以CSS文件夹在它之外的文件夹中。
类比:
假设我使用的是Windows,并且位于C:\驱动器中。在C:\驱动器中,我有以下内容:
名为CSS的文件夹名为about的文件夹名为index.html的文件
所以,每当我转到这个目录时,它总是显示为index.html。index.html文件与CSS文件夹在同一个目录中。因此,链接到CSS/something.css是有意义的。
现在,我将转到about页面。我通过进入about文件夹来完成此操作。但是,当我尝试链接到CSS文件夹时,它不在那里,因为它位于about文件夹之前的文件夹中。
这是否意味着您的网页所在的每个文件夹中都必须有一个CSS文件夹?不!您所要做的就是将以下内容添加到链接的开头:../
您可能会问自己,在文件夹之前添加../有什么帮助?../的作用是检查PREVIOUS目录中的CSS文件夹。
我希望这能把事情弄清楚
(Also,是的,我已经进入了你的网页,并试图修改HTML,看看它是否工作。它的工作,一旦你添加这些变化,为您的所有CSS文件中的网页,不是你的主页。)

wb1gzix0

wb1gzix04#

所有答案中缺少的一件事是,在html代码中,你必须匹配该页面中创建的所有类(css显示在该页面上,即网站的基本URL),复制基本URL中声明的所有类,并将它们与后续页面中的元素沿着粘贴。

相关问题