Ausführliche Erläuterung des Beispielcodes zum Erstellen einer unbegrenzten Anzahl von Bannerschaltflächen auf dem H5-Mobilterminal

黄舟

Freigeben： 2017-03-10 16:49:28

Original

1703 Leute haben es durchsucht

Das H5-Mobilterminal erstellt eine unbegrenzte Anzahl von Bannerschaltflächen

Vorwort

Einige Bannerschaltflächen werden häufig auf mobilen H5-Seiten benötigt. Natürlich ist es so Es ist sehr einfach, eine Banner-Schaltfläche zu erstellen. Produktmanager und Designer werden Ihnen jedoch immer Probleme bereiten. Es handelt sich beispielsweise um eine Schaltfläche mit demselben Format. Unten sind zwei Schaltflächen erforderlich Beim Betreten der Innenseite werden drei Schaltflächen in ein Banner gequetscht.

Wenn es keine vernünftige Lösung gibt, wird es zweifellos sehr ekelhaft sein, weil wir mehrere Stile schreiben müssen , haben wir also gute Lösungen, um dies zu erreichen?

Lassen Sie uns diese Herausforderung verwirklichen

Vielleicht verstehen Sie nach dem Lesen des obigen Textes nicht, was ich ausdrücken möchte. Schauen wir uns als Nächstes eine Darstellung an, und Sie werden verstehen, wovon ich spreche >

Wie im Bild oben gezeigt, ist die erste eine Bannerschaltfläche, die zweite Reihe besteht aus zwei Schaltflächen und die dritte Reihe besteht aus drei Schaltflächen.

Ich hoffe, dass alle diese Anforderungen erfüllt werden können durch ein CSS erfüllt werden, und die HTML-Struktur ist extrem einfach. Schauen Sie sich den folgenden Code an: Ausführliche Erläuterung des Beispielcodes zum Erstellen einer unbegrenzten Anzahl von Bannerschaltflächen auf dem H5-Mobilterminal

HTML-Struktur

Wie im obigen Code gezeigt.

Das

<!DOCTYPE html><!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <title>移动端H5做一个Ausführliche Erläuterung des Beispielcodes zum Erstellen einer unbegrenzten Anzahl von Bannerschaltflächen auf dem H5-Mobilterminal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="../style/style.css">
    </head>
    <body>
    <br>
    <!-- 第一行按钮 -->
    <p class="button_box">
        <p class="button pink">确定</p>
    </p>
    <br>
    <!-- 第二行按钮 -->
    <p class="button_box">
        <p class="button pink">付款</p>
        <p class="button">取消订单</p>
    </p>
    <br>
    <!-- 第三行按钮 -->
    <p class="button_box">
        <p class="button pink">设为默认</p>
        <a class="button">修改</a>
        <label class="button">删除<input type="submit"></label>
    </p></body></html>

Nach dem Login kopieren

dient dazu, den Abstand zwischen den einzelnen Schaltflächen zu trennen, hauptsächlich den Inhalt darin

Die Struktur von HTML sollte als recht einfach bezeichnet werden. Die äußere Schicht ist zunächst die Box von br, und wenn Sie Knöpfe benötigen, schreiben Sie im Inneren einfach ein nicht selbstschließendes Element von .button.p.button_box

Nicht selbstschließend schließende und Elemente beziehen sich auf andere Elemente außer selbstschließenden Elementen wie

.p.button_box

In der dritten Zeile demonstrieren wir ein gewöhnliches Feld, Links und wie man Schaltflächen schreibt
brhrinput Da es sich bei Schaltflächen um selbstschließende Elemente handelt, umschließen wir sie mit einem
-Element, um sie verfügbar zu machen.

SASS-Teil

Zitat zuerst reset.scss und mixin.scss, siehe Mobile Blogbeitrag der H5-Serie Basic Reset.scss und mixin.scsslabel

Zweitens ist der CSS-Teil mit der SASS-Syntax geschrieben. Wenn nicht, lesen Sie bitte die CSS-Zusammenfassung der SASS-Lernerfahrung in der Vorkompilierungstechnologie .

Ich habe die Erklärung des Sass-Teils in die Kommentare eingefügt. Der Gedanke besteht hauptsächlich darin, die besonderen Eigenschaften der Tabelle zu nutzen, um dies zu erreichen.

Zusammenfassung

.button_box {
    display: table;     // 将 button_box 外层盒子模拟成表格
    width: 100%;        // 表格非完整块级元素,需要设定宽度
    table-layout:fixed; // 设定表格内单元格的宽度为自动等宽,重要!
    border-collapse: collapse;  // 合并表格和单元格边框
    .button {
        display: table-cell;    // 将子元素模拟成单元格
        font-size: 1.5rem;text-align: center;
        background: #eee;color: #555;   // 设定默认按钮样式
        box-shadow: 0 0 0 1px #ddd;     // 利用阴影模拟边框(阴影不占用盒子模型)
        text-decoration: none;          // 如果元素是链接,则去掉下划线
        @include hlh(4.8rem);           // 引用高度行高隐藏溢出代码块
        &.pink {        //设定一个特殊按钮样式,可根据需要设定多个
            background: #F13E7A;
            color: #fff;
            box-shadow:0 0 0 1px #F13E7A;
        }
        input {display: none;}      // 如果是按钮,则隐藏
    }
}

Nach dem Login kopieren

Tische, was für ein magisches Element, da der Code damals so stinkend und lang war wie der Fußwickel einer alten Dame, begannen wir mit der Begeisterung für p+css. Aufgrund der Überkorrektur haben wir viele großartige Funktionen von Tabellen ignoriert.

Tatsächlich haben wir Tabellen verwendet, um diese scheinbar schwierige Anforderung erfolgreich zu lösen Nun ja.

HTML-Elemente sind weit entfernt von Block-Level-Elementen und Inline-Elementen. Es gibt viele Attribute, die wir ausprobieren und verstehen müssen. Sind Sie sicher, dass es einfach ist?

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispielcodes zum Erstellen einer unbegrenzten Anzahl von Bannerschaltflächen auf dem H5-Mobilterminal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!