Rumah > hujung hadapan web > tutorial css > Bagaimana untuk menetapkan div untuk digantung menggunakan css

Bagaimana untuk menetapkan div untuk digantung menggunakan css

WBOY
Lepaskan: 2021-11-15 10:43:57
asal
11870 orang telah melayarinya

Dalam CSS, anda boleh menggunakan atribut kedudukan untuk menetapkan kedudukan mutlak untuk mencapai div terapung Anda hanya perlu menambah "{position:absolute;top: distance from the top of the page; left: distance from the sebelah kiri halaman;} ke elemen div "Gaya sudah memadai.

Bagaimana untuk menetapkan div untuk digantung menggunakan css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara menetapkan penggantungan div dalam css

1 Cipta fail html baharu dan namakannya sebagai test.html untuk menerangkan cara membuatnya kerja dalam div CSS digantung. Dalam fail test.html, gunakan teg div untuk mencipta div dan tetapkan atribut kelasnya kepada con, yang digunakan terutamanya untuk menetapkan gaya melalui nama kelas di bawah.

Bagaimana untuk menetapkan div untuk digantung menggunakan css

2 Dalam fail test.html, gunakan tag p dalam div untuk mencipta paparan teks ujian. Dalam fail test.html, dalam div, gunakan teg div untuk mencipta div dengan nama kelas ff, yang digunakan sebagai div yang digantung.

Bagaimana untuk menetapkan div untuk digantung menggunakan css

3 Dalam fail test.html, dalam teg css, gunakan "*" untuk memulakan gaya elemen dan tetapkan jidar luar dan jidar dalam kepada 0. Pada masa yang sama, tetapkan gaya div dengan con nama kelas, tetapkan warna latar belakangnya kepada kelabu, penjajaran tengah, lebar kepada 640px dan tinggi kepada 1000px.

Dalam teg css, tetapkan gaya dengan nama kelas ff, tetapkan ketinggian dan lebarnya kepada 100px, dan warna latar belakang kepada merah. Gunakan atribut kedudukan kedudukan untuk menetapkan kedudukan mutlak div pada halaman, 20px dari bahagian atas halaman , jarak dari sebelah kiri halaman ialah 0px, supaya div boleh digantung dalam halaman.

Bagaimana untuk menetapkan div untuk digantung menggunakan css

4. Buka fail test.html dalam penyemak imbas untuk menyemak kesannya.

Bagaimana untuk menetapkan div untuk digantung menggunakan css

Selain kedudukan, kedudukan juga boleh ditetapkan kepada tetap untuk mencapai penggantungan div.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menetapkan div untuk digantung menggunakan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan