Unterhaltsame CSS-Magie und Layout (Code)

Der Inhalt dieses Artikels handelt von interessanter CSS-Magie und -Layout. Ich hoffe, dass er für Sie hilfreich ist. .

Vorwort: Layout und Stil sind Pflichtkurse für jedes Frontend. Bei der täglichen Arbeit werden Sie auch auf die Layoutanforderungen einiger spezifischer Szenen stoßen. Durch die Anpassung der Stile können Sie einige magische Effekte erzielen. Ich habe einige Layouts gesammelt, auf die ich in der täglichen Entwicklung stoße, sowie Schreibmethoden für magische Spezialeffekte, die ich zufällig beim Durchsuchen großer Websites gefunden habe, und möchte sie hier teilen.

Aus Platzgründen wird es in 2 Artikel aufgeteilt. Heute werde ich zunächst einige interessante und praktische Methoden zum Schreiben von Layouts vorstellen. Der nächste Artikel zeigt die Magie des Stils.

Lazy Loading Platzhalterbild adaptiv

Wenn bei der Anzeige von Produktbildern im Einkaufszentrum viele Bilder vorhanden sind, ist die Erfahrung besser: Es wird zuerst ein Platzhalterbild angezeigt, der Zweck ist Um Um die Seite ruckelfrei zu machen, handelt es sich um den sogenannten Lazy-Loading-Effekt von Bildern. Allerdings bereitet die Anpassung Kopfschmerzen, insbesondere beim Wechsel zwischen horizontalen und vertikalen Bildschirmen von Mobiltelefonen. Wenn es über JavaScript berechnet wird, kann es zu Jitter kommen.

Basierend auf dem Prinzip, CSS anstelle von JS zu verwenden, haben wir die folgende Lösung:

<div>
    <img  alt="Unterhaltsame CSS-Magie und Layout (Code)" >
</div>

rrree

Es kann sich an verschiedene Bildschirme anpassen, solange die Benutzeroberfläche ein 4:3 bietet. Verwenden Sie einfach a Platzhalterbild. Das Bild unten zeigt zwei Bilder mit unterschiedlichen Breiten und Höhen, aber gleichen Proportionen, die beide perfekt zentriert werden können.

Das Prinzip ist:

• Anhand der Breite des Behälters und dem Verhältnis von Breite zu Höhe wird automatisch die tatsächliche Größe berechnet des Containers und ermöglicht den Container-Unterelementen wie img im Inneren eine adaptive Breite und Höhe.
• Die Breite des übergeordneten Bildcontainers beträgt 100 % und der Höhenprozentsatz des übergeordneten Containers beträgt: 100 * 3 / 4 = 75 %.
• Das Bild ist absolut und füllt den übergeordneten Container vollständig aus.

Horizontale Bildlaufleiste auf der mobilen Seite

Die Schnittstelle auf der mobilen Seite ist sehr wertvoll. Um die Scrolllänge des Bildschirms zu steuern, werden einige Module manchmal horizontal angeordnet. Allerdings führt die horizontale Anordnung zu einigen Layoutproblemen.

Zum Beispiel hängt der Stil der Bildlaufleiste auf der mobilen Seite vom mobilen Browser ab und ist unterschiedlich. Eine Lösung besteht darin, die Scroll-Achse auszublenden, aber nicht overflow-x:hidden;, da sonst kein Scrollen möglich ist. Berechnen Sie dann die Breite jedes horizontalen Blocks so, dass ein Teil des Blocks ganz rechts freigelegt wird, sodass der Benutzer weiß, dass sich rechts außerhalb des Bildschirms Inhalte befinden, die horizontal verschoben werden können.

Und wenn die Breite des horizontalen Bildlaufs unbekannt ist, da sich die Anzahl der horizontalen Module je nach Geschäftsanforderungen ändern kann, kann Float nicht für die horizontale Anordnung verwendet werden. Da Floating verwendet wird, muss die Breite des gesamten horizontalen Bildlaufs bekannt sein. Die Gesamtbreite ist breiter als die Gesamtbreite der Floating-Blöcke, um sicherzustellen, dass der Floating-Block nicht umbrochen wird.

Es gibt also die folgende Schreibmethode:

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

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

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

Die Idee ist: ul setzt white-space:nowrap;, li setzt display:inline-block;. Das äußerste p nutzt den Höhenunterschied, um die horizontale Bildlaufleiste auszublenden.

Zentrierte Darstellung der oberen Navigation mit variabler Breite

Einige offizielle Websites verfügen über eine obere Navigationsleiste und den Inhaltsbereich der Navigation Die Navigationsleiste muss häufig in der Mitte auf beiden Seiten angezeigt werden. Lassen Sie sie dann leer. Unter der Navigationsleiste befindet sich möglicherweise eine Stammlinie oder ein Schatten, um den oberen Inhalt vom Hauptinhalt zu unterscheiden.

.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;
}

Dies ist eine Methode des Schwebens in der Mitte, kombiniert mit relativer Positionierung.

Fußzeile wird unten platziert

Wenn der Hauptinhaltsbereich der Seite nicht hoch genug ist, wird die Fußzeile weiterhin unten angezeigt. Dies bedeutet natürlich nicht, dass position:fixed, die Fußzeile direkt unter dem Inhaltsbereich liegt. Es gibt zwei Möglichkeiten.

HTML-Struktur ist wie folgt:

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

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

1. Rand und Polsterung

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

2. Flex-Layout

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;
}

Ultrabreites Hintergrundbild zentriert

Einige traditionelle Portal-Websites haben im Hauptinhaltsbereich eine klassische Breite wie 980px oder 1000px. Manchmal wird ein breiteres Bild als Gesamthintergrundbild verwendet und ohne horizontales Scrollen in der Mitte platziert. Sie können dies tun:

$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;
}

::after, um eine horizontale und vertikale Zentrierung

pseudo zu erreichen -element auch Kann es verwendet werden, um eine Zentrierung zu erreichen? Als ich es sah, fand ich es ziemlich magisch. Schauen Sie sich das folgende Beispiel an:

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

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

<div>
    <img  alt="Unterhaltsame CSS-Magie und Layout (Code)" >
</div>

Die horizontale Richtung ist leicht zu verstehen. In vertikaler Richtung kann es so verstanden werden::Nachdem das Bild in die Mitte gezogen wurde.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte CSS-Video-Tutorial auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonUnterhaltsame CSS-Magie und Layout (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!