Maison >interface Web >tutoriel CSS >Comment utiliser du CSS pur pour obtenir un skinning de page ? Implémentation CSS de la méthode de changement de peau

Comment utiliser du CSS pur pour obtenir un skinning de page ? Implémentation CSS de la méthode de changement de peau

云罗郡主avant: 2018-10-11 15:13:142961parcourir

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir un skinning de page ? La méthode de changement de skin CSS a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

1. Les attributs du même type doivent être écrits dans le même style.
Par exemple : background-size et background doivent être dans le même style, voir le code ci-dessous pour plus de détails.

2. À propos de l'utilisation des pseudo-classes
:after et :before sont des éléments nouvellement générés sous un certain élément et peuvent être imaginés comme des éléments frères de cet élément. La pseudo-classe d'élément hérite de tous les attributs et styles de cet élément et peut également définir le style indépendamment. Les pseudo-classes :after et :before doivent contenir l'attribut content.

3.:pseudo-classe cible
:la pseudo-classe cible est une pseudo-classe impopulaire Elle doit être utilisée avec un point d'ancrage. L'effet est que si le point d'ancrage est sélectionné, cette ancre. rendus de points : style de définition de pseudo-classe cible.

4. Utilisation des ombres
Qu'il s'agisse d'ombre de texte ou d'ombre de boîte, vous pouvez définir plusieurs ombres. Il existe des exemples dans le code.

Attribut 5.z-index
Seuls les éléments positionnés en positionnement relatif et en positionnement fixe ont l'attribut z-index, c'est-à-dire position : relatif/absolu.

Code HTML :

<!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="Comment utiliser du CSS pur pour obtenir un skinning de page ? Implémentation CSS de la méthode de changement de peau" >
        <img  class="bg bg2" id="bg2" src="img/2.jpg"/ alt="Comment utiliser du CSS pur pour obtenir un skinning de page ? Implémentation CSS de la méthode de changement de peau" >
        <img  class="bg bg3" id="bg3" src="img/3.jpg"/ alt="Comment utiliser du CSS pur pour obtenir un skinning de page ? Implémentation CSS de la méthode de changement de peau" >
        <div class="father">
            <a href="#bg1">背景一</a>
            <a href="#bg2">背景二</a>
            <a href="#bg3">背景三</a>
        </div>
    </body> 
</html>

Code CSS :

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

Veuillez essayer par vous-mêmes pour l'effet final, faites attention vers ma page Utiliser une image comme arrière-plan Le lien entrant de l'image d'arrière-plan est lié à votre propre structure de fichier. N'oubliez pas de modifier l'URL.

Si vous pouvez lire jusqu'au bout, permettez-moi de partager une connaissance très commune :
Lorsque les éléments enfants à l'intérieur de l'élément parent flottent, provoquant l'effondrement de l'élément parent en hauteur, nous ajoutons généralement : après à l'élément parent Pseudo-classe, définissez clear float et attachez ma méthode de compensation universelle.

Méthode d'autorisation universelle

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

Ce qui précède est l'explication de la façon d'utiliser du CSS pur pour obtenir un skinning de page ? Une introduction complète aux méthodes de changement d'apparence CSS. Si vous souhaitez en savoir plus sur les Tutoriels vidéo CSS, veuillez faire attention au 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!

php css html 继承 position 伪类 background

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment personnaliser le style des cases à cocher avec CSS ? (exemple de code)Article suivant：Comment personnaliser le style des cases à cocher avec CSS ? (exemple de code)

Articles Liés

Voir plus