Comment définir le style barré avec CSS ? (explication détaillée du code)-tutoriel CSS-php.cn

Comment définir le style barré avec CSS ? (explication détaillée du code)

藏色散人

Libérer： 2018-10-08 15:07:51

original

20649 Les gens l'ont consulté

Cet article vous présente principalement la méthode de paramétrage et de mise en œuvre du css barré.

Je crois que lorsque vous parcourez les sites Web des grands centres commerciaux, vous verrez certains effets sur les promotions de produits, tels que la mesure dans laquelle le prix d'origine d'un produit est marqué et dans quelle mesure le prix actuel est modifié. . Afin que les utilisateurs trouvent Gap plus intuitif, généralement avec un barré visible ajouté au prix d'origine !

Bien entendu, en plus de cet effet apparaissant sur le site Web du centre commercial, sur nos sites Web ordinaires ou sur les sites de forum, afin d'afficher le contenu du site Web de manière plus belle et plus concise, CSS sera également utilisé pour obtenir l'effet barré. !

Alors, comment utiliser le CSS pour obtenir un style barré ?

Ci-dessous, nous expliquerons en détail comment implémenter le css barré à travers un exemple de code simple !

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css删除线</title>
    <style>
        .demo{
          text-decoration:line-through;
            color: red;
      }
        span{color:black;}
    </style>
</head>
<body>
    <div>
        <p><span class="demo"><span>这里有一个删除线</span></span></p>
       </div>
</body>
</html>

Copier après la connexion

Accès via le navigateur, css barré pour obtenir l'effet comme indiqué ci-dessous :

Comment définir le style barré avec CSS ? (explication détaillée du code)

Ici, nous utilisons principalement css text-decoration : attribut de style line-through.

Tout d'abord, tout le monde doit savoir que l'attribut text-decoration spécifie les décorations ajoutées au texte.

La valeur line-through signifie définir une ligne qui passe sous le texte.

Dans le code ci-dessus, nous combinons le style text-decoration: line-through; et le style pour définir la couleur de la police du texte afin d'obtenir le barré et Effets de style avec différentes couleurs de texte !

De même, nous pouvons également facilement obtenir les effets liés du prix d'origine et du prix actuel :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css删除线</title>
    <style>
        .demo{
          text-decoration:line-through;
            color: red;
      }
        span{color:black;}
    </style>
</head>
<body>
    <div>
        <p>原价：<span class="demo"><span>500元</span></span><br>
        现价：150元
        </p>
       </div>
</body>
</html>

Copier après la connexion

Comme indiqué ci-dessous :

Comment définir le style barré avec CSS ? (explication détaillée du code)

Ce qui précède concerne la méthode d'implémentation spécifique de définition du barré et contrôle de la couleur barrée en CSS ! Très simple et facile à comprendre, j'espère que cela sera utile à des amis dans le besoin !

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!