Rumah > Artikel > hujung hadapan web > Bagaimana untuk memperkenalkan gaya CSS dalam rangka kerja CI?
Bagaimana untuk memperkenalkan gaya CSS dalam rangka kerja CI?
- 王林asal
- 2024-01-16 10:33:06647semak imbas
Kaedah pengenalan gaya CSS dalam rangka kerja CI memerlukan contoh kod khusus
CI (CodeIgniter) ialah rangka kerja PHP ringan yang digunakan secara meluas dalam pembangunan aplikasi web. Dalam rangka kerja CI, untuk menjadikan halaman web mempunyai gaya dan susun atur yang baik, kita perlu memperkenalkan gaya CSS. Artikel ini akan memperkenalkan cara memperkenalkan gaya CSS dalam rangka kerja CI dan menyediakan contoh kod khusus.
1 Secara langsung memperkenalkan gaya CSS ke dalam fail paparan
Dalam rangka kerja CI, fail paparan (View) bertanggungjawab untuk memaparkan halaman HTML. Kami boleh memperkenalkan gaya CSS terus ke dalam fail paparan untuk menukar rupa dan reka letak halaman. Berikut ialah langkah khusus:
- Dalam rangka kerja CI, fail paparan biasanya disimpan dalam direktori
application/views. Oleh itu, kita perlu mencipta fail paparan baharu dalam direktori ini dan namakannyaexample_view.php.application/views目录下。因此，我们需要在该目录下创建一个新的视图文件，并命名为example_view.php。 - 在
example_view.php文件中，添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/styles.css'); ?>">
</head>
<body>
<h1>这是一个示例页面</h1>
<p>这是一段示例内容。</p>
</body>
</html>在上述代码中，我们使用了<link>标签来引入CSS样式表。其中，href属性的值是通过base_url()函数动态生成的，指向css/styles.css文件。这里假设CSS样式文件存放在CI框架的根目录下的css文件夹中。
- 接下来，我们需要在CI框架的控制器文件中指定加载该视图文件。打开
application/controllers目录下的对应控制器文件，例如Example.php，在该文件中添加以下代码：
class Example extends CI_Controller {
public function index() {
$this->load->view('example_view');
}
}在上述代码中，index()方法用于加载example_view.php视图文件。
- 最后，在浏览器中输入CI框架的URL，例如
http://localhost/ci/index.php/example，即可看到具有CSS样式的示例页面。
二、使用CI框架的资源加载器
除了直接在视图文件中引入CSS样式外，CI框架还提供了一个资源加载器（Loader）的功能，用于加载CSS样式表、JavaScript文件等资源。以下是具体的步骤：
- 首先，在
application/config/autoload.php文件中，找到以下代码并修改为：
$autoload['helper'] = array('url');在上述代码中，我们将url助手库添加到自动加载的助手列表中，以便在视图文件中使用base_url()函数。
- 在控制器文件中，无需再手动调用资源加载器，只需将视图文件中的引入CSS样式的代码修改为以下形式：
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<?php echo link_tag('css/styles.css'); ?>
</head>
<body>
<h1>这是一个示例页面</h1>
<p>这是一段示例内容。</p>
</body>
</html>在上述代码中，我们使用了link_tag()函数来动态生成<link>标签，并加载css/styles.css
example_view.php, tambahkan kod berikut: - rrreee Dalam kod di atas, kami menggunakan tag
<link> untuk memperkenalkan gaya CSS lembaran. Antaranya, nilai atribut href dijana secara dinamik melalui fungsi base_url() dan menghala ke fail css/styles.css. Diandaikan di sini bahawa fail gaya CSS disimpan dalam folder css dalam direktori akar rangka kerja CI. application/controllers, seperti Example.php dan tambahkan kod berikut pada fail: rrreee🎜Dalam kod di atas, index() digunakan untuk memuatkan fail paparan example_view.php. 🎜- 🎜Akhir sekali, masukkan URL rangka kerja CI dalam penyemak imbas, seperti
http://localhost/ci/index.php/example, dan anda akan melihat CSS Halaman contoh untuk gaya. 🎜🎜🎜2 Gunakan pemuat sumber rangka kerja CI🎜🎜Selain memperkenalkan gaya CSS terus ke dalam fail paparan, rangka kerja CI juga menyediakan fungsi pemuat sumber (Loader) untuk memuatkan helaian gaya CSS, fail JavaScript, dsb. sumber. Berikut ialah langkah-langkah khusus: 🎜🎜🎜Pertama, dalam fail application/config/autoload.php, cari kod berikut dan ubah suainya kepada: 🎜🎜rrreee🎜Dalam kod di atas, kami akan Pustaka pembantu url ditambahkan pada senarai pembantu yang dimuatkan secara automatik untuk digunakan dengan fungsi base_url() dalam fail paparan. 🎜- 🎜Dalam fail pengawal, tidak perlu memanggil pemuat sumber secara manual Anda hanya perlu mengubah suai kod yang memperkenalkan gaya CSS dalam fail paparan kepada bentuk berikut: 🎜🎜rrreee🎜. Dalam kod di atas, Kami menggunakan fungsi
link_tag() untuk menjana teg <link> secara dinamik dan memuatkan css/styles.css fail. 🎜🎜🎜Masukkan URL rangka kerja CI dalam penyemak imbas dan anda akan melihat halaman contoh dengan gaya CSS. 🎜🎜🎜Ringkasan: 🎜🎜Artikel ini memperkenalkan dua kaedah untuk memperkenalkan gaya CSS ke dalam rangka kerja CI: memperkenalkan secara langsung gaya CSS dalam fail paparan dan menggunakan pemuat sumber rangka kerja CI. Tidak kira kaedah yang digunakan, anda boleh menambah gaya dan reka letak dengan mudah pada halaman rangka kerja CI. Saya harap artikel ini akan membantu anda dalam menangani gaya CSS dalam rangka kerja CI. 🎜Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan gaya CSS dalam rangka kerja CI?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!