任务十的源代码,其实有github的,但就是不知道怎么弄,近期会学会的。在IE和firefox上检测运行良好。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>six</title>
  6. <link rel="stylesheet" href="./six.css">
  7. <style>
  8. body{
  9. margin:;
  10. padding:;
  11. }
  12.  
  13. ul {
  14. margin:;
  15. padding:;
  16.  
  17. }
  18.  
  19. li{
  20. list-style: none;
  21. }
  22. .flex-container {
  23. display: flex;
  24. align-items:center;
  25. flex-flow: row wrap;
  26. justify-content: space-between;
  27. padding: 20px;
  28. }
  29. .flex-item {
  30. width: 150px;
  31. height: 120px;
  32. border: solid 1px #f00;
  33. margin: 20px 0px;
  34. }
  35. .flex-item1 {
  36. width: 150px;
  37. height: 100px;
  38. border: solid 1px #f00;
  39. margin: 20px 0px;
  40. }
  41. .flex-item2 {
  42. width: 150px;
  43. height: 40px;
  44. border: solid 1px #f00;
  45. margin: 20px 0px;
  46. }
  47. .flex-item3 {
  48. width: 150px;
  49. height: 200px;
  50. border: solid 1px #0f0;
  51. margin: 20px 0px;
  52. }
  53. @media all and (max-width: 640px) {
  54. .flex-item3{order:;}
  55. .flex-item2{order:;}
  56. .flex-item1{order:;}
  57. .flex-item{order:;}
  58. .flex-container {
  59. display: flex;
  60. align-items:flex-start;
  61. flex-flow: row wrap;
  62. justify-content: space-between;
  63. padding: 20px;
  64. }
  65. }
  66. </style>
  67. </head>
  68. <body>
  69. <ul class="flex-container">
  70. <li class="flex-item"> </li>
  71. <li class="flex-item1">2</li>
  72. <li class="flex-item2">3</li>
  73. <li class="flex-item3">4</li>
  74. </ul>
  75. </body>
  76. </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. FileZilla_Server:425 Can't open data connection 问题解决

    25 Can't open data connection 和 读取目录列表失败 问题解决 这个问题主要是由于使用Passive Mode模式造成的,解决这个问题很简单:1.在ftp服务软件中设置指定 ...

  2. nginx 配置相关解析

    nginx模块处理流程一般是这样的: 客户端发送HTTP请求 –> Nginx基于配置文件中的位置选择一个合适的处理模块 ->(如果有)负载均衡模块选择一台后端服务器 –> 处理模块 ...

  3. springboot+thymeleaf 实现图片文件上传及回显

    1. 创建一个springboot工程, 在此就不多说了(目录结构). 2. 写一个HTML页面 <!DOCTYPE html> <html lang="en" ...

  4. LCD驱动程序之层次分析

    1.回顾字符设备驱动程序: 字符设备驱动编写的一般步骤: 1)主设备号 2)构造file_operations结构体体 .open = xxxx .read = xxxxx 3)register_ch ...

  5. opencart 3伪静态seo url设置教程

    opencart 3已经为我们做好了url伪静态功能,我们只要做一些简单的设置就能实现seo url,首先开启伪静态功能,看看文件.htaccess事发后有存在如下规则,如果没有需要先添加下面的代码 ...

  6. volatile 关键字 和 i++ 原子性

    package com.mozq.multithread; /** * 深入理解Java虚拟机 volatile 关键字 和 i++ 原子性. */ public class VolatileTest ...

  7. arduino驱动步进电机

    https://learn.adafruit.com/adafruit-motor-shield-v2-for-arduino/install-software 1安装库 Adafruit_Motor ...

  8. 从一段文字中提取出uri信息

    package handle.groupby; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io ...

  9. django跨域问题解决

    在django中,访问非同源网站(协议,域名,端口号)时,会出现: 解决方案: 1.安装 django-cors-headers pip install django-cors-headers 2.修 ...

  10. 【可持久化线段树】【P5826】【模板】子序列自动机

    [可持久化线段树][P5826][模板]子序列自动机 Description 给定一个序列 \(A\),有 \(q\) 次询问,每次询问一个序列 \(B\) 是不是 \(A\) 的子序列 Limita ...