Bagaimana untuk menyimpan dua imej anak panah (undi naik/turun) di atas satu sama lain menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menyimpan dua imej anak panah (undi naik/turun) di atas satu sama lain menggunakan CSS?

王林

Lepaskan： 2023-09-10 17:49:02

ke hadapan

797 orang telah melayarinya

如何使用 CSS 将两个箭头图像（upvote/downvote）存储在彼此之上？

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!