Susun atur grid CSS moden yang mudah dan responsif-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Susun atur grid CSS moden yang mudah dan responsif

Joseph Gordon-Levitt

Feb 10, 2025 am 10:13 AM

Easy and Responsive Modern CSS Grid Layout

mata teras

dan grid-column untuk mencari item grid, serta sifat seperti grid-row, justify-items dan align-items untuk menyelaraskan dan menyesuaikan item. Ia juga membolehkan grid bersarang, di mana unsur -unsur kanak -kanak grid sendiri boleh menjadi bekas grid. align-self

Artikel ini akan menunjukkan cara membuat susun atur grid CSS moden yang responsif, menunjukkan cara menggunakan kod balik balik untuk pelayar yang lebih tua, bagaimana untuk menambah langkah grid CSS, dan bagaimana untuk membina semula susun atur pada peranti kecil dan menggunakan atribut penjajaran yang berpusat unsur -unsur.

Dalam artikel sebelumnya, kami meneroka empat teknik yang berbeza untuk membina susun atur grid responsif yang mudah. Jawatan itu ditulis pada tahun 2014 - sebelum grid CSS tersedia - jadi dalam tutorial ini kita akan menggunakan struktur HTML yang sama tetapi dengan susun atur grid CSS moden.

Dalam tutorial ini, kami akan menggunakan Float untuk membuat demo dengan susun atur asas dan kemudian meningkatkannya dengan grid CSS. Kami akan menunjukkan banyak utiliti berguna seperti elemen yang berpusat, merangkumi projek, dan mudah mengubah susun atur pada peranti kecil dengan mentakrifkan semula kawasan grid dan menggunakan pertanyaan media. Anda boleh mencari kod dalam codepen ini:

pautan codepen

susun atur grid CSS moden responsif

Sebelum kita menyelam untuk membuat demonstrasi grid responsif, mari kita mula memperkenalkan grid CSS.

CSS Grid adalah sistem dua dimensi yang kuat yang ditambah kepada pelayar yang paling moden pada tahun 2017. Ia benar -benar mengubah cara kami membuat susun atur HTML. Susun atur grid membolehkan kami membuat struktur grid dalam CSS, bukan dalam HTML.

Di samping IE11, penyemak imbas yang paling moden menyokong grid CSS. Anda boleh menggunakan Caniuse.com untuk menyemak sokongan.

Susun atur grid mempunyai bekas induk yang

harta ditetapkan kepada display atau grid. Unsur -unsur kanak -kanak dari bekas adalah item grid, dan mereka terletak secara tersirat kerana algoritma grid yang kuat. Anda juga boleh menggunakan kelas yang berbeza untuk mengawal penempatan, saiz, kedudukan, dan aspek lain dari projek. inline-grid

mari kita mulakan dengan halaman HTML asas. Buat fail HTML dan tambahkan yang berikut:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

Kami menggunakan semantik HTML untuk menentukan tajuk, sidebar, badan, dan bahagian kaki halaman. Di bahagian utama, kami menggunakan tag <article></article> untuk menambah satu set item. <article></article> adalah tag semantik HTML5 yang boleh digunakan untuk membungkus kandungan bebas dan mandiri. Halaman tunggal boleh mengandungi sebilangan tag <article></article>.

Ini adalah tangkapan skrin halaman pada peringkat ini:

Easy and Responsive Modern CSS Grid Layout

Seterusnya, mari tambahkan gaya CSS asas. Tambahkan tag

di kepala dokumen dan tambahkan gaya berikut: <style></style>

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

Ini adalah halaman demo kecil, jadi kami akan gaya tag secara langsung untuk kebolehbacaan dan bukannya menggunakan sistem penamaan kelas.

Kami menggunakan terapung untuk meletakkan sidebar ke kiri, letakkan badan utama ke kanan, dan tetapkan lebar bar sisi ke lebar

6.3rem tetap. Kemudian, kami mengira dan menetapkan lebar baki bahagian badan menggunakan fungsi CSS . Bahagian utama mengandungi perpustakaan projek yang dianjurkan ke dalam blok menegak. calc()

susun atur tidak sempurna. Sebagai contoh, ketinggian bar sisi adalah berbeza dari ketinggian bahagian kandungan utama. Terdapat pelbagai teknik CSS yang dapat menyelesaikan masalah ini, tetapi kebanyakannya adalah tip atau penyelesaian. Oleh kerana susun atur ini adalah sandaran untuk grid, ia akan dilihat oleh pengguna yang lebih sedikit dan lebih sedikit. Kejatuhan itu tersedia dan cukup baik.

