Maison >interface Web >Tutoriel H5 >Explication détaillée de l'exemple de code pour créer un nombre illimité de boutons de bannière sur le terminal mobile H5

Explication détaillée de l'exemple de code pour créer un nombre illimité de boutons de bannière sur le terminal mobile H5

黄舟original: 2017-03-10 16:49:281767parcourir

Le terminal mobile H5 crée un nombre illimité de boutons bannières

Avant-propos

Certains boutons bannières sont souvent nécessaires sur les pages h5 mobiles Bien sûr, c'est très simple de réaliser un bouton bannière. Cependant, les chefs de produits et les designers vous poseront toujours quelques problèmes. Par exemple, il s'agit évidemment d'un bouton avec le même format, mais voici un bouton bannière. En dessous, la bannière nécessite deux boutons. en entrant dans la page intérieure, trois boutons sont regroupés dans une seule bannière

S'il n'y a pas de solution raisonnable, alors ce sera sans aucun doute très dégoûtant Parce que nous devons écrire plusieurs styles et nous voulons toujours écrire moins de code. , alors avons-nous de bonnes solutions pour y parvenir ?

En fait, il y a ci-dessous, dans cet article de blog, Réalisons ce défi

L'effet souhaité.

Peut-être qu'après avoir lu le texte ci-dessus, vous ne comprenez pas ce que je veux exprimer. Ensuite, jetons un œil à un rendu, et vous comprendrez de quoi je parle

Explication détaillée de lexemple de code pour créer un nombre illimité de boutons de bannière sur le terminal mobile H5 Comme le montre l'image ci-dessus, le premier est un bouton bannière, la deuxième rangée est composée de deux boutons et la troisième rangée est composée de trois boutons.

J'espère que tous ces besoins pourront être satisfait via un CSS, et la structure html est extrêmement simple. Comment y parvenir ? Regardez le code suivant :

structure html

Comme indiqué dans le code ci-dessus.

<!DOCTYPE html><!DOCTYPE html><html lang="zh"><head>
    <meta charset="UTF-8">
    <title>移动端H5做一个Explication détaillée de lexemple de code pour créer un nombre illimité de boutons de bannière sur le terminal mobile H5</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>

consiste à séparer la distance entre chaque bouton, principalement le contenu à l'intérieur de
.brp.button_box
Il faut dire que la structure du HTML est assez simple. Tout d'abord, la couche extérieure est la boîte de

, et à l'intérieur, si vous avez besoin de boutons, écrivez simplement un élément non auto-fermant de .button.

p.button_box

Non auto-fermant Les éléments de fermeture font référence à d'autres éléments à l'exception des éléments à fermeture automatique tels que

.
brhrinput
Dans la troisième ligne, nous montrons une boîte ordinaire, des liens, et comment écrire des boutons

Puisque les boutons sont des éléments à fermeture automatique, nous les enveloppons avec un élément

pour les rendre disponibles

Partie SASS label

Premier citation reset.scss et mixin.scss, voir mobile H5. article de blog de la série basic reset.scss et mixin.scss

Deuxièmement, la partie CSS est écrite en utilisant la syntaxe SASS. Sinon, veuillez vous référer au résumé CSS de l'expérience d'apprentissage SASS dans la technologie de pré-compilation.

J'ai mis l'explication de la partie insolente dans les commentaires. La réflexion est principalement d'utiliser les propriétés spéciales de la table pour y parvenir. Cela semble être une exigence laborieuse.

.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;}      // 如果是按钮,则隐藏
    }
}

Résumé

Les tables, quel élément magique. Parce que nous utilisions la disposition des tables à l'époque, le code était aussi puant et long qu'un enveloppement de pied de vieille dame. C'est donc à cause de cela que nous avons commencé l'engouement pour les p css. En cas de surcorrection, nous avons ignoré de nombreuses fonctionnalités impressionnantes des tableaux.

En fait, les tableaux sont très géniaux. Grâce à ce cas, nous avons utilisé les tableaux en douceur. Cela a résolu cette exigence apparemment difficile. Et cela a été réalisé de manière très idéale et très bien.

Les éléments HTML sont loin des éléments de niveau bloc et des éléments en ligne. Il y a de nombreux attributs que nous devons essayer de comprendre. Voir C'est facile de monter, êtes-vous sûr que c'est facile ?

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer diverses listes sur le terminal mobile H5 (sept derniers chapitres)Article suivant：Comment créer diverses listes sur le terminal mobile H5 (sept derniers chapitres)

Articles Liés

Voir plus