百度前端技术学院-task1.10源代码
Posted huansky
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度前端技术学院-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: 0; padding: 0; } ul { margin: 0; padding: 0; } 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:0;} .flex-item2{order:3;} .flex-item1{order:2;} .flex-item{order:1;} .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源代码的主要内容，如果未能解决你的问题，请参考以下文章