Magie et mise en page CSS amusantes (code)

Le contenu que cet article vous apporte concerne la magie CSS et la mise en page (code) intéressantes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Avant-propos : La mise en page et le style sont des cours obligatoires pour chaque front-end. Dans votre travail quotidien, vous rencontrerez également les exigences de mise en page de certaines scènes spécifiques. En faisant correspondre les styles, vous pouvez obtenir des effets magiques. J'ai rassemblé quelques mises en page que je rencontre dans le développement quotidien, ainsi que des méthodes magiques d'écriture d'effets spéciaux que j'ai trouvées en parcourant les principaux sites Web, et j'aimerais les partager ici.

Pour des raisons d'espace, il sera divisé en 2 articles. Aujourd'hui, je vais d'abord présenter quelques méthodes d'écriture de mise en page intéressantes et pratiques. Le prochain article montrera la magie du style.

Chargement paresseux d'image d'espace réservé adaptatif

Lors de l'affichage d'images de produits dans le centre commercial, s'il y a beaucoup d'images, une meilleure expérience est la suivante : il y aura d'abord une image d'espace réservé, le but est Afin de rendre la page sans gigue, c'est ce qu'on appelle l'effet de chargement paresseux des images. Cependant, c'est un casse-tête en matière d'adaptation, notamment lors du basculement entre les écrans horizontaux et verticaux des téléphones portables. S'il est calculé via JavaScript, une gigue peut se produire.

Basée sur le principe d'utiliser CSS au lieu de JS, nous avons la solution suivante :

<div>
    <img  alt="Magie et mise en page CSS amusantes (code)" >
</div>

.img-ratio {
    width: 100%;
    position: relative;
    padding-top: 75%;
}

.img-ratio > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Elle peut s'adapter à différents écrans, à condition que l'UI fournisse un A Une image fictive 4:3 est suffisante. L'image ci-dessous montre deux images de largeurs et hauteurs différentes mais de mêmes proportions, qui peuvent toutes deux être parfaitement centrées.

Le principe est le suivant :

• En fonction de la largeur du conteneur et du rapport largeur/hauteur, il calcule automatiquement la taille réelle du conteneur et permet aux sous-éléments du conteneur tels que img à l'intérieur d'avoir une largeur et une hauteur adaptatives.
• La largeur du conteneur parent de l'image est de 100 % et le pourcentage de hauteur du conteneur parent est : 100 * 3/4 ​​= 75 %.
• L'image est absolue et remplit complètement le conteneur parent.

Barre de défilement horizontale côté mobile

Chaque centimètre de l'interface mobile est précieux. Parfois afin de contrôler la longueur de défilement de l'écran, certains modules sont disposés horizontalement. Cependant, leur disposition horizontale crée certains problèmes de mise en page.

Par exemple, le style de la barre de défilement côté mobile dépend du navigateur mobile et est différent. Une solution est de masquer l’axe de défilement, mais pas overflow-x:hidden;, sinon il ne pourra pas défiler. Calculez ensuite la largeur de chaque bloc horizontal de manière à ce qu'une partie du bloc le plus à droite soit exposée, afin que l'utilisateur sache qu'il y a du contenu en dehors de l'écran sur la droite et qu'il peut être glissé horizontalement.

Et si la largeur du défilement horizontal est inconnue, car le nombre de modules horizontaux peut changer en fonction des besoins de l'entreprise, alors float ne peut pas être utilisé pour la disposition horizontale. Étant donné que le flottant est utilisé, il est nécessaire de connaître la largeur de tout le défilement horizontal. La largeur totale est plus large que la largeur cumulée des blocs flottants, afin de garantir que le bloc flottant ne s'enroule pas.

Donc, il existe la méthode d'écriture suivante :

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

.wrapper {
    width: 340px;
    height: 80px;
    overflow: hidden;
}

.wrapper ul {
    height: 96px;
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    padding: 0;
    margin: 0;
}

.wrapper li {
    display: inline-block;
    width: 80px;
    height: 80px;
    background-color: #ddd;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    margin-right: 10px;
}

L'idée est la suivante : ul définit white-space:nowrap;, li définit display:inline-block; Le p le plus à l’extérieur utilise la différence de hauteur pour masquer la barre de défilement horizontale.

Affichage centré de la navigation supérieure avec largeur variable

Certains sites Web officiels ont une barre de navigation supérieure, et la zone de contenu de la navigation La barre doit souvent être affichée au centre, des deux côtés. Laissez-la ensuite vide, et il peut y avoir une ligne racine ou une ombre sous la barre de navigation pour distinguer le haut du contenu principal.

.center-float {
    float: left;
    position: relative;
    left: 50%;
}

.center-float > ul {
    position: relative;
    left: -50%;
}

Il s'agit d'une méthode de flottement au centre, combinée à un positionnement relatif.

Le pied de page est placé en bas

Lorsque la zone de contenu principale de la page n'est pas assez haute, le pied de page est toujours affiché en bas. Bien entendu, cela ne signifie pas position : fixe, le pied de page se trouve immédiatement en dessous de la zone de contenu. Il y a 2 façons.

la structure HTML est la suivante :

    
        <div>....</div>
        <div>....</div>
    

1. marge et remplissage

html, body {
    height: 100%;
}
$footer-height: 30px;

#content {
    min-height: 100%;
    margin-bottom: -$footer-height;
    padding-bottom: $footer-height;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}

2. mise en page flexible

$footer-height: 30px;

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#content {
    flex: 1;
}

#footer {
    line-height: $footer-height;
    text-align: center;
}

ultra-. arrière-plan large Centrez l'image

Pour certains sites Web portails traditionnels, la largeur de leur zone de contenu principale est à peu près une largeur classique de 980 px ou 1 000 px. Parfois, une image plus large sera utilisée comme image d'arrière-plan globale et placée au centre sans défilement horizontal. Vous pouvez faire ceci :

.wrapper {
    min-width: 1000px;
    height: 800px;
    background: url(test.jpg) no-repeat center top;
}

.mainContent {
    position: relative;
    width: 1000px;
    margin: 0 auto;
}

::après pour obtenir un centrage horizontal et vertical

pseudo Des éléments peuvent-ils également être utilisés pour réaliser un centrage ? J'ai trouvé ça assez magique quand je l'ai vu. Regardez l'exemple suivant :

<div>
    <img  alt="Magie et mise en page CSS amusantes (code)" >
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;

    text-align: center;
}

.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wrapper > img {
    vertical-align: middle;
}

La direction horizontale est facile à comprendre. Dans le sens vertical, cela peut être compris comme :: après avoir tiré l'image vers le milieu.

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne

Tutoriel vidéo CSS du site Web PHP chinois !

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!