Jadual Kandungan
这是一个示例页面
Rumah hujung hadapan web tutorial css Bagaimana untuk memperkenalkan gaya CSS dalam rangka kerja CI?

Bagaimana untuk memperkenalkan gaya CSS dalam rangka kerja CI?

Jan 16, 2024 am 10:33 AM
rangka kerja ci gaya css Memperkenalkan kaedah

Bagaimana untuk memperkenalkan gaya CSS dalam rangka kerja CI?

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:

  1. Dalam rangka kerja CI, fail paparan biasanya disimpan dalam direktori application/views. Oleh itu, kita perlu mencipta fail paparan baharu dalam direktori ini dan namakannya example_view.php. application/views目录下。因此,我们需要在该目录下创建一个新的视图文件,并命名为example_view.php
  2. 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 id="这是一个示例页面">这是一个示例页面</h1>
    <p>这是一段示例内容。</p>
</body>
</html>
Salin selepas log masuk

在上述代码中,我们使用了<link>标签来引入CSS样式表。其中,href属性的值是通过base_url()函数动态生成的,指向css/styles.css文件。这里假设CSS样式文件存放在CI框架的根目录下的css文件夹中。

  1. 接下来,我们需要在CI框架的控制器文件中指定加载该视图文件。打开application/controllers目录下的对应控制器文件,例如Example.php,在该文件中添加以下代码:
class Example extends CI_Controller {
    public function index() {
        $this->load->view('example_view');
    }
}
Salin selepas log masuk

在上述代码中,index()方法用于加载example_view.php视图文件。

  1. 最后,在浏览器中输入CI框架的URL,例如http://localhost/ci/index.php/example,即可看到具有CSS样式的示例页面。

二、使用CI框架的资源加载器

除了直接在视图文件中引入CSS样式外,CI框架还提供了一个资源加载器(Loader)的功能,用于加载CSS样式表、JavaScript文件等资源。以下是具体的步骤:

  1. 首先,在application/config/autoload.php文件中,找到以下代码并修改为:
$autoload['helper'] = array('url');
Salin selepas log masuk

在上述代码中,我们将url助手库添加到自动加载的助手列表中,以便在视图文件中使用base_url()函数。

  1. 在控制器文件中,无需再手动调用资源加载器,只需将视图文件中的引入CSS样式的代码修改为以下形式:
<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <?php echo link_tag('css/styles.css'); ?>
</head>
<body>
    <h1 id="这是一个示例页面">这是一个示例页面</h1>
    <p>这是一段示例内容。</p>
</body>
</html>
Salin selepas log masuk

在上述代码中,我们使用了link_tag()函数来动态生成<link>标签,并加载css/styles.css

Dalam fail example_view.php, tambahkan kod berikut:
  1. rrreee
  2. 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.

Seterusnya, kita perlu menentukan fail paparan untuk dimuatkan dalam fail pengawal rangka kerja CI. Buka fail pengawal yang sepadan dalam direktori 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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menggunakan rangka kerja CI dalam php? Bagaimana untuk menggunakan rangka kerja CI dalam php? Jun 01, 2023 am 08:48 AM

