任务十的源代码，其实有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. APICloud项目纪要

    一.页面之间的传递参数通过pageParam传递参数: api.openWin({ name: 'ware', url: './ware.html', pageParam: { wareId: 'w1 ...

  2. SpringBoot2.0整合fastjson的正确姿势

            SpringBoot2.0如何集成fastjson?在网上查了一堆资料,但是各文章的说法不一,有些还是错的,可能只是简单测试一下就认为ok了,最后有没生效都不知道.恰逢公司项目需要将J ...

  3. mysql的常用查询创建命令

    查看所有数据库Show databases;创建数据库Create database 数据库名删除数据库Drop database 数据库名创建表CREATE TABLE t_bookType(   ...

  4. MySQL 错误代码:2003 idea错误：ERROR DruidDataSource:1846 - create connection error

    idea项目一启动就报错: 20:01:13,047 ERROR DruidDataSource:1846 - create connection error com.mysql.jdbc.excep ...

  5. Python与设计模式之单例模式

    一.什么是单例 即单个实例,指的是同一个类实例化多次的结果指向同一个对象,用于节省内存空间 如果我们从配置文件中读取配置来进行实例化,在配置相同的情况下,就没必要重复产生对象浪费内存了 # setti ...

  6. Linux操作系统安全-加密和安全扫盲篇

    Linux操作系统安全-加密和安全 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.墨菲定律 墨菲定律: 一种心理学效应,是由爱德华·墨菲(Edward A. Murphy)提出 ...

  7. computer networking ---------DNS

    [DNS]domain named system 域名解析系统,即相当于对www.baidu.com的类似的域名进行解析,对于人而言,记忆一些域名相比于记忆一些Ip地址来说简单的多,而对于计算机而言, ...

  8. PAT 乙级 1021.个位数统计 C++/Java

    题目来源 给定一个 k 位整数 1 (0, ,, d​k−1​​>0),请编写程序统计每种不同的个位数字出现的次数.例如:给定 0,则有 2 个 0,3 个 1,和 1 个 3. 输入格式: 每 ...

  9. CentOS6.10部署的Tomcat8.5启动后，浏览器访问不到的解决方法

    解决过程如下: 一.关闭 selinux 和 iptables 防火墙 二.查看 tomcat 是否在运行 ps aux |grep tomcat 三.查看端口情况 lsof -i:8080 查看后都 ...

  10. PHP将图片转base64格式函数

    base64的好处是什么?今天在跟小伙伴讨论这个问题,要是全站用Php把图片转为base64行不行? 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终 ...