Comment utiliser de manière flexible la mise en page CSS Positions pour concevoir des pages Web-tutoriel CSS-php.cn

Comment utiliser de manière flexible la mise en page CSS Positions pour concevoir des pages Web

WBOY

Libérer： 2023-09-27 18:39:26

original

723 Les gens l'ont consulté

如何灵活运用CSS Positions布局设计网页

Comment utiliser de manière flexible la mise en page des positions CSS pour concevoir des pages Web

Dans la conception Web, la mise en page est un élément clé. L'utilisation flexible de la mise en page CSS Positions peut nous aider à obtenir une variété d'effets de conception Web intéressants et uniques. Cet article présentera les concepts de base de la disposition CSS Positions et démontrera comment l'utiliser de manière flexible à travers des exemples de code spécifiques.

1. Le concept de base de la disposition des positions CSS
La disposition des positions CSS fait référence à une technologie qui réalise la mise en page des pages Web en ajustant la position et la taille des éléments. CSS Positions propose quatre valeurs d'attribut parmi lesquelles choisir, à savoir : statique (positionnement statique), relative (positionnement relatif), absolue (positionnement absolu) et fixe (positionnement fixe).

static (positionnement statique) : méthode de mise en page par défaut, les éléments sont disposés dans l'ordre du flux de documents et ne sont pas affectés par d'autres attributs de positionnement.
relatif (positionnement relatif) : Ajustez par rapport à la position d'origine de l'élément lui-même. En définissant des attributs tels que haut, bas, gauche et droite, vous pouvez affiner la position des éléments dans le flux de documents.
absolu (positionnement absolu) : Ajustez par rapport à l'élément ancêtre positionné le plus proche. En définissant des attributs tels que haut, bas, gauche et droite, les éléments peuvent être placés n'importe où sur la page.
fixé : s'ajuste par rapport à la fenêtre du navigateur. En définissant des attributs tels que haut, bas, gauche et droite, les éléments peuvent être fixés à une position spécifiée dans la fenêtre du navigateur.

2. Exemple d'effet de conception Web via la disposition des positions CSS

Disposition du pied de page collant
Dans certains cas, nous souhaitons que le pied de page en bas de la page reste collant en bas de la page, quelle que soit la quantité de contenu. si c'est le cas, le pied de page peut rester en bas. Ce qui suit est un exemple d'implémentation simple :

Code HTML :

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .content {
            flex: 1;
        }

        .footer {
            height: 50px;
            background-color: #f5f5f5;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="content">
        <!-- 网页内容 -->
    </div>
    <div class="footer">
        <!-- 页脚内容 -->
    </div>
</body>
</html>

Copier après la connexion

En définissant la propriété flex de .content sur 1, laissez-la étendre automatiquement l'espace restant, et .footer en définissant position:fixed bottom: 0; épingler en bas de la page.

Disposition des composants suspendus
Parfois, nous devons implémenter un composant suspendu (comme un bouton de retour en haut) dans la page lorsque l'utilisateur fait défiler la page, le composant suspendu défile avec la page et reste dans une position fixe. Voici un exemple d'implémentation simple :

Code HTML :

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 200vh;
            margin: 0;
            padding: 0;
        }

        .scroll-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            background-color: #f5f5f5;
            display: none;
        }
    </style>
</head>
<body>
    <div class="scroll-btn"></div>
    <script>
        window.onscroll = function() {
            var btn = document.querySelector('.scroll-btn');
            if (window.scrollY > 200) {
                btn.style.display = 'block';
            } else {
                btn.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Copier après la connexion

En définissant la position :fixed de .scroll-btn et les attributs top et right, le bouton de retour en haut peut être fixé à une position spécifiée sur le page. Utilisez l'événement window.onscroll pour écouter les événements de défilement Lorsque le défilement dépasse une certaine distance, le bouton est affiché, sinon le bouton est masqué.

Les exemples ci-dessus ne représentent qu'une petite partie des scénarios d'application de la mise en page CSS Positions. Grâce à une étude et une pratique plus approfondies, nous pouvons utiliser ces technologies de manière flexible pour ajouter plus d'imagination à la conception Web. J'espère que les concepts et exemples de mise en page CSS Positions présentés dans cet article pourront vous inspirer et vous permettre d'utiliser la mise en page de manière flexible dans la conception Web.

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 utiliser de manière flexible la mise en page CSS Positions pour concevoir des pages Web