如何使用 CSS 將兩個箭頭圖像（upvote/downvote）儲存在彼此之上？-css教學-PHP中文網

如何使用 CSS 將兩個箭頭圖像（upvote/downvote）儲存在彼此之上？

王林

發布： 2023-09-10 17:49:02

轉載

790 人瀏覽過

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

網站的佈局是一個重要的組成部分。透過促進用戶參與，它提高了網站的視覺標準和整體品質。雖然CSS在網站開發中並不是必需的，但樣式很重要，因為沒有使用者願意與一個平淡無味的網站互動。

當您建立網站時，您可能會認為照片是一項「最好有」的功能，除了看起來漂亮之外沒有任何用處。然而，網站上的圖形不僅僅只是創造一幅可愛的圖片。

圖像為您的網頁提供美觀的外觀。使用照片進行 SEO 的優點很多。 CSS 使我們能夠對這些圖像進行樣式設定和定位，從而創造出奇妙的視覺效果。在本文中，我們將討論如何使用 CSS 將箭頭圖像（贊成/反對）疊加在一起。

首先，讓我們看看如何在HTML頁面中新增箭頭影像。

新增箭頭圖像

要新增箭頭圖像，我們將使用標籤。

範例

<!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>

登入後複製

在上面的範例中，我們顯示了兩個箭頭圖像 - upvote 和 downvote。

範例

在下面的範例中，我們將兩個箭頭圖像（上投票/下投票）疊放在一起

<!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>

登入後複製

使用的屬性

在此範例中，我們使用 CSS 指定了圖像的高度和寬度。為了將這些圖像堆疊在一起，我們使用了以下 CSS 屬性 -

顯示屬性

這個CSS屬性允許開發者決定元素的顯示行為類型。簡單來說，它允許你決定元素的容器類型。

文法

element{
   display: value;
}

登入後複製

範例

<!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>

登入後複製

浮動屬性

這個CSS屬性使開發人員能夠指定元素將在哪一側浮動。具有position: absolute的元素會忽略浮動屬性。它的值可以是left, right或none。

文法

element{
   float: value;
}

登入後複製

範例

<!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>

登入後複製