Maison > Article > interface Web > Explication détaillée de la façon de créer diverses listes sur le terminal mobile H5 (4)

Explication détaillée de la façon de créer diverses listes sur le terminal mobile H5 (4)

黄舟original: 2017-03-10 16:39:071864parcourir

Comment faire diverses listes sur le terminal mobile H5 (4)

Revue précédente

《Comment faire diverses listes sur le terminal mobile H5 Méthode de production (1) 》
《Comment produire diverses listes sur terminal mobile H5 (2)》
《Comment produire diverses listes sur terminal mobile H5 (3)》

Si vous avez vu cet article en premier , il est recommandé d'aller sur le lien ci-dessus et de lire d'abord le contenu correspondant, afin que le contexte soit cohérent et qu'il soit plus facile de comprendre le contenu de cet article.

Les trois premiers chapitres sont tous parlez de la façon de mettre en œuvre une liste ordinaire. La difficulté va de facile à difficile, mais en général, vous pouvez la maîtriser en un coup d'œil. Dans ce chapitre, nous ferons une liste graphique.

Ordinaire à deux colonnes. listes d'images et de textes

Les listes d'images et de textes à deux colonnes sont très courantes. Elles sont encore plus courantes dans les terminaux mobiles de commerce électronique H5 tels que JDTB. Ici, commençons par Créer la plus simple, comme indiqué dans. l'image ci-dessous.

Explication détaillée de la façon de créer diverses listes sur le terminal mobile H5 (4)

Voici une disposition très simple sur deux colonnes d'images et de listes de textes, chaque bloc contient des images, des noms et des prix. C'est trop simple à mettre en œuvre. une mise en page côté PC. Mais comme nous sommes du côté mobile, les largeurs des différents téléphones portables sont donc incohérentes.

Toutes les images ici sont toutes identiques. spécifications et sont carrés. Dans les projets réels, il y a généralement des exigences pour les images du produit. Si votre produit n'est pas carré, nous aurons des tutoriels pertinents ci-dessous

code html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>list 2</title>
<link rel="stylesheet" href="../style/style.css"></head><body><p class="list_2">
    <ul>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题1</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题2</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题3</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <img src="../image/goods.jpg" alt="商品图片" class="goods_photo">
                <h4 class="goods_title">这里是商品标题4</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
    </ul></p></body></html>

Le code est relativement long, mais il est toujours visible d'un coup d'œil. Nous avons ajouté différentes classes à différents éléments. Le but est de le rendre à l'échelle du site, les styles de base utilisant ces éléments peuvent être unifiés, et La réutilisation du code CSS peut être réalisée.

Code SASS

.list_2 {    
ul {        
@extend .cf; // 引用清理浮动代码片,看不懂请看本人scss相关教程
        li {            
        width: 50%;float: left;padding: 1rem 0;
            outline: 1px solid #ddd;  // 使用 outline 模拟边框 (outline不占据盒子模型)
            background: #fff;  // 使用白色背景颜色,防止 outline 重叠造成 2px 线条
            a {                display: block;
                text-decoration: none; // 去除默认下划线
            }            .goods_title,.goods_price {                
            padding: 0 1rem; // 加上左右内填充,防止文字和边框粘结
                text-align: center;
            }            .goods_photo {                
            width: 60%;margin: .5rem auto;display: block;
            }
        }
    }
}// 全站范围内用到的图文基本样式.goods_title,.goods_price {    
display: block;position: relative;
    @include ts(); // 引用文字描白边代码片
    @include online(1.8rem); // 引用文字超出一行省略号代码片}
    .goods_title {color:#000;font-size: 1.2rem;}
    .goods_price {color:#f60;font-size: 1.5rem;font-weight: bold;}

Encore une fois, la partie CSS de cette série de tutoriels utilise la grammaire SASS, si vous ne connaissez pas la syntaxe SASS, c'est Il est recommandé de passer une demi-heure à une heure à apprendre le SASS

Ici, nous extrairons quelques styles courants sur tout le site

Résumé

Dans. ce chapitre, nous utilisons une disposition simple en double colonne de listes graphiques pour nous concentrer sur les points suivants

Côté mobile, lorsque vous devez utiliser les bordures gauche et droite, essayez de ne pas utilisez les bordures
. Dans cet exemple, utilisez border pour simuler outline
est utilisé dans
pour simuler. Lorsque vous utilisez des bordures, assurez-vous de faire correspondre la couleur d'arrière-plan pour éviter. outline bordures.2px
Comment implémenter des traits de texte CSS3.
text-shadow
Comment implémenter une ligne de titre de texte CSS3 qui dépasse l'affichage des ellipses
Deux façons d'introduire des blocs de code dans sass, ainsi que les similitudes et les différences entre eux (veuillez réfléchir par vous-même ou vous référer aux tutoriels pertinents)

Dans
, la balise html5 peut imbriquer des éléments au niveau du bloc. Cependant, dans les versions a ou xhtml antérieures, cela n'est pas recommandé. Ne soyez pas confus ou ne vous sentez pas inapproprié ici. Restez dans l'air du temps html
.

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：Explication détaillée de la façon de créer diverses listes sur le terminal mobile H5 (3)Article suivant：Explication détaillée de la façon de créer diverses listes sur le terminal mobile H5 (3)

Articles Liés

Voir plus