cari
Rumahhujung hadapan webtutorial cssRingkasan pembelajaran penggunaan CSS_Pertukaran pengalaman

Gunakan kelas sesedikit mungkin, kerana anda boleh mengecam pengecaman, seperti: .News h3 tanpa menambah kelas pada h3






3 Jika tiada unsur sedia ada untuk dibezakan, gunakan div


  • Rumah

  • Tentang Kami


boleh ditukar kepada


    Rumah

  • Mengenai Kami

4 Pemilih
p a h1 type selector
Li a {text-decoration:none} Descendant selector
*{ padding:0; } Pemilih universal, semua elemen pada halaman.
5. Kedudukan
Kedudukan relatif adalah relatif kepada kedudukan di mana ia sepatutnya muncul
Kedudukan mutlak adalah relatif kepada unsur nenek moyang terdekat (eksperimen mendapati bahawa unsur nenek moyang perlu ditetapkan kepada kedudukan relatif)
Terapung Kotak boleh bergerak ke kiri dan ke kanan sehingga tepinya menyentuh kotak berisi atau tepi kotak lain yang mengandungi Kerana kotak terapung tidak berada dalam aliran biasa dokumen, kotak dalam aliran biasa dokumen berkelakuan seolah-olah. kotak terapung tidak wujud.
Ringkasan: Jika div diapungkan, div seterusnya akan dianggap seolah-olah yang pertama tidak wujud. Ketahui apabila anda menemui kotak terapung atau mengandungi.
Jelas: kanan Bahagian kanan kotak terapung tersedia
Jelas: kiri Bahagian kiri kotak terapung tersedia
Jelas: kedua-dua belah kotak terapung tidak tersedia
Menggunakan limpahan atribut dengan nilai tersembunyi atau auto akan membersihkan secara automatik Sebarang elemen terapung yang terkandung.
6. Latar belakang kecerunan
Buat imej kecerunan yang tinggi tetapi sempit, berjubin secara mendatar
Badan
{
Latar belakang: #ccc url (gradient.gif) repeat-x
}
Tetapi sukar untuk meramalkan betapa tingginya halaman imej, jadi anda boleh menggabungkannya dengan warna latar belakang Apabila imej tamat, warna akan keluar Jika perbezaan warna antara kedua-duanya adalah sangat dekat tidak akan kelihatan.
Contoh: Tambahkan ikon pada setiap tajuk
H1
{
Padding-left:30px;
Latar belakang: url(/images/bullet.gif) no-repeat left center; >}
7. Serlahkan pelbagai jenis pautan
seperti: pautan ke tapak luar, e-mel, muat turun, dll.
.luaran
{
Latar Belakang: url (/images/externalLink. gif) no-repeat right top;
Padding-right:10px;
}
8 Elemen khusus jadual
1) Ringkasan dan Kapsyen
Atribut ringkasan boleh digunakan pada label jadual, Terangkan kandungan jadual
Kapsyen Tajuk jadual
2) thead tbody tfoot
I.e Anda boleh meletakkan semua pengepala lajur dalam elemen thead Jika anda memilih untuk menggunakan elemen thead atau tfoot, anda mesti menggunakan sekurang-kurangnya satu elemen tbody. Jadual hanya boleh menggunakan satu thead dan tfoot, tetapi boleh menggunakan berbilang tbody
9 Model sempadan jadual
1) Model individu: Setiap sel mempunyai sempadan di sekelilingnya. 2) Model tindanan: Jidar kongsi Grid Sel
10 Reka letak Borang
Sempadan: versi yang lebih rendah tidak menyokongnya, tetapi anda boleh menggunakan
Filedset
{
Sempadan: pepejal 0. telus;
}
11 . Label label borang
Mod tersirat:
e-mel

e-mel

Sama ada dalam bentuk Penggunaan perenggan adalah kontroversi.
12. Mari reka drama Kaedah 1:




