Rumah >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?
- 王林ke hadapan
- 2023-09-10 17:49:02772semak imbas
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 a1f02c36ba31691bcfe87b2722de723b
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!