Comment faire diverses listes sur le terminal mobile H5 (5)
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
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="/static/imghw/default1.png" data-src="../image/1.jpg" class="lazy" alt="这里是商品标题1">
</p>
<h4 id="这里是商品标题">这里是商品标题1</h4>
<em class="goods_price">￥4999.00</em>
</a>
</li>
<li>
<a href="">
<p class="goods_photo">
<img src="/static/imghw/default1.png" data-src="../image/2.jpg" class="lazy" alt="这里是商品标题2">
</p>
<h4 id="这里是商品标题">这里是商品标题2</h4>
<em class="goods_price">￥4999.00</em>
</a>
</li>
<li>
<a href="">
<p class="goods_photo">
<img src="/static/imghw/default1.png" data-src="../image/3.jpg" class="lazy" alt="这里是商品标题3">
</p>
<h4 id="这里是商品标题">这里是商品标题3</h4>
<em class="goods_price">￥4999.00</em>
</a>
</li>
<li>
<a href="">
<p class="goods_photo">
<img src="/static/imghw/default1.png" data-src="../image/4.jpg" class="lazy" alt="这里是商品标题4">
</p>
<h4 id="这里是商品标题">这里是商品标题4</h4>
<em class="goods_price">￥4999.00</em>
</a>
</li>
</ul></p></body></html>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;}.goods_photoRésuméwidth: 100%;padding-bottom: 100%;position: relative;
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 quePar 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 parclacN'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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
