hujung hadapan web
tutorial css
Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan
Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan
Rangka kerja reka letak CSS: Terokai lima rangka kerja reka letak yang biasa digunakan
Pengenalan:
Dalam reka bentuk web, reka letak adalah bahagian yang penting. Rangka kerja reka letak CSS boleh membantu kami membina halaman web dengan cepat dengan gaya reka letak yang berbeza. Artikel ini akan memperkenalkan lima rangka kerja reka letak CSS yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan rangka kerja ini dengan lebih baik.
1. Bootstrap:
Bootstrap ialah salah satu rangka kerja reka letak CSS yang paling popular pada masa ini. Ia mempunyai komponen yang kaya dan ciri responsif yang berkuasa yang boleh membantu kami membina halaman web moden dengan cepat. Berikut ialah contoh kod ringkas yang menunjukkan cara menggunakan Bootstrap untuk melaksanakan reka letak halaman web biasa:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">左侧栏</div>
<div class="col-md-6">中间内容</div>
<div class="col-md-3">右侧栏</div>
</div>
</div>
</body>
</html>Kod di atas menggunakan sistem grid Bootstrap untuk membahagikan halaman kepada tiga lajur, lajur kiri, kandungan tengah dan bar sisi kanan dan secara automatik menyesuaikan diri dengan saiz skrin yang berbeza.
2. UI Semantik:
UI Semantik ialah satu lagi rangka kerja reka letak CSS yang popular dan mudah digunakan. Ia menyediakan nama kelas semantik, yang boleh menjadikan kod lebih mudah dibaca dan diselenggara. Berikut ialah contoh kod menggunakan UI Semantik:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
<div class="ui grid">
<div class="three column row">
<div class="column">左侧栏</div>
<div class="column">中间内容</div>
<div class="column">右侧栏</div>
</div>
</div>
</body>
</html>Kod di atas menggunakan sistem grid UI Semantik, membahagikan halaman kepada tiga lajur dan menggunakan nama kelas semantik untuk menjadikan kod lebih mudah dibaca.
3 Foundation:
Foundation ialah rangka kerja CSS yang fleksibel dan berkuasa yang bukan sahaja merangkumi fungsi reka letak, tetapi juga menyediakan banyak komponen UI. Berikut ialah contoh kod menggunakan Foundation:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
</head>
<body>
<div class="grid-container">
<div class="grid-x">
<div class="cell small-4">左侧栏</div>
<div class="cell small-4">中间内容</div>
<div class="cell small-4">右侧栏</div>
</div>
</div>
</body>
</html>Kod di atas menggunakan sistem grid Foundation untuk membahagikan halaman kepada tiga lajur dan menggunakan nama kelas yang berbeza untuk mentakrifkan lebar lajur.
4. PureCSS:
PureCSS ialah rangka kerja CSS yang ringan, terutamanya digunakan untuk membina reka letak halaman web ringkas dengan cepat. Walaupun fungsinya agak mudah, ia mudah untuk dimulakan dan disesuaikan. Berikut ialah contoh kod menggunakan PureCSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.5/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-3">左侧栏</div>
<div class="pure-u-1-3">中间内容</div>
<div class="pure-u-1-3">右侧栏</div>
</div>
</body>
</html>Kod di atas menggunakan sistem grid PureCSS untuk membahagikan halaman kepada tiga lajur dan menentukan lebar lajur menggunakan nama kelas.
5. Tailwind CSS:
Tailwind CSS ialah rangka kerja CSS serba baharu Ia menggunakan kaedah yang berbeza daripada rangka kerja tradisional, mentakrifkan gaya dengan menggabungkan nama kelas. Berikut ialah contoh kod menggunakan Tailwind CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@1.5.1/dist/tailwind.min.css">
</head>
<body>
<div class="grid grid-cols-3">
<div class="col-span-1">左侧栏</div>
<div class="col-span-1">中间内容</div>
<div class="col-span-1">右侧栏</div>
</div>
</body>
</html>Kod di atas menggunakan sistem grid Tailwind CSS untuk membahagikan halaman kepada tiga lajur dan mentakrifkan lebar lajur melalui nama kelas.
Kesimpulan:
Melalui pengenalan artikel ini, kami telah mempelajari tentang lima rangka kerja susun atur CSS yang biasa digunakan, iaitu Bootstrap, Semantic UI, Foundation, PureCSS dan Tailwind CSS. Mereka masing-masing mempunyai ciri tersendiri, dan anda boleh memilih rangka kerja yang sesuai untuk susun atur halaman web mengikut keperluan yang berbeza. Saya harap pembaca dapat menguasai dan menggunakan rangka kerja susun atur ini dengan lebih baik melalui pengenalan dan contoh kod artikel ini.
Atas ialah kandungan terperinci Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Kemahiran aplikasi fleksibel atribut kedudukan dalam H5
Dec 27, 2023 pm 01:05 PM
Bagaimana untuk menggunakan atribut kedudukan secara fleksibel dalam H5 Dalam pembangunan H5, kedudukan dan susun atur elemen sering terlibat. Pada masa ini, sifat kedudukan CSS akan mula dimainkan. Atribut kedudukan boleh mengawal kedudukan elemen pada halaman, termasuk kedudukan relatif, kedudukan mutlak, kedudukan tetap dan kedudukan melekit. Artikel ini akan memperkenalkan secara terperinci cara menggunakan atribut kedudukan secara fleksibel dalam pembangunan H5.
Petua pengoptimuman sifat reka letak CSS: kedudukan melekit dan flexbox
Oct 20, 2023 pm 03:15 PM
Petua pengoptimuman atribut reka letak CSS: positionsticky dan flexbox Dalam pembangunan web, reka letak adalah aspek yang sangat penting. Struktur susun atur yang baik boleh meningkatkan pengalaman pengguna dan menjadikan halaman lebih cantik dan mudah dinavigasi. Ciri reka letak CSS adalah kunci untuk mencapai matlamat ini. Dalam artikel ini, saya akan memperkenalkan dua teknik pengoptimuman sifat reka letak CSS yang biasa digunakan: positionsticky dan flexbox, dan memberikan contoh kod khusus. 1. jawatan
Membawa anda langkah demi langkah untuk melaksanakan dadu 3D menggunakan CSS Flex dan susun atur Grid (dengan kod)
Sep 23, 2022 am 09:58 AM
Dalam temu bual bahagian hadapan, kami sering ditanya bagaimana untuk melaksanakan susun atur dadu/mahjong menggunakan CSS. Artikel berikut akan memperkenalkan anda kepada kaedah menggunakan CSS untuk mencipta dadu 3D (lentur dan susun atur Grid untuk melaksanakan dadu 3D, saya harap ia akan membantu anda!
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur sama ketinggian, lebar sama, dan jarak yang sama
Oct 27, 2023 pm 05:51 PM
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur sama tinggi, sama lebar, sama jarak Contoh kod khusus Pengenalan: Dalam reka bentuk web moden, reka letak adalah faktor yang sangat kritikal. Untuk halaman yang perlu memaparkan sejumlah besar kandungan, cara mengatur kedudukan dan saiz elemen secara munasabah untuk mencapai keterlihatan yang baik dan kemudahan penggunaan adalah isu penting. Flexbox (Tempat Letak Kotak Fleksibel) ialah alat yang sangat berkuasa di mana pelbagai keperluan susun atur fleksibel boleh direalisasikan dengan mudah. Artikel ini akan memperkenalkan Flexbox secara terperinci
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur ketinggian sama suai
Oct 21, 2023 am 10:00 AM
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur ketinggian sama suai, contoh kod khusus diperlukan Pengenalan: Dalam reka bentuk dan pembangunan web, melaksanakan susun atur ketinggian sama suai adalah keperluan biasa. Kaedah susun atur CSS tradisional sering menghadapi beberapa kesukaran apabila berurusan dengan susun atur ketinggian yang sama, dan susun atur Flexbox memberikan kami penyelesaian yang mudah dan berkuasa. Artikel ini akan memperkenalkan konsep asas dan penggunaan biasa susun atur Flexbox, dan memberikan contoh kod khusus untuk membantu pembaca menguasai penggunaan Flexbox dengan cepat untuk melaksanakan mereka sendiri
Bagaimana untuk menggunakan teknologi flexbox CSS3 untuk mencapai pengedaran kandungan web yang sekata?
Sep 11, 2023 am 11:33 AM
Bagaimana untuk menggunakan teknologi flexbox CSS3 untuk mencapai pengedaran kandungan web yang sekata? Dengan pembangunan reka bentuk web, orang ramai mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk susun atur halaman web. Untuk mencapai pengedaran kandungan web yang sekata, teknologi flexbox CSS3 telah menjadi penyelesaian yang sangat berkesan. Artikel ini akan memperkenalkan cara menggunakan teknologi flexbox untuk mencapai pengedaran kandungan web yang sekata, dan memberikan beberapa contoh praktikal. 1. Apakah teknologi flexbox (susun atur elastik) ialah ciri baharu yang ditambah dalam CSS3.
Tutorial HTML: Cara menggunakan Flexbox untuk susun atur ketinggian sama menegak
Oct 16, 2023 am 09:12 AM
Tutorial HTML: Cara Menggunakan Flexbox untuk Susun Atur Ketinggian Menegak Dalam pembangunan web, reka letak sentiasa menjadi isu penting. Terutama apabila perlu untuk melaksanakan susun atur ketinggian sama menegak, kaedah susun atur CSS tradisional sering menghadapi beberapa kesukaran. Masalah ini boleh diselesaikan dengan mudah menggunakan susun atur Flexbox. Tutorial ini akan memperkenalkan secara terperinci cara menggunakan Flexbox untuk susun atur ketinggian sama menegak dan memberikan contoh kod khusus. Flexbox ialah ciri baharu dalam CSS3 yang boleh digunakan untuk mencipta reka letak yang fleksibel dan responsif.
Tutorial HTML: Cara Menggunakan Flexbox untuk Reka Letak Teragih Sekata
Oct 16, 2023 am 09:31 AM
Tutorial HTML: Cara Menggunakan Flexbox untuk Reka Letak Teragih Sekata Pengenalan: Dalam reka bentuk web, elemen susun atur selalunya diperlukan. Kaedah susun atur tradisional mempunyai beberapa had, dan Flexbox (susun atur kotak fleksibel) ialah kaedah susun atur yang boleh memberikan lebih fleksibiliti dan kuasa. Artikel ini akan memperkenalkan cara menggunakan Flexbox untuk mencapai reka letak pengedaran yang sekata dan memberikan contoh kod khusus. 1. Pengenalan kepada Flexbox Flexbox ialah model susun atur kotak fleksibel yang diperkenalkan dalam CSS3, yang membolehkan elemen untuk
