如何使用CSS将两个箭头图片（赞/踩）堆叠在一起

网站布局是一个重要的组成部分。通过提升用户参与度，它提高了网站的视觉标准和整体质量。尽管CSS并非网站开发的必需品，但样式很重要，因为没有用户想要与一个普通、不吸引人的网站进行交互。

在构建您的网站时，您可能认为照片只是一个“很好的”功能，除了好看之外没有任何用处。然而，您网站上的图形所能带来的作用远不止创造出美丽的画面而已。

图片为您的网页增加了审美效果。使用照片进行SEO的好处很多。CSS使我们能够为这些图片添加样式和位置，从而产生出令人惊艳的视觉效果。在本文中，我们将讨论如何使用CSS将箭头图片（赞/踩）堆叠在一起。

首先，让我们看看如何在HTML页面中添加箭头图片。

添加箭头图片

要添加箭头图片，我们将使用<img>标签。

示例

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

示例

在下面的示例中，我们将两个箭头图像（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属性：

display属性

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>