Pembangun menetapkan kedudukan imej untuk mewujudkan hierarki visual yang jelas dengan menentukan susunan dan dimensi imej berbanding elemen HTML yang lain. Dengan meletakkan imej dalam pelbagai kedudukan, reka bentuk moden, unik dan tersuai juga boleh dihasilkan yang boleh mengubah rupa dan rasa laman web. Artikel ini menunjukkan prosedur untuk menetapkan kedudukan imej menggunakan CSS.
Bagaimana untuk Menetapkan Kedudukan Imej dalam CSS?
Dengan menetapkan kedudukan imej dalam CSS, faedah seperti “ penempatan yang tepat ”, “ elemen bertindih ” dan “ reka bentuk responsif ” boleh dicapai dengan mudah. Menggunakan faedah ini, pembangun boleh dengan mudah menyesuaikan dan membina tapak web yang berfungsi sepenuhnya dan menarik perhatian. Terdapat dua kaedah/sifat di mana kedudukan imej boleh ditetapkan. Sifat-sifat ini diterangkan di bawah:
Kaedah 1: Menggunakan Harta Terapung
' terapung harta ” disediakan oleh CSS untuk pergerakan elemen HTML dalam “ dibiarkan ” atau “ betul ” arah. Ia kebanyakannya digunakan semasa mencipta susun atur responsif untuk penempatan tepat elemen HTML.
Sebagai contoh, sifat 'terapung' digunakan untuk menjajarkan imej di kedua-dua sisi kiri dan kanan halaman web:
< div >
< img src = 'bg.jpg' ketinggian = '300px' lebar = '400px' kelas = 'kedudukan Betul' >
< img src = 'book.jpg' ketinggian = '300px' lebar = '400px' kelas = 'kedudukanKiri' >
div >
Dalam kod di atas:
-
- Pertama, akar ' div ” elemen dicipta yang berfungsi sebagai bekas untuk elemen HTML.
- Seterusnya, dua '
tag ' digunakan di dalam '
” tag.- Selepas itu, nilai “ 300px ” dan “ 400px 'disediakan kepada' ketinggian ” dan “ lebar 'sifat kedua-duanya'
” tag.
- Juga, tetapkan kelas ' kedudukan Betul ” dan “ kedudukan Kiri ” kepada teg “
” pertama dan kedua, masing-masing.
Sekarang, masukkan '
< gaya >” untuk menggunakan sifat CSS berikut:
.kedudukanBetul {
terapung: betul;
}
.kedudukanKiri {
terapung: kiri;
}
gaya >
Penerangan diberikan di bawah:
-
- Pertama, pilih ' kedudukan Betul kelas ” dan tetapkan nilai “ betul 'kepadanya' terapung ” harta benda. Ini menggerakkan elemen HTML yang dipilih ke arah yang betul pada halaman web.
- Seterusnya, pilih “ kedudukan Kiri kelas ” dan berikan nilai “ dibiarkan ' kepada ' terapung ” harta benda. Ini menggerakkan elemen untuk bergerak ke arah sebelah kiri.
Selepas tamat fasa penyusunan:
Output menunjukkan bahawa imej telah ditetapkan ke kedudukan kiri dan kanan.Kaedah 2: Menggunakan Harta kedudukan objek
' kedudukan objek ” hartanah memastikan penempatan imej atau elemen HTML pada kedudukan tertentu pada halaman web. Ia memberikan kawalan ke atas kedudukan mendatar dan menegak, membolehkan pengguna mencapai kesan visual atau susun atur yang diingini. Ia kebanyakannya digunakan oleh pembangun untuk memotong imej, mencipta lakaran kecil, susun atur tersuai, dsb.
Sifat ini boleh mengambil kedua-dua nilai berangka dan kata kunci. Sebagai contoh, kedua-dua nilai berangka dan kata kunci disediakan untuk ' kedudukan objek ” harta benda. Ia menetapkan kedudukan imej dalam CSS dalam coretan kod di bawah:
< gaya >
.numericalValues
{
kedudukan objek: 100px 20px;
}
.keywordValues
{
kedudukan objek: kiri;
}
gaya >
< badan >
< div >
< img src = 'book.jpg' ketinggian = '300px' lebar = '400px' kelas = 'Nilai kata kunci' >
< img src = 'bg.jpg' ketinggian = '300px' lebar = '400px' kelas = 'NumericalValues' >
div >
badan >
Dalam coretan kod di atas:-
- Pertama, ' numericalValues kelas ” dipilih di dalam “
” tag. Dan nilai berangka ' 100px 20px ' disediakan kepada CSS ' kedudukan objek ” harta benda. ' 100px ' ialah ruang yang ditambah dalam arah mendatar dan ' 20px ” untuk menegak. - Seterusnya, ' keywordValues kelas ” dipilih dan nilai kata kunci “ dibiarkan 'disediakan kepada' kedudukan objek ” harta untuk menjajarkan imej ke arah kiri.
- Selepas itu, di dalam '
” tag dua imej dicipta, dan kelas yang dibuat di atas diberikan kepada mereka.
- Pertama, ' numericalValues kelas ” dipilih di dalam “
Selepas tamat fasa penyusunan, halaman web kelihatan seperti ini:
Syot kilat menggambarkan bahawa imej kini ditetapkan kepada kedudukan tertentu.Kesimpulan
Kedudukan imej boleh ditetapkan menggunakan CSS “ terapung ” dan “ kedudukan objek ” hartanah. ' terapung sifat ” mengambil kata kunci sebagai nilai dan menggerakkan elemen dalam kedudukan kiri atau kanan. Sebaliknya, ' kedudukan objek ”, mengambil kedua-dua kata kunci dan nilai berangka dalam arah mendatar dan menegak. Artikel ini telah menunjukkan prosedur untuk menetapkan kedudukan imej dalam CSS.
- Selepas itu, nilai “ 300px ” dan “ 400px 'disediakan kepada' ketinggian ” dan “ lebar 'sifat kedua-duanya'