02-CSS basic and advanced -day13_2018-09-21-20-42-22

css3 animation
@keyframes animation name {
0%
{

}
100%
{

}
}

Element performs animation
animation: Animation name exercise time motion curves
seamless scrolling
see Case

Telescopic layout
traditional trisection

03 traditional three equal parts .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       section {
             width: 80%; 
             height: 200px;
             margin: 100px auto;
             border: 1px solid #ccc;
       }

       section div{
          width: 33.33%; 
          height: 100%;
          float: left;
       }

       div:nth-child(1) {
             background-color: pink;
       }

       div:nth-child(2) {
             background-color: red;
       }

       div:nth-child(3) {
             background-color: blue;
       }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

04 telescopic layout to achieve equal parts .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       section {
             width: 80%; 
             height: 200px;
             margin: 100px auto;
             border: 1px solid #ccc;
             /*Add the parent box Flex * / 
             the display : Flex ;  / * telescopic arrangement pattern in the box having resilient * / 
       }

       div sectionTop { 
          height : 100% ; 
          Flex : . 1 ;  / * child element parts * / 
       }

       div:nth-child(1) {
             background-color: pink;
             flex: 2;
             order: 10;
       }

       div:nth-child(2) {
             background-color: red;
             order: -2;
       }

       div:nth-child(3) {
             background-color: blue;
          order: -1;
       }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>
</html>

05 telescopically fixed width layout .html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       section {
             width: 80%; 
             height: 200px;
             margin: 100px auto;
             border: 1px solid #ccc;
             /*Add the parent box Flex * / 
             the display : Flex ;  / * telescopic arrangement pattern in the box having resilient * / 
             min-width : 500px ; 
       }

       section div{
          height: 100%;
       }

       div:nth-child(1) {
             background-color: pink;
             width: 200px;
       }

       div:nth-child(2) {
             background-color: red;
             width: 100px;
       }

       div:nth-child(3) {
             background-color: blue;
             flex: 1;
       }

       div:nth-child(4) {
             background-color: green;
             flex: 1;
       }
    </style>
</head>
<body>
    <section>
        <div>111</div>
        <div>222</div>
        <div>3333</div>
        <div>4444</div>
    </section>
</body>
</html>

02-CSS basic and advanced -day13_2018-09-21-20-42-22

Guess you like