Comment créer une mise en page d'affichage de marché réactive à l'aide de HTML et CSS-tutoriel HTML-php.cn

Comment créer une mise en page d'affichage de marché réactive à l'aide de HTML et CSS

王林

Libérer： 2023-10-16 09:30:30

original

1490 Les gens l'ont consulté

Comment créer une mise en page daffichage de marché réactive à laide de HTML et CSS

Comment créer une mise en page d'affichage de marché réactive en utilisant HTML et CSS

La page d'affichage de marché est une partie importante d'un site Web de commerce électronique. Elle attire l'attention des utilisateurs et les incite à effectuer des achats en affichant des biens et des services. . À l'ère actuelle de l'Internet mobile, de plus en plus d'utilisateurs accèdent aux pages Web via des téléphones mobiles et des tablettes. Il est donc nécessaire de créer une mise en page réactive pour que la page d'affichage du marché s'adapte aux différentes tailles d'écran. Cet article explique comment utiliser HTML et CSS pour créer une mise en page d'affichage de marché réactive et fournit des exemples de code spécifiques.

Structure HTML
Tout d'abord, nous devons créer la structure HTML de base. Vous trouverez ci-dessous une mise en page HTML simple pour afficher différents produits sur une page de marché.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式市场展示页面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的市场</h1>
        <!-- 添加其他导航和搜索栏等元素 -->
    </header>

    <main>
        <div class="product-container">
            <div class="product">
                <img src="product1.jpg" alt="商品1">
                <h2>商品名称1</h2>
                <p>商品描述1...</p>
                <a href="#">查看详情</a>
            </div>
            <div class="product">
                <img src="product2.jpg" alt="商品2">
                <h2>商品名称2</h2>
                <p>商品描述2...</p>
                <a href="#">查看详情</a>
            </div>
            <!-- 添加更多商品-->
        </div>
    </main>

    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

Copier après la connexion

Styles CSS
Ensuite, nous devons ajouter des styles CSS dans le fichier style.css pour obtenir une mise en page réactive. style.css文件中添加CSS样式，以实现响应式布局。

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

h1 {
    margin: 0;
}

main {
    padding: 20px;
}

.product-container {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 100%;
    text-align: center;
    padding: 20px;
}

.product img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

Copier après la connexion

实现响应式布局
为了实现响应式布局，我们可以使用媒体查询(Media Queries)来根据不同屏幕尺寸为页面添加样式。

/* 手机屏幕 */
@media only screen and (max-width: 600px) {
    .product {
        width: 50%;
    }
}

/* 平板电脑屏幕 */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .product {
        width: 33.33%;
    }
}

/* 高分辨率显示器或大屏桌面 */
@media only screen and (min-width: 1025px) {
    .product {
        width: 25%;
    }
}

Copier après la connexion

通过上述CSS代码，我们在不同屏幕尺寸下，将.product

rrreee

Implémenter une mise en page réactive
Afin de mettre en œuvre une mise en page réactive, nous pouvons utiliser des requêtes multimédias (Media Queries) pour ajouter des styles à la page en fonction des différentes tailles d'écran.

.product

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment créer une mise en page d'affichage de marché réactive à l'aide de HTML et CSS