\r\n    
\r\n    \r\n    \r\n        確定<\/p>\r\n    <\/p>\r\n    
\r\n    \r\n    \r\n        付款<\/p>\r\n        取消訂單<\/p>\r\n    <\/p>\r\n    
\r\n    \r\n    \r\n        設(shè)為默認(rèn)<\/p>\r\n        修改<\/a>\r\n        刪除<\/label>\r\n    <\/p><\/body><\/html><\/pre>

<\/p>Le

consiste à séparer la distance entre chaque bouton, principalement le contenu à l'intérieur de

.br<\/code>p.button_box<\/code><\/p>Il faut dire que la structure du HTML est assez simple. Tout d'abord, la couche extérieure est la bo?te de <\/blockquote>, et à l'intérieur, si vous avez besoin de boutons, écrivez simplement un élément non auto-fermant de .button.

p.button_box<\/code><\/p>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<\/code><\/p>Dans la troisième ligne, nous montrons une bo?te ordinaire, des liens, et comment écrire des boutons <\/blockquote> Puisque les boutons sont des éléments à fermeture automatique, nous les enveloppons avec un élément

pour les rendre disponibles <\/p>

Partie SASS label<\/code> <\/p>Premier citation reset.scss et mixin.scss, voir mobile H5. article de blog de la série basic reset.scss et mixin.scss

<\/h2>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.

<\/p>

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.<\/p>

