hujung hadapan web
tutorial css
Bagaimana untuk menyimpan dua imej anak panah (undi naik/turun) di atas satu sama lain menggunakan CSS?
Bagaimana untuk menyimpan dua imej anak panah (undi naik/turun) di atas satu sama lain menggunakan CSS?
Susun atur laman web adalah komponen penting. Dengan mempromosikan penglibatan pengguna, ia meningkatkan standard visual dan kualiti keseluruhan tapak web. Walaupun CSS tidak diperlukan dalam pembangunan laman web, penggayaan adalah penting kerana tiada pengguna yang mahu berinteraksi dengan laman web yang hambar dan membosankan.
Apabila anda membina tapak web, anda mungkin berfikir bahawa foto adalah ciri "senang untuk dimiliki" yang tidak mempunyai tujuan lain selain untuk kelihatan cantik. Walau bagaimanapun, terdapat lebih banyak perkara untuk grafik di tapak web daripada sekadar mencipta gambar yang comel.
Imej memberikan rupa yang cantik pada halaman web anda. Kelebihan menggunakan foto untuk SEO adalah banyak. CSS membolehkan kami menggayakan dan meletakkan imej ini untuk mencipta kesan visual yang hebat. Dalam artikel ini, kita akan membincangkan cara menindih imej anak panah (pro/con) di atas satu sama lain menggunakan CSS.
Mula-mula, mari lihat cara menambah imej anak panah dalam halaman HTML.
Tambahkan imej anak panah
Untuk menambah imej anak panah, kami akan menggunakan teg
Contoh
<!DOCTYPE html> <html> <head> <title> Adding arrow images </title> </head> <body> <img src= "https://cdn-icons-png.flaticon.com/512/16/16287.png" alt= "up arrow"> <img src= "https://cdn-icons-png.flaticon.com/512/608/608258.png" alt= "down arrow"> </body> </html>
Dalam contoh di atas, kami menunjukkan dua imej anak panah - undi sokong dan undi tolak.
Contoh
Dalam contoh di bawah, kami mempunyai dua imej anak panah (undi naik/undi) disusun di atas satu sama lain
<!DOCTYPE html>
<html>
<head>
<title> Arrow Images </title>
<style>
h1{
color: green;
text-decoration: underline;
}
img{
width: 150px;
margin-left: 20px;
height: 100px;
margin-bottom: 30px;
}
.demo{
float: left;
clear: left;
}
.demo img{
display: block;
float: none;
clear: both;
}
</style>
</head>
<body>
<h1> Up and Down arrow images </h1>
<div class= "demo">
<img src= "https://cdn-icons-png.flaticon.com/512/16/16287.png" alt= "up arrow">
<img src= "https://cdn-icons-png.flaticon.com/512/608/608258.png" alt= "down arrow">
</div>
</body>
</html>
Atribut yang digunakan
Dalam contoh ini, kami menentukan ketinggian dan lebar imej menggunakan CSS. Untuk menyusun imej ini bersama-sama kami menggunakan sifat CSS berikut -
Memaparkan sifat
Sifat CSS ini membolehkan pembangun menentukan jenis gelagat paparan sesuatu elemen. Ringkasnya, ia membolehkan anda menentukan jenis bekas sesuatu elemen.
Tatabahasa
element{
display: value;
}
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color: green;
text-decoration: underline;
}
.p1{
display: block;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p class= "p1">This is an example</p>
</div>
</body>
</html>
Sifat terapung
Sifat CSS ini membolehkan pembangun menentukan bahagian mana elemen akan terapung. Elemen dengan kedudukan: mutlak mengabaikan atribut apungan. Nilainya boleh kiri, kanan atau tiada.
Tatabahasa
element{
float: value;
}
Contoh
<!DOCTYPE html>
<html>
<head>
<title> Float </title>
<style>
h1{
color: green;
text-decoration: underline;
}
#img1{
float: left;
}
</style>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<body>
<div>
<p>Left or right side of the container. <i class= "far fa-clock" id= "img1"></i> </p>
</div>
</body>
</html>
Atribut yang jelas
Elemen di sebelah elemen terapung mengikut aliran di sekelilingnya. Untuk menyelesaikan masalah ini, terdapat sifat clear dalam CSS. Nilainya boleh menjadi Tiada, Kiri, Kanan, Kedua-duanya, Awal dan Diwarisi.
Tatabahasa
element{
clear: value;
}
Kesimpulan
Dalam artikel ini, kami belajar cara memaparkan imej anak panah (undi naik dan turun) dalam dokumen HTML. Selain itu, kami membincangkan cara menyusunnya bersama-sama menggunakan ciri CSS display, float dan clear.
Atas ialah kandungan terperinci Bagaimana untuk menyimpan dua imej anak panah (undi naik/turun) di atas satu sama lain menggunakan CSS?. 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
1377
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Menjadikan Peralihan Svelte Khas pertama anda
Mar 15, 2025 am 11:08 AM
API Peralihan Svelte menyediakan cara untuk menghidupkan komponen apabila mereka memasuki atau meninggalkan dokumen, termasuk peralihan svelte adat.
Tunjukkan, jangan beritahu
Mar 16, 2025 am 11:49 AM
Berapa banyak masa yang anda habiskan untuk merancang persembahan kandungan untuk laman web anda? Semasa anda menulis catatan blog baru atau membuat halaman baru, adakah anda memikirkan
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bagaimana anda menggunakan CSS untuk membuat kesan teks, seperti bayang -bayang teks dan kecerunan?
Mar 14, 2025 am 11:10 AM
Artikel ini membincangkan menggunakan CSS untuk kesan teks seperti bayang -bayang dan kecerunan, mengoptimumkannya untuk prestasi, dan meningkatkan pengalaman pengguna. Ia juga menyenaraikan sumber untuk pemula. (159 aksara)
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
Apa yang ada perintah npm?
Mar 15, 2025 am 11:36 AM
Perintah NPM menjalankan pelbagai tugas untuk anda, sama ada sebagai satu-satunya atau proses berjalan terus untuk perkara seperti memulakan pelayan atau menyusun kod.
