Wie verwende ich reines CSS, um den Skin der Seite zu ändern? CSS-Implementierung der Skin-Change-Methode-CSS-Tutorial-php.cn

Wie verwende ich reines CSS, um den Skin der Seite zu ändern? CSS-Implementierung der Skin-Change-Methode

云罗郡主

Freigeben： 2018-10-11 15:17:46

nach vorne

2968 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Frage, wie man mit reinem CSS ein Seiten-Skinning erreicht. Die CSS-Methode zur Hautveränderung hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Wie verwende ich reines CSS, um den Skin der Seite zu ändern? CSS-Implementierung der Skin-Change-Methode

1. Attribute des gleichen Typs sollten im gleichen Stil geschrieben werden.
Zum Beispiel: „Hintergrundgröße“ und „Hintergrund“ sollten denselben Stil haben. Weitere Informationen finden Sie im Code unten.

2. Über die Verwendung von Pseudoklassen
:after und :before sind neu generierte Elemente unter einem bestimmten Element und können als Geschwisterelemente dieses Elements betrachtet werden. Die Pseudoklasse des Elements erbt alle Attribute und Stile dieses Elements und kann den Stil auch unabhängig festlegen. Die Pseudoklassen :after und :before müssen das Inhaltsattribut enthalten.

3.:target pseudo-class
:target pseudo-class ist eine unpopuläre Pseudoklasse. Sie muss mit einem Ankerpunkt verwendet werden. Der Effekt ist, dass dieser Anker ausgewählt wird Punkt rendert:Ziel-Pseudoklassendefinitionsstil.

4. Verwendung von Schatten
Ob Textschatten oder Boxschatten, Sie können mehrere Schatten festlegen.

5.z-index-Attribut
Nur Elemente, die als relative Positionierung und feste Positionierung positioniert sind, verfügen über das Z-Index-Attribut, d. h. Position: relativ/absolut.

HTML-Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <img  class="bg bg1" id="bg1" src="img/1.jpg"/ alt="Wie verwende ich reines CSS, um den Skin der Seite zu ändern? CSS-Implementierung der Skin-Change-Methode" >
        <img  class="bg bg2" id="bg2" src="img/2.jpg"/ alt="Wie verwende ich reines CSS, um den Skin der Seite zu ändern? CSS-Implementierung der Skin-Change-Methode" >
        <img  class="bg bg3" id="bg3" src="img/3.jpg"/ alt="Wie verwende ich reines CSS, um den Skin der Seite zu ändern? CSS-Implementierung der Skin-Change-Methode" >
        <div class="father">
            <a href="#bg1">背景一</a>
            <a href="#bg2">背景二</a>
            <a href="#bg3">背景三</a>
        </div>
    </body> 
</html>

Nach dem Login kopieren

CSS-Code:

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    overflow: hidden;
}
img{
    position: absolute;
    height: 100%;
    width: 100%;
}
.father{
    position: absolute;
    z-index: 99;
    width: 550px;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
}
a{  
    cursor: pointer;
    position: absolute;
    text-align: center;
    text-decoration: none;
    width: 150px;
    height: 200px;
    float: left;
    margin-right: 50px;
    line-height: 200px;
    border-radius: 20px;
}
a:nth-child(1){
    background: lightblue;
    left: 0px;
}
a:nth-child(2){
    background: lightcoral;
    left: 200px;
}
a:nth-child(3){
    background: #cec;
    left: 400px;
}
a:after{
    content: &#39;&#39;;
    width: 125px;
    height: 125px;
    border: 3px solid white;
    position: absolute;
    top: -60px;
    left: 9px;
    opacity: 0.7;
    border-radius: 50%;
}
/*background-size必须和background在同一个样式元素内设置样式*/
a:nth-child(1):after{
    background: url(../img/1.jpg);
    background-size: 80%;
}
a:nth-child(2):after{
    background: url(../img/2.jpg);
    background-size: 80%;
}
a:nth-child(3):after{
    background: url(../img/3.jpg);
    background-size: 80%;
}
a:hover:after{
    opacity: 0.9;
}
a:hover{
    color: white;
    font-family: "微软雅黑";
    /*多阴影，用的不多，冷门小知识*/
    text-shadow: 0 0 3px blue,
                 0 0 9px darkturquoise,
                 0 0 15px lightcoral;
}
/*:target伪类必须配合锚点使用，效果是锚点被选中时的样式*/
img:target{
    z-index: 30;
}
/*:not伪类*/
img:not(:target){
    z-index: 0;
}

Nach dem Login kopieren

Sie können den endgültigen Effekt selbst ausprobieren. Bitte beachten Sie, dass meine Seite mit Bildern erstellt wurde. Hintergrund: Der Einführungslink des Hintergrundbilds bezieht sich auf Ihre eigene Dateistruktur. Denken Sie daran, die URL zu ändern.

Wenn Sie bis zum Ende lesen können, lassen Sie mich ein sehr allgemeines Wissen teilen:
Wenn die untergeordneten Elemente innerhalb des übergeordneten Elements schweben, was dazu führt, dass das übergeordnete Element in der Höhe zusammenbricht, fügen wir normalerweise Folgendes hinzu: nach bis das übergeordnete Element. Pseudoklasse, setze Clear Float und füge meine universelle Clearing-Methode hinzu.

Universelle Clearance-Methode

父元素:after{
    content: "";/*有时会用content:"."*/
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
}

Nach dem Login kopieren

Oben ist die Erklärung, wie man reines CSS verwendet, um Seiten-Skinning zu erreichen? Eine vollständige Einführung in CSS-Skinning-Methoden. Wenn Sie mehr über CSS-Video-Tutorials erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.

Das obige ist der detaillierte Inhalt vonWie verwende ich reines CSS, um den Skin der Seite zu ändern? CSS-Implementierung der Skin-Change-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!