.button_box {\r\n    display: table;     \/\/ 將 button_box 外層盒子模擬成表格\r\n    width: 100%;        \/\/ 表格非完整塊級(jí)元素,需要設(shè)定寬度\r\n    table-layout:fixed; \/\/ 設(shè)定表格內(nèi)單元格的寬度為自動(dòng)等寬,重要!\r\n    border-collapse: collapse;  \/\/ 合并表格和單元格邊框\r\n    .button {\r\n        display: table-cell;    \/\/ 將子元素模擬成單元格\r\n        font-size: 1.5rem;text-align: center;\r\n        background: #eee;color: #555;   \/\/ 設(shè)定默認(rèn)按鈕樣式\r\n        box-shadow: 0 0 0 1px #ddd;     \/\/ 利用陰影模擬邊框(陰影不占用盒子模型)\r\n        text-decoration: none;          \/\/ 如果元素是鏈接,則去掉下劃線\r\n        @include hlh(4.8rem);           \/\/ 引用高度行高隱藏溢出代碼塊\r\n        &.pink {        \/\/設(shè)定一個(gè)特殊按鈕樣式,可根據(jù)需要設(shè)定多個(gè)\r\n            background: #F13E7A;\r\n            color: #fff;\r\n            box-shadow:0 0 0 1px #F13E7A;\r\n        }\r\n        input {display: none;}      \/\/ 如果是按鈕,則隱藏\r\n    }\r\n}<\/pre> Résumé

<\/p>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.

<\/h2>En fait, les tableaux sont très géniaux. Grace à 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.

<\/p>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 ?

<\/p>"}

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Table des matières
Le terminal mobile H5 crée un nombre illimité de boutons bannières
Avant-propos
L'effet souhaité.
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

Mar 10, 2017 pm 04:49 PM


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 H5Comme 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>移動(dòng)端H5做一個(gè)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">設(shè)為默認(rèn)</p>
        <a class="button">修改</a>
        <label class="button">刪除<input type="submit"></label>
    </p></body></html>

Le
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%;        // 表格非完整塊級(jí)元素,需要設(shè)定寬度
    table-layout:fixed; // 設(shè)定表格內(nèi)單元格的寬度為自動(dòng)等寬,重要!
    border-collapse: collapse;  // 合并表格和單元格邊框
    .button {
        display: table-cell;    // 將子元素模擬成單元格
        font-size: 1.5rem;text-align: center;
        background: #eee;color: #555;   // 設(shè)定默認(rèn)按鈕樣式
        box-shadow: 0 0 0 1px #ddd;     // 利用陰影模擬邊框(陰影不占用盒子模型)
        text-decoration: none;          // 如果元素是鏈接,則去掉下劃線
        @include hlh(4.8rem);           // 引用高度行高隱藏溢出代碼塊
        &.pink {        //設(shè)定一個(gè)特殊按鈕樣式,可根據(jù)需要設(shè)定多個(gè)
            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. Grace à 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 de ce site Web
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

Outils d'IA chauds

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel PHP
1502
276
Que signifie h5 ? Que signifie h5 ? Aug 02, 2023 pm 01:52 PM

H5 fait référence à HTML5, la dernière version de HTML. H5 est un langage de balisage puissant qui offre aux développeurs plus de choix et d'espace créatif. Son émergence favorise le développement de la technologie Web et rend l'interaction et l'effet des pages Web plus excellents. m?rit progressivement et devient populaire, je pense qu'il jouera un r?le de plus en plus important dans le monde d'Internet.

Comment utiliser les opérations gestuelles mobiles dans les projets Vue Comment utiliser les opérations gestuelles mobiles dans les projets Vue Oct 08, 2023 pm 07:33 PM

Comment utiliser les opérations gestuelles mobiles dans les projets Vue Avec la popularité des appareils mobiles, de plus en plus d'applications doivent offrir une expérience interactive plus conviviale sur le terminal mobile. L'opération gestuelle est l'une des méthodes d'interaction courantes sur les appareils mobiles, qui permet aux utilisateurs d'effectuer diverses opérations en touchant l'écran, telles que le glissement, le zoom, etc. Dans le projet Vue, nous pouvons implémenter des opérations gestuelles mobiles via des bibliothèques tierces. Ce qui suit explique comment utiliser les opérations gestuelles dans le projet Vue et fournit des exemples de code spécifiques. Tout d'abord, nous devons introduire un

Résoudre le problème des points multi-touch sur le terminal mobile Vue Résoudre le problème des points multi-touch sur le terminal mobile Vue Jun 30, 2023 pm 01:06 PM

Dans le développement mobile, nous rencontrons souvent le problème du toucher multi-doigts. Lorsque les utilisateurs utilisent plusieurs doigts pour faire glisser ou zoomer sur l'écran d'un appareil mobile, la manière de reconna?tre et de répondre avec précision à ces gestes constitue un défi de développement important. Dans le développement de Vue, nous pouvons prendre certaines mesures pour résoudre le problème du toucher multi-doigts sur le terminal mobile. 1. Utilisez le plug-in vue-touch vue-touch est un plug-in gestuel pour Vue, qui peut facilement gérer les événements tactiles à plusieurs doigts du c?té mobile. Nous pouvons installer vue-to via npm

à quoi se réfère H5? Explorer le contexte à quoi se réfère H5? Explorer le contexte Apr 12, 2025 am 12:03 AM

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

H5: L'évolution des normes et technologies Web H5: L'évolution des normes et technologies Web Apr 15, 2025 am 12:12 AM

Les normes et technologies Web ont évolué à ce jour de HTML4, CSS2 et JavaScript simple et ont subi des développements importants. 1) HTML5 introduit des API telles que Canvas et WebStorage, ce qui améliore la complexité et l'interactivité des applications Web. 2) CSS3 ajoute des fonctions d'animation et de transition pour rendre la page plus efficace. 3) JavaScript améliore l'efficacité de développement et la lisibilité du code par la syntaxe moderne de Node.js et ES6, telles que les fonctions et classes Arrow. Ces changements ont favorisé le développement de l'optimisation des performances et les meilleures pratiques des applications Web.

Comment implémenter h5 pour glisser vers le haut du c?té Web pour charger la page suivante Comment implémenter h5 pour glisser vers le haut du c?té Web pour charger la page suivante Mar 11, 2024 am 10:26 AM

étapes de mise en ?uvre?: 1. Surveiller l'événement de défilement de la page?; 2. Déterminer si la page a défilé vers le bas?; 3. Charger la page de données suivante?; 4. Mettre à jour la position de défilement de la page.

H5: comment il améliore l'expérience utilisateur sur le Web H5: comment il améliore l'expérience utilisateur sur le Web Apr 19, 2025 am 12:08 AM

H5 améliore l'expérience utilisateur Web avec le support multimédia, le stockage hors ligne et l'optimisation des performances. 1) Support multimédia: H5 et les éléments simplifient le développement et améliorent l'expérience utilisateur. 2) Stockage hors ligne: WebStorage et indexDDB permettent une utilisation hors ligne pour améliorer l'expérience. 3) Optimisation des performances: les travailleurs Web et les éléments optimisent les performances pour réduire la consommation de bande passante.

Code H5: accessibilité et HTML sémantique Code H5: accessibilité et HTML sémantique Apr 09, 2025 am 12:05 AM

H5 améliore l'accessibilité des pages Web et les effets SEO via des éléments sémantiques et des attributs ARIA. 1. Utiliser, etc. pour organiser la structure du contenu et améliorer le référencement. 2. Les attributs ARIA tels que Aria-Babel améliorent l'accessibilité, et les utilisateurs de technologies d'assistance peuvent utiliser en douceur les pages Web.

See all articles