Dengan perkembangan teknologi rangkaian, PHP telah menjadi salah satu alat penting untuk pembangunan web. Salah satu rangka kerja PHP yang popular - CodeIgniter (selepas ini dirujuk sebagai CI) juga telah menerima lebih banyak perhatian dan penggunaan. Hari ini, kita akan melihat cara menggunakan rangka kerja CI. 1. Pasang rangka kerja CI Mula-mula, kita perlu memuat turun rangka kerja CI dan memasangnya. Muat turun versi terkini pakej termampat rangka kerja CI dari tapak web rasmi CI (https://codeigniter.com/). Selepas muat turun selesai, nyahzip

Cara membuat halaman susun atur tayangan slaid menggunakan HTML dan CSS Cara membuat halaman susun atur tayangan slaid menggunakan HTML dan CSS Oct 16, 2023 am 09:07 AM

Cara membuat halaman susun atur slaid menggunakan HTML dan CSS Pengenalan: Susun atur slaid digunakan secara meluas dalam reka bentuk web moden dan sangat menarik dan interaktif apabila memaparkan maklumat atau gambar. Artikel ini akan memperkenalkan cara membuat halaman susun atur slaid menggunakan HTML dan CSS, dan memberikan contoh kod khusus. 1. Struktur susun atur HTML Pertama, kita perlu mencipta struktur susun atur HTML, termasuk bekas slaid dan berbilang item slaid. Kodnya kelihatan seperti ini: &lt;!DOCTYPEhtml&

Cara menggunakan rangka kerja CI dalam PHP Cara menggunakan rangka kerja CI dalam PHP Jun 27, 2023 pm 04:51 PM

PHP adalah bahasa pengaturcaraan popular yang digunakan secara meluas dalam pembangunan web. Rangka kerja CI (CodeIgniter) ialah salah satu rangka kerja yang paling popular dalam PHP Ia menyediakan satu set lengkap alatan dan perpustakaan fungsi sedia, serta beberapa corak reka bentuk yang popular, membolehkan pembangun membangunkan aplikasi Web dengan lebih cekap. Artikel ini akan memperkenalkan langkah dan kaedah asas untuk membangunkan aplikasi PHP menggunakan rangka kerja CI. Fahami konsep asas dan struktur rangka kerja CI Sebelum menggunakan rangka kerja CI, kita perlu memahami beberapa konsep dan struktur asas. Bawah

Cara menggunakan:nth-child(-n+5) pseudo-class pemilih untuk memilih gaya CSS elemen anak yang kedudukannya kurang daripada atau sama dengan 5 Cara menggunakan:nth-child(-n+5) pseudo-class pemilih untuk memilih gaya CSS elemen anak yang kedudukannya kurang daripada atau sama dengan 5 Nov 20, 2023 am 11:52 AM

Cara menggunakan:nth-child(-n+5) pemilih kelas pseudo untuk memilih gaya CSS elemen anak yang kedudukannya kurang daripada atau sama dengan 5. Dalam CSS, pemilih kelas pseudo ialah alat berkuasa yang boleh dipilih melalui kaedah pemilihan tertentu Elemen tertentu dalam dokumen HTML. Antaranya, :nth-child() ialah pemilih kelas pseudo yang biasa digunakan yang boleh memilih elemen anak pada kedudukan tertentu. :nth-child(n) boleh memadankan elemen anak ke-nth dalam HTML dan :nth-child(-n) boleh memadankan

Bagaimana untuk menggunakan rangka kerja CI4 dalam php? Bagaimana untuk menggunakan rangka kerja CI4 dalam php? Jun 01, 2023 pm 02:40 PM

PHP ialah bahasa skrip sebelah pelayan yang digunakan secara meluas, dan CodeIgniter4 (CI4) ialah rangka kerja PHP popular yang menyediakan cara yang pantas dan terbaik untuk membina aplikasi web. Dalam artikel ini, kami akan membantu anda mula menggunakan rangka kerja CI4 untuk membangunkan aplikasi web yang cemerlang dengan membimbing anda melalui cara menggunakannya. 1. Muat turun dan pasang CI4 Mula-mula, anda perlu memuat turunnya dari tapak web rasmi (https://codeigniter.com/downloa

Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS Bagaimana untuk melaksanakan susun atur halaman sembang mudah menggunakan HTML dan CSS Oct 18, 2023 am 08:42 AM

Cara menggunakan HTML dan CSS untuk melaksanakan susun atur halaman sembang yang mudah Dengan perkembangan teknologi moden, orang ramai semakin bergantung pada Internet untuk komunikasi dan komunikasi. Dalam halaman web, halaman sembang adalah keperluan susun atur yang sangat biasa. Artikel ini akan memperkenalkan anda kepada cara menggunakan HTML dan CSS untuk melaksanakan reka letak halaman sembang yang mudah, dan memberikan contoh kod khusus. Pertama, kita perlu membuat fail HTML, anda boleh menggunakan mana-mana editor teks. Mengambil index.html sebagai contoh, mula-mula buat HTML asas

Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS Oct 25, 2023 am 10:42 AM

Cara membuat reka letak dinding kad responsif menggunakan HTML dan CSS Dalam reka bentuk web moden, reka letak responsif adalah teknologi yang sangat penting. Dengan menggunakan HTML dan CSS, kami boleh mencipta reka letak dinding kad responsif yang menyesuaikan diri dengan peranti dengan saiz skrin yang berbeza. Berikut adalah pandangan yang lebih dekat tentang cara membuat reka letak dinding kad responsif yang mudah menggunakan HTML dan CSS. Bahagian HTML: Pertama, kita perlu menyediakan struktur asas dalam fail HTML. Kita boleh menggunakan senarai tidak tersusun (&lt;ul&gt;) dan

Bagaimana untuk melaksanakan susun atur halaman terperinci menggunakan HTML dan CSS Bagaimana untuk melaksanakan susun atur halaman terperinci menggunakan HTML dan CSS Oct 20, 2023 am 09:54 AM

Cara menggunakan HTML dan CSS untuk melaksanakan susun atur halaman terperinci HTML dan CSS ialah teknologi asas untuk mencipta dan mereka bentuk halaman web Dengan menggunakan kedua-dua ini dengan sewajarnya, kita boleh mencapai pelbagai reka letak halaman web yang kompleks. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak halaman terperinci dan memberikan contoh kod khusus. Mencipta Struktur HTML Mula-mula, kita perlu mencipta struktur HTML untuk meletakkan kandungan halaman kita. Berikut ialah struktur HTML asas: &lt;!DOCTYPEhtml&g

See all articles