任务十的源代码，其实有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. 25. Apache Shiro Java反序列化漏洞

    前言: 最近在审核漏洞的时候,发现尽管Apache shiro这个反序列化漏洞爆出来好久了,但是由于漏洞特征不明显,并且shiro这个组件之前很少听说,导致大厂很多服务还存在shiro反序列化的漏洞, ...

  2. linq to js 用法

    /** * 排序汇总 * */ var result = Enumerable.From(vm.productList).GroupBy("$.goods_id", null, f ...

  3. oracle OCCI编程

    1. 创建OCCI环境变量 Environment *env = Environment::createEnvironment(); Environment对象的建立必须放在第一位,而且也必须是最后一 ...

  4. .net web mvc 权限验证

    这里分享MVC的权限验证,内容中可能存在一些,莫名其妙的方法,那些是以前封装好的,大致可以根据方法名称知道他的意思. using Game.Entity; using Game.Entity.Plat ...

  5. log4j配置每天生成一个日志文件

    首先需要配置web.xml里面: <servlet-name>log4j-init</servlet-name> <servlet-class>com.free.c ...

  6. JMeter基础【第三篇】JMeter5.1元件作用域及执行顺序

    执行顺序,大家可以实践验证,加深印象. 最后,给大家说一个万能且保险的方法:放到对应的取样器下面即可.

  7. JanusGraph入门，schema及数据模型

    5.Schema和数据建模 每个JanusGraph都有一个schema,该schema由edge labels,property keys,和vertex组成.JanusGraph schema可以 ...

  8. python基础之七：set 集合

    集合(set)是一个无序的不重复元素序列.只可以存储不可变类型数据,即可哈希的数据类型,如:元组(tuple).字符(str).整型(int).布尔型(bool) 可以使用大括号 { } 或者 set ...

  9. MyBatisSystemException 【exception】

    org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.type.TypeException: ...

  10. 用ant.design的设计注意点---表单

    设计的时候,输入表单项 最好放在一起,不要散落在页面各处,会导致表单项穿插存储数据,穿插验证表单,表单的样式设计要严格按照ant的版来,因为表单是交互最多最容易出错的地方,否则浪费太多工作量 持续集成 ...