Versi terkini Chrome, Firefox, Edge, Opera, dan Safari semuanya menyokong grid CSS, yang bermaksud jika pelawat anda menggunakan penyemak imbas ini, anda tidak perlu risau tentang menyediakan sandaran. Anda juga perlu mempertimbangkan penyemak imbas Evergreen. Versi terkini Chrome, Firefox, Edge dan Safari adalah pelayar malar hijau. Iaitu, mereka akan mengemas kini secara automatik dan diam -diam tanpa mendorong pengguna. Untuk memastikan susun atur anda berfungsi dengan baik di setiap penyemak imbas, anda boleh memulakan dengan sandaran lalai berasaskan terapung dan kemudian memohon susun atur grid moden menggunakan teknik peningkatan progresif. Pengguna menggunakan pelayar yang lebih tua tidak akan mendapat pengalaman yang sama, tetapi itu cukup baik.

Peningkatan Progresif: Anda tidak perlu menutup segala -galanya

Apabila menambah susun atur grid CSS di atas susun atur susun atur, anda tidak perlu menulis ganti semua tag atau menggunakan gaya CSS yang berasingan:

Dalam penyemak imbas yang tidak menyokong grid CSS, sifat grid yang anda tambahkan akan hanya diabaikan.
Jika anda menggunakan float untuk elemen susun atur, ingatlah bahawa item grid mengambil keutamaan lebih terapung. Iaitu, jika anda menambah gaya float: left|right ke elemen yang juga merupakan elemen grid (anak elemen induk dengan gaya display: grid), apungan akan diabaikan dan grid diambil.
Peraturan @supports boleh digunakan untuk memeriksa sokongan untuk ciri -ciri tertentu dalam CSS. Ini membolehkan kita mengatasi gaya sandaran jika perlu, sementara pelayar yang lebih tua mengabaikan blok @supports.

Sekarang, mari tambahkan grid CSS ke halaman kami. Pertama, mari kita tanda sebagai bekas grid dan tetapkan lajur grid, baris, dan kawasan:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

Kami menggunakan harta display:grid untuk menandakan sebagai bekas grid. Kami menetapkan jurang grid 0.1VW. GAP membolehkan anda membuat slot antara sel grid dan bukannya menggunakan margin. Kami juga menambah dua lajur menggunakan grid-template-columns. Lajur pertama mengamalkan lebar tetap 6.5 REM, dan lajur kedua menggunakan lebar sisa. fr adalah unit pecahan, dan 1FR adalah sama dengan sebahagian ruang yang ada.

Seterusnya, kami menggunakan grid-template-rows untuk menambah tiga baris. Baris pertama menggunakan ketinggian tetap 6rem, baris ketiga menggunakan ketinggian tetap 3rem, dan ruang bebas yang tersisa (1FR) diperuntukkan ke baris kedua.

Kami kemudian menggunakan grid-template-areas untuk menetapkan sel -sel maya yang dihasilkan oleh persimpangan lajur dan baris ke rantau ini. Sekarang kita perlu menggunakan grid-area untuk benar -benar menentukan kawasan -kawasan yang dinyatakan dalam templat kawasan:

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

Kebanyakan kod balik tidak mempunyai kesan sampingan pada grid CSS, kecuali untuk lebar bahagian badan width: calc(100% - 7.2rem);, yang mengira lebar baki bahagian badan selepas menolak lebar sidebar ditambah ruang margin/pengisian.

Ini adalah tangkapan skrin hasilnya. Sila ambil perhatian bahawa kawasan utama tidak menduduki semua lebar yang tinggal:

Easy and Responsive Modern CSS Grid Layout

Untuk menyelesaikan masalah ini, kita boleh menambah

apabila menyokong grid: width: auto;

body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}

Ini adalah tangkapan skrin hasil semasa:

~~Tambah mesh bersarang~~

Elemen kanak -kanak grid itu sendiri boleh menjadi bekas grid. Mari kita tetapkan bahagian utama sebagai bekas grid:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

