Insérer du contenu autour du texte en utilisant CSS

Solution CSS pour insérer du contenu autour du texte

Cet article expliquera comment insérer des icônes autour du texte, comment contrôler la relation de position entre elles, grâce à la rationalité de la structure HTML et à l'utilisation d'attributs CSS Pour comparer les avantages et les inconvénients des effets obtenus par différentes solutions.

Exigences courantes des projets de conception

• Insérer des icônes, des lignes, des triangles, des cercles avant, après, au-dessus et au-dessous du texte

• Les éléments insérés doivent atteindre l'espacement, l'alignement (centre, haut, ligne de base) et d'autres relations de position avec le texte.

Connaissances éthiques

• Utilisation flexible de l'affichage, de l'arrière-plan et d'autres attributs

• Réussi:before Utilisez :after avec l'attribut content pour insérer du contenu.

• Réalisez la relation de position entre le texte et les symboles via des attributs absolus, verticaux, de marge, de hauteur de ligne et d'autres.

• Les graphiques pouvant être dessinés à l'aide des attributs CSS utilisent des attributs CSS, sinon utilisez l'attribut background pour afficher les images d'arrière-plan

Opération pratique

• Solution 1 : Changer la structure HTML en ajoutant des balises telles que <span></span> et <i></i>

• directement à l'aide de pseudo-balises Éléments : avant et :après (non pris en charge sous Ie7)

• doit avoir l'attribut de contenu

• L'élément inséré est Les éléments en ligne doivent à définir explicitement comme éléments au niveau du bloc afin de définir la hauteur, le remplissage, les marges, etc.

Ligne

html

<div class="article-block-title">
    <h2 class="title">
        <span>前端技术</span><i>前端技术前端技术</i>
    </h2>
</div>

css

.article-block-title {
    height: 44px;
    /*实现文本与竖线对齐*/
    line-height: 44px;
    border-left: 3px solid #72b16a;
    padding-left: 20px;
}

Analyse

• Utiliser directement le conteneur du texte pour utiliser border-left, border-right, border-top et border-bottom pour afficher respectivement uniquement les lignes supérieure, inférieure, gauche et droite du texte.

• Pour les blocs en ligne, en ligne, etc., vous pouvez utiliser la hauteur de ligne pour centrer le texte et les lignes verticales.

html

<p class="text-info">
    <i class="line line-left"></i>resto restaurant home page website template<i class="line line-right"></i>
</p>

css

.text-info .line {
    display: inline-block;
    width: 40px;
    border-top: 1px solid #fff;
    /*使横线居中*/
    vertical-align: middle;
    /*for IE7*/
    *margin-top: 22px;
}

Analyse

• Ajouter des balises i et span avant et après le texte est plus clair que d'utiliser des pseudo-éléments : avant et :après.

• vertical-align:middle réalise le centrage vertical des lignes et du texte.

• Cet attribut n'est pas valide dans ie7

• peut être implémenté en utilisant margin-top (la condition préalable est de connaître la hauteur de l'élément parent

html

<div class="menu-tips">The menu</div>

css

.menu-tips:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 0;
    height: 0;
    /*menu是156px宽，所以这里设置78px*/
    border-left: 78px solid transparent;
    border-right: 78px solid transparent;
    border-bottom: 10px solid #fff;
}

analyse

• Utilisez l'attribut transparent avec la bordure pour implémenter le triangle

• Notez que nous pouvons utiliser l'attribut position pour insérer :before et :after à n'importe quelle position, pas seulement "avant" ou "Après". La ligne de droite peut être placée directement sous le texte "Devenez notre bénévole"

cercle

<.>html

<div class="btn-group">
    <a href="" class="btn"></a>
    <a href="" class="btn active"></a>
    <a href="" class="btn"></a>
    <a href="" class="btn"></a>
</div>

css

.index-panel-header .btn-group {
    float: right;
    /*清除行内元素的4px空白间距*/
    font-size: 0;
}

.index-panel-header .btn {
    display: inline-block;
    margin-left: 11px;
    width: 9px;
    height: 9px;
    background: #dedede;
    /*画圆*/
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari 和 Chrome  */
    border-radius:5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    /*for ie7、8*/
    position: relative;
    z-index:2;
    behavior: url(../ie-css3.htc); /* 通知IE浏览器调用脚本作用于'btn'类 */
}

Analyse

• Voici l'approche des exigences telles que le carrousel de bannières images, car il s'agit d'un bouton continu, utilisez simplement l'attribut border-radius pour dessiner un cercle

• border-radius ne peut pas être utilisé sous IE8, et vous devez forcer

  <.>

<.>Trick1 : Remplacez

• par l'arrière-plan de l'image. Trick2 : Appelez le script ie-css3.htc pour que le navigateur IE prenne en charge les attributs CSS3. 🎜>
L'élément actuel doit avoir des attributs de positionnement, tels que les attributs position:relative ou position:absolute
La valeur du z-index doit être supérieure à celle des éléments environnants.

1. Icône personnalisée
html

css

Analyse

<div class="star-bar">
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star nostar"></span>
</div>

Voici quelques pratiques d'évaluation et d'autres exigences, en utilisant l'attribut background pour afficher les images

Connaissances approfondies

.star-bar {
    font-size: 0px;
}

.star {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    background: url("../images/index-star.png") no-repeat;
}

.nostar {
    background-position: 0 -10px;
}

Concernant comment centrer un élément, voici une astuce : Comment centrer un élément
Résumé

Si oui Plusieurs symboles d'icônes dans une ligne sont représentées par des balises HTML
Si un seul symbole est inséré, utilisez un pseudo-élément> pour ajouter des balises HTML supplémentaires sans tenir compte de la compatibilité

.

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!