How to use pure CSS to change the skin of the page? CSS implementation of skin changing method

The content of this article is about how to use pure CSS to achieve page skinning? The CSS skin-changing method has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

#1. Attributes of the same type should be written in the same style.
For example: background-size and background must be in the same style. See the code below for details.

2. About the use of pseudo-classes
:after and :before are newly generated elements under a certain element, which can be imagined as sibling elements of this element. The element pseudo-class inherits all attributes and styles of this element, and can also set the style independently. The :after and :before pseudo-classes must contain the content attribute.

3.:target pseudo-class
:The target pseudo-class is an unpopular pseudo-class. It must be used with the anchor point. The effect is that if the anchor point is selected, the anchor point renders:target pseudo-class definition style.

4. Use of shadows
Whether it is text-shadow or box-shadow, you can set multiple shadows. There are useful examples in the code.

5.z-index attribute
Only elements positioned as relative positioning and fixed positioning have the z-index attribute, that is, position: relative/absolute.

HTML code:

    
        
        
        
    

    
        
        
        
        

            背景一
            背景二
            背景三
        
     

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

Let’s try the final effect yourself. Note that my page is made with pictures. Background, the introduction link of the background image is related to your own file structure, remember to change the url.

If you can see the end, let me share a very common knowledge:
When the child elements inside the parent element float, causing the parent element to collapse highly, we usually add: after to the parent element. Pseudo class, set clear float, and attach my universal clearing method.

Universal Clearance Method

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

The above is an introduction to how to use pure CSS to achieve page skinning? A full introduction to CSS skinning methods. If you want to know more about CSS video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to use pure CSS to change the skin of the page? CSS implementation of skin changing method. For more information, please follow other related articles on the PHP Chinese website!