Kami menggunakan jurang grid 0.1VW dan gunakan fungsi repeat(auto-fill, minmax(12rem, 1fr)); untuk menentukan lajur dan baris. Pilihan auto-fill cuba mengisi ruang bebas dengan seberapa banyak lajur atau baris yang mungkin, dan mewujudkan lajur atau baris tersirat jika diperlukan. Jika anda ingin meletakkan lajur atau baris yang ada ke dalam ruang yang ada, anda perlu menggunakan auto-fit. Baca penjelasan yang baik mengenai perbezaan antara auto-fill dan auto-fit.

Ini adalah tangkapan skrin hasilnya:

Easy and Responsive Modern CSS Grid Layout

Gunakan grid

, grid-column dan grid-row kata kunci span

grid CSS menyediakan

dan grid-column, yang membolehkan anda mencari item grid dalam grid induk menggunakan garisan grid. Mereka adalah singkatan untuk sifat berikut: grid-row

: Tentukan kedudukan permulaan item grid dalam baris grid grid-row-start
: Tentukan kedudukan akhir item grid dalam baris grid grid-row-end
: Tentukan kedudukan permulaan item grid dalam lajur grid grid-column-start
: Tentukan kedudukan akhir item grid dalam lajur grid grid-column-end

anda juga boleh menggunakan kata kunci

untuk menentukan berapa lajur atau baris untuk rentang. span

mari kita membuat elemen kanak -kanak kedua kawasan utama merangkumi empat lajur dan dua baris dan meletakkannya dari lajur kedua dan baris pertama (yang juga kedudukan lalainya):

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

Ini adalah tangkapan skrin hasilnya:

~~menggunakan utiliti penjajaran grid~~

Kami mahu memusatkan teks dalam tajuk, sidebar dan footer, dan nombor dalam elemen

<article></article> grid CSS menyediakan enam sifat

, justify-items, align-items, justify-content, align-content, justify-self, dan align-self yang boleh digunakan untuk menyelaraskan dan menyesuaikan item grid . Mereka sebenarnya adalah sebahagian daripada modul penjajaran kotak CSS.

Tambahkan yang berikut dalam header, aside, article dan footer pemilih:

body {
  /*...*/
  display: grid;
  grid-gap: 0.1vw;
  grid-template-columns: 6.5rem 1fr;
  grid-template-rows: 6rem 1fr 3rem;
  grid-template-areas: "header   header"
                       "sidebar content"
                       "footer footer";  
}

justify-items digunakan untuk menyesuaikan item grid di sepanjang paksi baris atau arah mendatar.
align-items Align item grid di sepanjang paksi lajur atau arah menegak. Mereka semua boleh mengambil start, end, center, dan stretch nilai.

Ini adalah tangkapan skrin selepas elemen berpusat:

Easy and Responsive Modern CSS Grid Layout

membina semula susun atur grid dalam peranti kecil

susun atur demo kami adalah mudah untuk skrin sederhana dan besar, tetapi mungkin bukan cara terbaik untuk membina halaman untuk peranti skrin kecil. Dengan grid CSS, kita dapat dengan mudah mengubah struktur susun atur ini untuk secara linearize dalam peranti kecil -dengan mentakrifkan semula kawasan grid dan menggunakan pertanyaan media.

Berikut adalah tangkapan skrin sebelum menambahkan kod untuk membina semula susun atur pada peranti kecil:

Easy and Responsive Modern CSS Grid Layout

Sekarang, tambahkan kod CSS berikut:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Grid Layout Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h2 id="CSS-Grid-Layout-Example">CSS Grid Layout Example</h2>
  </header>
  <aside class="sidebar">
    <p>Sidebar</p>
  </aside>
  <main>
    <article>1</article>
    <article>2</article>
    <article>11</article>
  </main>
  <footer>
    <p>Copyright 2018</p>
  </footer>
</body>
</html>

pada peranti dengan lebar kurang daripada 575 piksel, susun atur menjadi linear:

~~Perhatikan bahawa lebar bar sisi tidak mengisi lebar yang ada. Ini disebabkan oleh kod sandaran, jadi yang perlu kita lakukan ialah menggunakan~~

override

pada penyemak imbas yang dibolehkan grid width: auto; width: 6.3rem; Ini adalah tangkapan skrin hasil akhir:

body {
  background: #12458c;
  margin: 0rem;
  padding: 0px;
  font-family: -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
            "Fira Sans", "Droid Sans", "Helvetica Neue",
            sans-serif;
}

header {
  text-transform: uppercase;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #fff;
  border-style: solid;
  border-width: 2px;
}

