Fügen Sie mithilfe von CSS Inhalte rund um den Text ein

CSS-Lösung zum Einfügen von Inhalten um Text herum

In diesem Artikel wird erläutert, wie Symbole um Text herum eingefügt werden, wie die Positionsbeziehung zwischen ihnen mithilfe der Rationalität der HTML-Struktur und der Verwendung von CSS-Attributen gesteuert wird die Vor- und Nachteile der durch verschiedene Lösungen erzielten Effekte.

Gemeinsame Designentwurfsanforderungen

• Fügen Sie Symbole, Linien, Dreiecke und Kreise vor, nach, über und unter dem Text ein

• Die eingefügten Elemente müssen Abstand, Ausrichtung (Mitte, oben, Grundlinie) und andere Positionsbeziehungen zum Text einhalten.

Ethische Kenntnisse

• Flexible Nutzung von Anzeige, Hintergrund und anderen Attributen

• Bestanden:before Verwenden Sie :after mit dem Inhaltsattribut, um Inhalte einzufügen.

• Erkennen Sie die Positionsbeziehung zwischen Text und Symbolen durch absolute, vertikale, Rand-, Zeilenhöhen- und andere Attribute.

• Grafiken, die mit CSS-Attributen gezeichnet werden können, verwenden CSS-Attribute, andernfalls verwenden Sie das Hintergrundattribut, um Hintergrundbilder anzuzeigen

Praktische Bedienung

• Lösung 1: Ändern Sie die HTML-Struktur, indem Sie Tags wie <span></span> und <i></i>

• direkt mithilfe von Pseudo-Tags hinzufügen. Elemente: before und :after (unter Ie7 nicht unterstützt)

• muss ein Inhaltsattribut haben

• Das eingefügte Element ist Inline-Elemente erforderlich explizit als Elemente auf Blockebene definiert werden, um Höhe, Abstand, Ränder usw. festzulegen.

Linie

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

• Direkt verwenden Container des Texts, um border-left, border-right, border-top und border-bottom zu verwenden, um jeweils nur die obere, untere, linke und rechte Zeile des Texts anzuzeigen.

• Für Inline, Inline-Block usw. können Sie die Zeilenhöhe verwenden, um den Text und die vertikalen Linien zu zentrieren.

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

• Das Hinzufügen von i- und span-Tags vor und nach dem Text ist klarer als die Verwendung von Pseudoelementen: before und :after.

• vertikal-align:middle erreicht die vertikale Zentrierung von Linien und Text.

• Dieses Attribut ist in ie7 ungültig

• kann mit margin-top implementiert werden (Voraussetzung ist, die Höhe des übergeordneten Elements zu kennen

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

• Verwenden Sie das transparente Attribut mit dem Rand, um das Dreieck zu implementieren

• Beachten Sie, dass wir das Positionsattribut verwenden können, um :before und :after an jeder Position einzufügen. nicht nur „vorher“ oder „nachher“. Die Zeile rechts kann direkt unter dem Text „Werde unser Freiwilliger“ platziert werden

Kreis

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

• Hier ist die Herangehensweise an die Anforderungen wie Bannerkarussell Bilder, da es sich um eine kontinuierliche Schaltfläche handelt, verwenden Sie einfach das Attribut border-radius, um einen Kreis zu zeichnen.

• border-radius kann unter IE8 nicht verwendet werden, und Sie müssen

<.trick1: ersetzen sie class=" list-paddingleft-2" style="list-style-type: square;">

• durch einen Bildhintergrund.Trick2: Rufen Sie das Skript ie-css3.htc auf, damit der IE-Browser CSS3-Attribute unterstützt 🎜>
Das aktuelle Element muss über Positionierungsattribute verfügen, z. B. die Attribute position:relative oder position:absolute.
Der Z-Index-Wert muss höher sein als der der umgebenden Elemente.

1. Benutzerdefiniertes Symbol
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>

Hier sind einige Vorgehensweisen für die Bewertung und andere Anforderungen, die Verwendung des Hintergrundattributs zum Anzeigen von Bildern

Erweitertes Wissen

.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;
}

Hier ist ein Cheat zum Zentrieren eines Elements: So zentrieren Sie ein Element
Zusammenfassung

Wenn ja, sind mehrere aufeinanderfolgende Symbolsymbole vorhanden dargestellt durch HTML-Tags
Wenn ein einzelnes Symbol eingefügt wird, verwenden Sie pseudo-element>, um zusätzliche HTML-Tags hinzuzufügen, ohne die Kompatibilität zu berücksichtigen

Das obige ist der detaillierte Inhalt vonFügen Sie mithilfe von CSS Inhalte rund um den Text ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!