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

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)》
《 Comment faire diverses listes sur terminal mobile H5 (4 )》

Si vous avez vu cet article en premier, il est recommandé d'aller d'abord sur le lien ci-dessus et de lire le contenu correspondant. Cela rendra le contexte cohérent et facilitera la compréhension du contenu de cet article.

Au chapitre 4, nous avons appris à créer une liste d'images et de textes à double colonne. Cependant, cette liste d'images et de textes a certaines limites. La limitation est que les images doivent être carrées.

Bien sûr, dans la pratique des projets réels, cela suffit. Cependant, ce problème n'est toujours pas exhaustif. Par exemple, les images ne sont pas chargées en termes de taille, et assurez-vous que l'image. ne peut pas être déformé lorsqu'il n'est pas chargé.

Liste d'images et de textes ordinaire à deux colonnes (la taille de l'image n'est pas limitée et l'image n'est pas déformée avant le chargement)

Il y en a encore beaucoup de tels scénarios. Jetons un coup d'œil aux rendus réels

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

Regardez cet effet. Ce n'est pas trop compliqué. Mais il y a quelques points clés. code html

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 3</title><link rel="stylesheet" href="../style/style.css">
</head>
<body>
<p class="list_3">
    <ul>
        <li>
            <a href="">
                <p class="goods_photo">
                    <img src="../image/1.jpg" alt="这里是商品标题1">
                </p>
                <h4 class="goods_title">这里是商品标题1</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <p class="goods_photo">
                    <img src="../image/2.jpg" alt="这里是商品标题2">
                </p>
                <h4 class="goods_title">这里是商品标题2</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <p class="goods_photo">
                    <img src="../image/3.jpg" alt="这里是商品标题3">
                </p>
                <h4 class="goods_title">这里是商品标题3</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
        <li>
            <a href="">
                <p class="goods_photo">
                    <img src="../image/4.jpg" alt="这里是商品标题4">
                </p>
                <h4 class="goods_title">这里是商品标题4</h4>
                <em class="goods_price">￥4999.00</em>
            </a>
        </li>
    </ul></p></body></html>

Copier après la connexion

Le code de cet exemple est différent du code de l'article précédent où toutes les images sont carrées. Comme vous pouvez le voir, j'ai ajouté une couche de. img imbrication pour la balise p. Ceci n'est bien sûr pas arbitraire. Il est utilisé pour placer l'image et fournir une boîte parent. Regardons à nouveau le code CSS. 🎜>

Ici, on ajoute ce code

à la case

.list_3 {    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: 100%;padding-bottom: 100%;position: relative;
                img {                    
                // 限制图片最大宽高,保持不变形
                    max-width: 80%;max-height: 80%;display: block;
                    // 未知宽高块级元素水平且垂直局中代码
                    position: absolute;top: 50%;left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }
    }
}// 全站范围内用到的图文基本样式.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;}

Copier après la connexion

pour former une case carrée qui change avec la largeur de l'appareil. Si vous n'arrivez pas à comprendre, vous pouvez vous référer à mon précédent. article de blog "Du CSS pur pour implémenter des mises en page communes sur les terminaux mobiles - le secret des crochets de hauteur et de largeur".

.goods_photoRésuméwidth: 100%;padding-bottom: 100%;position: relative;

Dans le chapitre précédent, nous avons implémenté une mise en page à double colonne et implémenté une simulation <.> bordures, etc. Dans ce chapitre, les points de connaissances suivants sont principalement mis en évidence :

1pxComment CSS implémente les hooks de hauteur et de largeur des éléments.

Comment CSS réduit la taille des images.
Comment implémenter le centrage horizontal et vertical d'éléments au niveau du bloc de taille inconnue.

(1.) Android 4.4 et versions antérieures et certains navigateurs mobiles nationaux ne prennent pas en charge les derniers attributs CSS tels que
Par conséquent, la méthode décrite dans cet article consiste à utiliser les techniques CSS traditionnelles pour résoudre le problème.
(2.) Dans cette série d'articles, je prévois d'expliquer étape par étape certaines de mes expériences et idées sur le terminal mobile. Certaines personnes se sont exclamées après avoir lu le premier chapitre, c'est trop simple, je voudrais poser une question, presque n'importe quel livre de programmation Cela commence par clac N'est-ce pas très simple ?

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!