任务十的源代码,其实有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源代码的更多相关文章

  1. 百度前端技术学院task1.10

    任务十:Flexbox 布局练习 面向人群: 有一定HTML及CSS基础的同学 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

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

    因为其中有图片,所以就给有图片的位置加了边框和设置了大小,这样哪怕图片不显示也可以知道在哪里. <!DOCTYPE html> <html> <head> < ...

  3. 百度前端技术学院-task1.8源代码以及个人总结

    通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下. 源码地址:http://pan.baidu.com/s/1kVB2VZL 下面出现的代码,都是摘自这个上面的源码 1.终于明白了a ...

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

    主要是不采用bootstrap实现网格. 遇到的困难及注意点如下: 1.[class*='col-'],这个是选择col-开头的类,第一次用,以前也只是看到过: 2.媒体查询,总觉得容易理解错误.@m ...

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

    任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 思考不同情况下(如灰色高度是根据内容动态变化的)水平垂直居中的解决方案. 动手 ...

  6. 百度前端技术学院task1 总结

    1.居中:当使用text-align或者vatical-align无法达到居中的时候,如果知道元素的大小,可以采用先设为left或right为50%,再设置margin-left或者margin-ri ...

  7. 百度前端技术学院(IFE)2016春季学期总结

    今天(5月16日)作为第八个提交者提交了任务五十:RIA微型问卷管理平台 这样一个综合性的大任务,宣告我的IFE春季学期课程学习顺利完成.其实任务五十并不复杂,现在再让我来做,可能一周不到就写出来了, ...

  8. 百度前端技术学院—-小薇学院(HTML+CSS课程任务)

    任务一:零基础HTML编码 课程概述 作业提交截止时间:04-24 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...

  9. 通过Github Pages在线查看百度前端技术学院完成的任务成果

    前言 .note-content {font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHe ...

随机推荐

  1. web-api POST body object always null

      If the any of values of the request's JSON object are not the same type as expected by the service ...

  2. 【转载】Gradle学习 第九章:Groovy快速入门

    转载地址:http://ask.android-studio.org/?/article/17 To build a Groovy project, you use the Groovy plugin ...

  3. ORACLE ORION测试IO性能

    https://www.oracle.com/technetwork/cn/topics/index-088165-zhs.html 下载地址 Orion是Oracle提供的IO性能测试工具,运行该工 ...

  4. 在spring boot中三分钟上手apache顶级分布式链路追踪系统skywalking

    原文:https://juejin.im/post/5cd10e81e51d453b560f2d53 skywalking在apache里全票通过成为了apache顶级链路追踪系统 项目地址:gith ...

  5. 【JavaScript】案例二:使用JS完成首页轮播图效果——事件(onclick&onload)

    1.切换图片例子: 事件(onclick) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  6. 1-剑指offer: 数组中出现次数超过一半的数字

    题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2. ...

  7. vue-router路由嵌套与二级路由重定向

    (1)公共路由裁减 不是每个页面都存在导航,所以不要把导航组件在根组件APP.vue里引入,哪个页面需要,在哪里引入即可. 方案: 哪个页面需要,在哪个页面引入即可 (2)嵌套路由 注意:childr ...

  8. Unity检测面板旋转值超过180度成负数的离奇bug

    问题描述: 无意中在检视面板上对游戏物体的tansform进行旋转,结果发现旋转超过180度成负数的离奇bug 解决方案: 创建个新的unity工程,进行如上操作,一切正常…… 怀疑问题根源是配置出现 ...

  9. 20180610模拟赛T1——脱离地牢

    Description 在一个神秘的国度里,年轻的王子Paris与美丽的公主Helen在一起过着幸福的生活.他们都随身带有一块带磁性的阴阳魔法石,身居地狱的魔王Satan早就想着得到这两块石头了,只要 ...

  10. 修改opencart extension插件代码后无法重新安装的解决办法

    有时我们在为opencart安装一些插件后,发现有些地方需要细微的调整,然后去修改插件代码重新安装,但是却没有成功.开始有点怀疑是不是不能修改代码,但也不至于啊,不然开发者怎么制作插件.应该是哪里出了 ...