aside {
  color: #fff;
  border-width:2px;
  border-style: solid;
  float: left;
  width: 6.3rem;
}

footer {
  color: #fff;
  border-width:2px;
  border-style: solid;
  clear: both;
}

main {
  float: right;
  width: calc(100% - 7.2rem);
  padding: 5px;
  background: hsl(240, 100%, 50%);
}

main > article {
  background: hsl(240, 100%, 50%);
  background-image: url('https://source.unsplash.com/daily');
  color: hsl(240, 0%, 100%);
  border-width: 5px;
}

Anda boleh mencari kod akhir dalam codepen yang dipaparkan pada permulaan artikel ini, atau secara langsung mengakses codepen:

pautan codepen Easy and Responsive Modern CSS Grid Layout

Kesimpulan

Dalam tutorial ini, kami membuat susun atur demo responsif menggunakan grid CSS. Kami menunjukkan menggunakan kod sandaran untuk pelayar yang lebih tua, langkah demi langkah menambah grid CSS, membina semula susun atur dalam peranti kecil, dan menggunakan elemen pusat atribut penjajaran.

Soalan Lazim mengenai susun atur grid CSS moden yang mudah dan responsif

Apakah perbezaan antara grid CSS dan Flexbox? Grid CSS dan Flexbox adalah kedua -dua sistem susun atur yang kuat dalam CSS. Walaupun mereka boleh digunakan secara bergantian dalam beberapa kes, mereka masing -masing mempunyai kelebihan unik mereka sendiri. Flexbox adalah model susun atur satu dimensi yang sangat sesuai untuk memberikan item di sepanjang lajur atau baris. Grid CSS, sebaliknya, adalah sistem susun atur dua dimensi yang sesuai untuk mengatur unsur-unsur dalam baris dan lajur pada masa yang sama. Ia sesuai untuk mewujudkan susun atur web yang kompleks.

bagaimana membuat susun atur grid CSS saya responsif?

grid CSS menjadikannya mudah untuk membuat susun atur responsif tanpa pertanyaan media. Anda boleh menggunakan unit

, yang mewakili sebahagian ruang yang tersedia dalam bekas grid. Sebagai contoh, jika anda mahu tiga lajur monospace, anda boleh menggunakan

. Lajur akan mengubah saiz secara automatik agar sesuai dengan skrin.

Bolehkah saya menggunakan grid css dan flexbox bersama -sama? fr grid-template-columns: 1fr 1fr 1fr Ya, grid CSS dan Flexbox boleh digunakan bersama untuk susun atur. Anda boleh menggunakan grid CSS untuk membuat susun atur halaman keseluruhan dan kemudian gunakan Flexbox untuk susun atur komponen individu atau bahagian dalam sel grid. Gabungan ini membolehkan tahap fleksibiliti dan kawalan yang tinggi ke atas susun atur.

Bagaimana untuk menyelaraskan item dalam grid CSS?

Grid CSS menyediakan beberapa sifat untuk menyelaraskan item, termasuk justify-items, align-items, justify-self, dan align-self. Ciri -ciri ini boleh digunakan untuk menyelaraskan item di sepanjang paksi baris (Align) atau paksi lajur (Align). Sebagai contoh, justify-items: center akan memusatkan item di sepanjang paksi garis.

Bagaimana untuk membuat jurang antara projek grid?

anda boleh menggunakan harta untuk membuat jurang antara item grid. Harta ini adalah singkatan untuk grid-gap dan grid-row-gap. Sebagai contoh, grid-column-gap akan membuat jurang 20px antara semua item grid. grid-gap: 20px Bagaimanakah kata kunci

dan `auto-fill` berfungsi dalam grid CSS? `auto-fit` Kata kunci

dan auto-fill digunakan dengan fungsi auto-fit dalam sifat grid-template-columns dan grid-template-rows. repeat() Gunakan sebanyak mungkin item untuk mengisi baris atau lajur, dan buat sel kosong jika terdapat item yang tidak mencukupi. auto-fill berkelakuan sama, tetapi ia runtuh sel kosong, menjadikan item meregangkan untuk mengisi baris atau lajur. auto-fit

Bagaimana untuk bertindih item dalam grid CSS?

Dalam grid CSS, anda boleh bertindih dengan meletakkan item pada sel grid yang sama atau memilikinya merangkumi pelbagai sel. Anda boleh menggunakan atribut

untuk mengawal susunan item tumpang tindih. z-index

