Teilen von HTML5-Übungscode für die Verwendung von CSS zum Dekorieren von Bildergalerien (2)

In der vorherigen Lektion verwendete unsere Lösung jquery, um ein Span-Tag zu erstellen. In dieser Vorlesung werden wir eine bessere Lösung verwenden, indem wir :before und :after Pseudoklassen verwenden. :before wird oft verwendet, um zusätzliche Elemente hinzuzufügen.

HTML

Das Folgende ist eine Bildergalerie, dargestellt durch eine ul-Liste.

<ul class="gallery clip">
    <li>
        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
    </li>
    <li>
        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image">
    </li>
    <li>
        <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
    </li></ul>

CSS

Das Folgende ist der CSS-Satz für .gallery. Eine Sache, die hier zu beachten ist, ist, dass wir Position für das a-Tag unter festlegen müssen. Galerie: relativ.

.gallery {
    margin: 0 0 25px;
    text-align: center;
}.gallery li {
    display: inline-block;
    margin: 5px;
    list-style: none;
}.gallery a {
    position: relative;
    display: inline-block;
}

　:before-Element

Wir geben ein 30 x 60 Pixel großes Büroklammer-Hintergrundbild für das :before-Element an. Beachten Sie, dass ich das CSS-Inhaltsattribut auf einen Nullwert gesetzt habe. Ohne ein leeres Inhaltsattribut wird der Container nicht angezeigt.

.clip a:before {
    position: absolute;
    content: ' ';
    top: -5px;
    left: -4px;
    width: 30px;
    height: 60px;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;
}

Kunstrand

Mit dieser Technik können Sie dem Bildeffekt eine beliebige Maske hinzufügen. Im folgenden Beispiel habe ich den Bildhintergrund in einen künstlerischen Rand geändert.

.frame a:before {
    position: absolute;
    content: ' ';
    top: -22px;
    left: -23px;
    width: 216px;
    height: 166px;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;
}

　HTML5Galerie

Wir können HTML5-Tags verwenden, um erweiterte Galerien zu erstellen. Im folgenden Beispiel verwenden wir

, um das Bild zu umschließen, und

, um den Bildtitel zu enthalten.

<ul class="gallery tape">
    <li>
        <figure> 
            <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg" alt="image">
            <figcaption>Image Caption</figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg" alt="image">
            <figcaption>Image Caption</figcaption>
        </figure>
    </li>
    <li>
        <figure> <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg" alt="image">
            <figcaption>Image Caption</figcaption>
        </figure>
    </li></ul>

CSS

Ich habe zwei hinzugefügt: vorher im CSS, eines für das

-Element und das andere für das

-Element . Das Maskenbild overlay.png wird für „figure:before“ verwendet, und das Bandbild wird für „a:before“ verwendet.

.tape li {
    width: 170px;
    padding: 5px;
    margin: 15px 10px;
    border: solid 1px #cac09f;
    background: #fdf8e4;
    text-align: center;
    box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
}.tape figure {
    position: relative;
    margin: 0;
}.tape a:before {
    position: absolute;
    content: ' ';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/overlay.png) no-repeat;
}.tape figcaption {
    font: 100%/120% Handlee, Arial, Helvetica, sans-serif;
    color: #787568;
}.tape a:before {
    position: absolute;
    z-index: 2;
    content: ' ';
    top: -12px;
    left: 50%;
    width: 115px;
    height: 32px;
    margin-left: -57px;
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/tape.png) no-repeat;
}

CSS3-Transformation

In diesem Beispiel habe ich einen Korktexturhintergrund verwendet und die Änderung der Transformationseigenschaft verwendet Bild.

.transform {
    background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/cork-bg.png);
    padding: 25px;
    border-radius: 10px;
    box-shadow: inset 0 1px 5px rgba(0,0,0,.4);
}.transform li {
    border: none;
}

　Nth-of-Type

Um die Bilddrehung zufälliger und natürlicher zu gestalten, verwende ich nth-of-Type, um die Bilder zu filtern und unterschiedliche Drehwinkel für verschiedene festzulegen Bilder.

.transform li:nth-of-type(4n+1) {
    -webkit-transform: rotate(2deg);
}.transform li:nth-of-type(2n) {
    -webkit-transform: rotate(-1deg);
}.transform li:nth-of-type(4n+3) {
    -webkit-transform: rotate(2deg);
}

Okay, das war’s für das heutige Tutorial.

Das obige ist der detaillierte Inhalt vonTeilen von HTML5-Übungscode für die Verwendung von CSS zum Dekorieren von Bildergalerien (2). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!