Comment stocker deux images de flèches (vote positif/vote négatif) l'une sur l'autre en utilisant CSS ?-tutoriel CSS-php.cn

Comment stocker deux images de flèches (vote positif/vote négatif) l'une sur l'autre en utilisant CSS ?

王林

Libérer： 2023-09-10 17:49:02

avant

764 Les gens l'ont consulté

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

La mise en page du site Web est un élément important. En favorisant l'engagement des utilisateurs, il améliore les normes visuelles et la qualité globale du site Web. Bien que CSS ne soit pas nécessaire au développement de sites Web, le style est important car aucun utilisateur ne souhaite interagir avec un site Web fade et ennuyeux.

Lorsque vous créez un site Web, vous pensez peut-être que les photos sont une fonctionnalité « agréable à avoir » qui ne sert à rien d'autre que d'être jolies. Cependant, les graphiques sur un site Web ne se limitent pas à créer une jolie image.

Les images donnent une belle apparence à vos pages Web. Les avantages de l’utilisation de photos pour le référencement sont nombreux. CSS nous permet de styliser et de positionner ces images pour créer des effets visuels fantastiques. Dans cet article, nous verrons comment superposer des images de flèches (avantages/inconvénients) les unes sur les autres à l'aide de CSS.

Tout d’abord, voyons comment ajouter des images de flèches dans les pages HTML.

Ajouter une image de flèche

Pour ajouter une image de flèche, nous utiliserons la balise

Exemple

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

Copier après la connexion

Dans l'exemple ci-dessus, nous montrons deux images de flèches : upvote et downvote.

Exemple

Dans l'exemple ci-dessous, nous avons deux images de flèches (vote positif/vote négatif) empilées l'une sur l'autre

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

Copier après la connexion

Attributs utilisés

Dans cet exemple, nous spécifions la hauteur et la largeur de l'image en utilisant CSS. Pour empiler ces images, nous avons utilisé les propriétés CSS suivantes -

Afficher les propriétés

Cette propriété CSS permet aux développeurs de déterminer le type de comportement d'affichage d'un élément. En termes simples, il vous permet de déterminer le type de conteneur d'un élément.

Grammaire

element{
   display: value;
}

Copier après la connexion

Exemple

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

Copier après la connexion

Propriétés flottantes

Cette propriété CSS permet aux développeurs de spécifier de quel côté un élément flottera. Les éléments avec position : absolue ignorent les attributs float. Sa valeur peut être gauche, droite ou none.

Grammaire

element{
   float: value;
}

Copier après la connexion

Exemple

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

Copier après la connexion

Effacer les attributs

Les éléments à côté d'un élément flottant suivent le flux autour de lui. Pour résoudre ce problème, il existe la propriété clear en CSS. Ses valeurs peuvent être Aucun, Gauche, Droite, Les deux, Initiale et Inherited.

Grammaire

element{
   clear: value;
}

Copier après la connexion

Conclusion

Dans cet article, nous avons appris comment afficher des images de flèches (vote positif et négatif) dans les documents HTML. De plus, nous avons expliqué comment les empiler ensemble à l'aide des propriétés CSS display, float et clear.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!