Bolehkah saya menggunakan grid CSS dalam semua pelayar saya?

grid CSS disokong oleh semua pelayar moden seperti Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, Internet Explorer tidak menyokongnya. Jika anda perlu menyokong Internet Explorer, anda mungkin perlu menggunakan susun atur sandaran.

Bagaimana untuk membuat grid bersarang dalam grid CSS?

anda boleh membuat mesh bersarang dengan menetapkan item mesh itu sendiri sebagai bekas mesh. Hanya gunakan

untuk projek grid anda dan tentukan susun atur grid seperti yang anda lakukan untuk sebarang bekas grid. display: grid

Bagaimana untuk mengawal saiz trek grid dalam grid CSS?

anda boleh menggunakan sifat

dan grid-template-rows untuk mengawal saiz trek grid (baris dan lajur). Anda boleh menentukan saiz menggunakan pelbagai unit, seperti piksel (px), peratusan (%), atau pecahan (FR). grid-template-columns

Sila ambil perhatian bahawa kandungan di atas telah menulis semula dan menggilap teks asal, berusaha untuk menjadikan artikel itu lebih lancar, lebih mudah dibaca, dan lebih banyak lagi dengan gaya penulisan artikel dalam talian moden tanpa mengubah makna asal. Format imej tetap sama. Pautan Codepen tidak tersedia kerana ketidakupayaan untuk mengakses laman web dan fail luaran. Sila ganti sendiri.

Atas ialah kandungan terperinci Susun atur grid CSS moden yang mudah dan responsif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

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

Artikel Berkaitan

Simulasi pergerakan tetikusApr 22, 2025 am 11:45 AM

Sekiranya anda pernah memaparkan animasi interaktif semasa ceramah langsung atau kelas, maka anda mungkin tahu bahawa ia tidak selalu mudah untuk berinteraksi dengan slaid anda

Powering Carian dengan Tindakan Astro dan Fuse.jsApr 22, 2025 am 11:41 AM

Dengan Astro, kami dapat menjana sebahagian besar laman web kami semasa membina kami, tetapi mempunyai sedikit kod pelayan yang dapat mengendalikan fungsi carian menggunakan sesuatu seperti fuse.js. Dalam demo ini, kami akan menggunakan fius untuk mencari melalui satu set "penanda buku" peribadi

Undefined: Nilai Boolean KetigaApr 22, 2025 am 11:38 AM

Saya ingin melaksanakan mesej pemberitahuan dalam salah satu projek saya, sama seperti apa yang anda lihat dalam Dokumen Google semasa dokumen menyimpan. Dengan kata lain, a

Dalam mempertahankan pernyataan ternaryApr 22, 2025 am 11:25 AM

Beberapa bulan yang lalu, saya berada di berita penggodam (seperti yang dilakukan) dan saya berlari melintasi artikel (kini dipadam) tentang tidak menggunakan jika kenyataan. Sekiranya anda baru dengan idea ini (seperti saya

Menggunakan API Ucapan Web untuk terjemahan berbilang bahasaApr 22, 2025 am 11:23 AM

Sejak awal fiksyen sains, kami telah fantasized tentang mesin yang bercakap dengan kami. Hari ini adalah perkara biasa. Walaupun begitu, teknologi untuk membuat

Blok Jetpack GutenbergApr 22, 2025 am 11:20 AM

Saya masih ingat ketika Gutenberg dibebaskan ke teras, kerana saya berada di Wordcamp kami pada hari itu. Beberapa bulan telah berlalu sekarang, jadi saya bayangkan semakin banyak kita

Membuat komponen penomboran yang boleh diguna semula di VueApr 22, 2025 am 11:17 AM

Idea di sebalik kebanyakan aplikasi web adalah untuk mengambil data dari pangkalan data dan membentangkannya kepada pengguna dengan cara yang terbaik. Apabila kita berurusan dengan data di sana

Menggunakan 'bayang-bayang kotak' dan laluan klip bersamaApr 22, 2025 am 11:13 AM

Let ' s melakukan sedikit langkah demi langkah keadaan di mana anda tidak boleh melakukan apa yang kelihatannya masuk akal, tetapi anda masih boleh melakukannya dengan penipuan CSS. Dalam ini

See all articles

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

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Assassin's Creed Shadows - Cara Mencari Orang Panda

1 bulan yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang laluByDDD

<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran

3 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Tunjukkan Lagi