百度前端技术学院-task1.10源代码

任务十的源代码，其实有github的，但就是不知道怎么弄，近期会学会的。在IE和firefox上检测运行良好。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>six</title>

    <link rel="stylesheet" href="./six.css">

     <style>

       body{

            margin:;

            padding:;

        }

        ul {

            margin:;

            padding:;

        }

        li{

            list-style: none;

        }

        .flex-container {

            display: flex;

            align-items:center;

            flex-flow: row wrap;

            justify-content:  space-between;

            padding: 20px;

            }

        .flex-item {

            width: 150px;

            height: 120px;

            border: solid 1px  #f00;

            margin: 20px 0px;

            }

        .flex-item1 {

            width: 150px;

            height: 100px;

            border: solid 1px  #f00;

            margin: 20px 0px;

        }

        .flex-item2 {

            width: 150px;

            height: 40px;

            border: solid 1px  #f00;

            margin: 20px 0px;

        }

        .flex-item3 {

            width: 150px;

            height: 200px;

            border: solid 1px  #0f0;

            margin: 20px 0px;

        }

        @media all and (max-width: 640px) {

        .flex-item3{order:;}

        .flex-item2{order:;}

        .flex-item1{order:;}

        .flex-item{order:;}

        .flex-container {

            display: flex;

            align-items:flex-start;

            flex-flow: row wrap;

            justify-content:  space-between;

            padding: 20px;

            }

        }

    </style>

</head>

<body>

    <ul class="flex-container">

        <li class="flex-item"> </li>

        <li class="flex-item1">2</li>

        <li class="flex-item2">3</li>

        <li class="flex-item3">4</li>

    </ul>

</body>

</html>

巴特西

百度前端技术学院-task1.10源代码

最新文章

热门文章