1-2, test81-2

1-2, test81-2

Today we will talk about restoring the test8 page.

Header and footer

At the beginning, I wanted to directly use the bootstrap raster system. However, it is a lot of trouble to locate the content.

Then, we simply use native html + css to restore the page.

Put

Header html code

<Div class = "g-header w-100"> <div class = "h-row-1"> <div class = "W-80"> <a href = ""> Customer Service Hotline: 010 594 78634 </a> <span class = "float-right"> <a href = "">  </a> <a href = "">  </a> <a href = "">  </a> </span> </div> <div class =" h-row-2 "> <div class =" W-80 "> <a href = ""> homepage </a> <a href = ""> occupation </a> <a href = ""> recommended </a> <a href = ""> about </ a> </div>

Tail html code

<Div class = "g-footer"> <div class = "f-row-1"> <div class = "W-80"> <div class = "f-cess-1"> 
The module of the link is relatively simple to restore (pay attention to the mouse gesture, and I haven't gotten the hover effect yet)
    <div class="c-cell-5">        <div class="w-80">            <a href="" class=" ta-center">.c-cell-5 li{    margin:1rem 2rem 1rem 0;    /*border:0.1rem solid #ff0000;*/}.c-cell-5 li a{    color:#989898;}
Other content blocks are implemented using native html + css.
<Div class = "c-cell-1"> <div class = "W-80"> <div class = "avator"> <div class = "morohology-3">  
.c-cell-1{}.c-cell-1 img{    max-width: 2.5rem;    max-height: 2.5rem;}.color20B{    color:#20B176;}.c-title-3{    border-left:0.1rem dashed #989898;}.c-title-4{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);}
<Div class = "c-cell-2"> <div class = "W-80"> <a href = "" class = "ta-center c-title"> 
.c-cell-2{    min-height: 25rem;}.list-1{    display:inline-block;    padding:2rem;    background:url("../img/test8-1/roundness.png") no-repeat 50% 50%;    background-size: contain;    font-size:2rem;    color:#20B176;}.list-2{    display:inline-block;    padding:0.5rem;    background:url("../img/test8-1/triangle3.png") no-repeat 50% 50%;    background-size: contain;}.inline-block{    display: inline-block;}.morohology-4{    position:relative;    /*flex: 0 0 24%;*/    float:left;    width:23%;    margin:1.5rem 1rem 1.5rem 0;    display:flex;    justify-content: center;    align-items: center;    /*padding:2rem 5rem 2rem 5rem;*/    /*border:0.1rem solid #ff0000;*/}.float-left{    float:left;}.avator-1{    overflow: hidden;}
<Div class = "c-cell-3"> <div class = "W-80"> <a href = "" class = "ta-center c-title"> 
.c-cell-3{    min-height: 25rem;}.avator{    display: flex;    justify-content: space-around;    overflow: hidden;}.morohology-3{    position: relative;    /*width:20%;*/    flex: 0 0 20%;    padding:1rem;    display:flex;    flex-direction: column;    align-items: center;}.min-height{    min-height: 25rem;}.bgcolorfff{    background: #fff;}.morohology-3>p{    color:#989898;}.c-title-2{    font-size:5rem;}
<Div class = "c-cell-4"> <div class = "W-80"> <a href = "" class = "ta-center c-title"> 
.c-cell-4 img{    max-width: 15rem;    margin:2rem 0;    padding:2rem;    background:#fff;}
.c-cell-5 li{    margin:1rem 2rem 1rem 0;    /*border:0.1rem solid #ff0000;*/}.c-cell-5 li a{    color:#989898;}.c-cell-5{    background:#fff;}.c-title{    color:black;    cursor:pointer;}

Here we mainly analyze: in the html + css layout,
Highly Efficient module contains flex column nested postion Positioning
How to Learn module flex Layout

The code of this module for excellent students has been reused in the c-cell-1.
Try to join the bootstrap raster system tomorrow for comparison