百度前端技术学院-task1.10源代码
2016-03-22 11:44
465 查看
任务十的源代码,其实有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>
相关文章推荐
- MySQL复制之GTID跳过与FEDERATED存储引擎
- caffe caffe.cpp 程序入口分析
- JQuery 加载 CSS、JS 文件
- css绝对定位和相对定位的区别
- vs2013中HtmlHelper验证的问题
- 走进AngularJs 过滤器(filter)
- 实例讲解利用HTML5 Canvas API操作图形旋转的方法
- 介绍 JSON
- Js中String对象方法replace()用法详解
- js select option 选中触发事件
- JS日期比较大小 给定时间和持续时间计算最终时间
- js正则表达式中的问号几种用法小结
- react-router
- jquery与json的结合
- caffe 学习 c++编程
- 程序员都会的 35 个 jQuery 小技巧
- jQuery toggle 代替方法
- web前端安全机制问题全解析
- 前端开发中遇到的问题2
- 详解通过HTML5 Canvas实现图片的平移及旋转变化的方法