#pembungkus
{ Lebar: 720px;
Margin:0 auto;
}
Tetapi kaedah ini tidak biasa dalam IE6 dan ke bawah
Kaedah 2 (perlu digabungkan berdasarkan dua elemen): Gunakan kosong automatik
Body
{
Text-align:center;
Min-width: 760;
}
#wrapper
{
Width: 720px
Margin: 0 auto;
Selaraskan teks: ke kiri;
}
Kaedah 3: Gunakan kedudukan dan ruang kosong negatif untuk menukar
#pembungkus
{
Lebar: 720px; 🎜> Kiri: 50%;
Margin-left: -360;
}
13: Susun atur bendalir: Semua saiz ditetapkan dalam peratusan dan bukannya piksel
Kelebihan: Lebar berubah mengikut saiz penyemak imbas .
Kelemahan: Apabila ia semakin kecil, baris semakin sempit.
Penyelesaian: Tetapkan lebar min dalam piksel dan ems
14: Reka letak fleksibel: Apabila saiz fon berubah, baris berubah (unit ialah em)
Reka letak fleksibel menetapkan lebar elemen berbanding fon saiz.
1em=10px;
Saiz fon lalai kebanyakan penyemak imbas ialah 16px, 10 bersamaan dengan 62.5% daripada 16 piksel
Body
{
Saiz fon: 62.5%; >}
#pembungkus
{
Lebar:72em;
Margin:0 automatik; >Lebar: 18em;
Apung:kanan;
}
15 Susun atur bendalir elastik: tetapkan lebar dalam em dan tetapkan lebar maksimum dalam peratusan.
#pembungkus
{
Lebar:72em;
Lebar maksimum: 100%; 16: Imej cecair dan anjal
Masalah ubah bentuk imej: Cuba letakkan di latar belakang
17. Helah HTML asterisk
* html a:hover
{
Gaya badan: pepejal
}
Hanya berguna untuk IE6 atau ke bawah
18: helah !import dan garis bawah
# nav
{
Kedudukan: tetap !penting;
Kedudukan : statik;
}
atau
#nav
{
Kedudukan:
_Kedudukan : statik;
}
19, beberapa lajur










Nav diperlukan Untuk membezakan warna dan ketinggian paparan 100%, anda boleh membuat gambar dengan lebar sama dengan Nav, tetapkan imej latar belakang pada utama, dan jubinkan ke arah menegak.
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
'Semua perkara ini agak mudah dilakukan, mereka hanya memerlukan seseorang untuk duduk dan hanya melalui laman web''Semua perkara ini agak mudah dilakukan, mereka hanya memerlukan seseorang untuk duduk dan hanya melalui laman web'Apr 12, 2025 am 10:31 AM

Saya melihat video yang disiarkan di Twitter dari Channel 5 News di UK (saya tidak tahu apa kredibiliti mereka, ia ' s lautan dari saya) dengan Anchor Claudia

Jamstack vs JamstackJamstack vs JamstackApr 12, 2025 am 10:30 AM

Ia hanya satu perkataan untuk membangkitkan idea yang melayani sebanyak yang anda boleh secara statistik semasa menggunakan kod klien dan memukul API tanpa pelayan untuk sebarang keperluan selepas itu.

Ayah PerniagaanAyah PerniagaanApr 12, 2025 am 10:29 AM

Tahniah kepada Chris Enns, editor podcast kami di Shoptalk dan Codepen Radio, untuk mendarat podcast baru yang sangat keren untuk mengedit: Business Dad. Ia ' s Alexis Ohanian,

Membina susun atur pelbagai arahMembina susun atur pelbagai arahApr 12, 2025 am 10:15 AM

Terdapat beberapa ciri baru dalam CSS yang boleh membantu kami dengan susun atur bangunan untuk arah dan bahasa yang berbeza dengan mudah. Artikel ini mengenai CSS

Apa perbezaan antara lebar/ketinggian dalam CSS dan Atribut HTML Lebar/Ketinggian?Apa perbezaan antara lebar/ketinggian dalam CSS dan Atribut HTML Lebar/Ketinggian?Apr 12, 2025 am 10:13 AM

Sesetengah elemen HTML menerima lebar dan ketinggian sebagai atribut. Ada yang tidak. Atribut -atribut tersebut kadang -kadang disebut sebagai atribut persembahan. Perkara yang perlu diketahui tentang mereka adalah bahawa mereka ditindih oleh apa -apa maklumat gaya lain. Itu

Netlify fivesNetlify fivesApr 12, 2025 am 10:10 AM

Kami ' Ve mendapat Netlify sebagai penaja di sini sekali lagi tahun ini, yang hanya hebat. Peminat besar. Sarah Drasner kami sendiri adalah ketua DX (pengalaman pemaju)

Eleventy LoveEleventy LoveApr 12, 2025 am 10:09 AM

Telah melihat banyak tindakan sebanyak sebelas akhir -akhir ini. Ia adalah pemain yang lebih kecil di dunia penjana tapak statik, tetapi saya fikir ia mempunyai potensi besar kerana bagaimana

Slider Multi-Thumb: Kes dua thumb tertentuSlider Multi-Thumb: Kes dua thumb tertentuApr 12, 2025 am 10:07 AM

Ini adalah konsep yang pertama kali saya temui beberapa tahun lalu ketika Lea Verou menulis artikel mengenainya. Slider pelbagai jarak telah dibuang dari spesifikasi sejak,

See all articles

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 laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular

SecLists

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.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

EditPlus versi Cina retak

EditPlus versi Cina retak

Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod