主要是不采用bootstrap实现网格。

遇到的困难及注意点如下：

1、[class*='col-']，这个是选择col-开头的类，第一次用，以前也只是看到过；

2、媒体查询，总觉得容易理解错误。@media (min-width: 769px){}代表的是屏幕至少大于等于769px;@media (max-width: 769px){}代表的是屏幕至少小于等于769px;

3、before,after的用法，还有待进一步去理解。

4、calc（）的运用，注意不要符号之间要留有空格。

5、outline的运用；

6、本想用一个类实现的，但是实际是根据内容的重要性，放大程度不一样。所以得添加多个类，并重新定义。

<!DOCTYPE html>

<html>

<head>

    <title>响应式布局</title>

    <meta charset="utf-8">

    <style>

        html,body{margin: 0px;padding: 0px;}

        .grid-container{

            width: 100%;

        }

        .row:before,

        .row:after {

            content:"";

            display: table ;

            clear:both;

        }

        .row{

            padding-left: 20px;

        }

        [class*='col-'] {

            float: left;

            height: 50px;

            width: 16.66%;

            background-color: #eee;

            outline: 1px solid #999;

            margin: 20px 20px 0  0px;

        }

@media (min-width: 769px){

        .col-md-1{ width: calc(8.33% - 20px);

        }

        .col-md-2{ width: calc(16.66% - 20px);

        }

        .col-md-3{ width: calc(25% - 20px);

        }

        .col-md-4{ width: calc(33.33% - 20px);

        }

        .col-md-6{ width: calc(50% - 20px);

        }

        .col-md-8{ width: calc(66.66% - 20px);

        }

        .col-md-12{ width: calc(100% - 20px);

        }

}

 @media (max-width: 768px){

         .col-sm-2{

            width:calc(16.66% - 20px);

         }

         .col-sm-3{

            width:calc(25% - 20px);

         }

         .col-sm-6{

            width:calc(50% - 20px);

         }

         .col-sm-8{

            width:calc(66.66% - 20px);

         }

         .col-sm-12{

            width:calc(100% - 20px);

         }

}

    </style>

</head>

<body>

   <div class="grid-container">

        <div class="row">

            <div class="col-md-4 col-sm-6"></div>

            <div class="col-md-4 col-sm-6"></div>

            <div class="col-md-4 col-sm-12"></div>

        </div>

        <div class="row">

            <div class="col-md-3 col-sm-3"></div>

            <div class="col-md-6 col-sm-6"></div>

            <div class="col-md-3 col-sm-3"></div>

        </div>

        <div class="row">

            <div class="col-md-1 col-sm-2"></div>

            <div class="col-md-1 col-sm-2"></div>

            <div class="col-md-2 col-sm-8"></div>

            <div class="col-md-2 col-sm-3"></div>

            <div class="col-md-6 col-sm-3"></div>

        </div>

    </div>

</body>

</html>

百度前端技术学院-task1.8源代码的更多相关文章

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

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

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

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

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

    任务十的源代码,其实有github的,但就是不知道怎么弄,近期会学会的.在IE和firefox上检测运行良好. <!DOCTYPE html> <html lang="en ...

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

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

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

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

  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. javascript 对象克隆

    浅克隆 先看代码: /** * 浅克隆 克隆传入对象,只克隆一层 * @param {any} source */ function shallowClone(source) { var tiaget ...

  2. MVVM Light 新手入门（3） ：ViewModel / Model 中定义“事件” ，并在View中调用 (无参数调用)

    今天学习MVVM架构中“事件”的添加并调用,特记录如下,学习资料均来自于网络,特别感谢翁智华 的 利刃 MVVMLight 6:命令基础 在MVVM Light框架中,事件是WPF应用程序中UI与后台 ...

  3. kubernetes1.9管中窥豹-CRD概念、使用场景及实例

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 前言 默认读者有kubernetes基础概念的背景知识,因此基础概念例如有状态.pod.Replica Sets.Deployments.state ...

  4. FFMpeg音频重采样和视频格式转

    一．视频像素和尺寸转换函数 1．sws_getContext : 像素格式上下文  --------------->多副图像(多路视频)进行转换同时显示 2．struct SwsContext  ...

  5. brew - 安装gradle

    我安装完brew之后,马上开始安装gradle,但是shell总是卡在执行"brew update"这里,今天终于解决了,出现这样问题的原因是初次安装brew,它使用的源是国外的, ...

  6. 《Python黑帽子：黑客与渗透测试编程之道》 Scapy：网络的掌控者

    窃取email认证: 测试代码: #!/usr/bin/python #coding=utf-8 from scapy.all import * #数据包回调函数 def packet_callbac ...

  7. 服务器 apache配置https,http强制跳转https(搭建http与https共存)

    公司linux服务器上的nginx的已经改成https了,现在还剩下一个windows云服务器没配置. 环境 windows wampserver2.5 64位 1.腾讯云申请的ssl 包含三个文件: ...

  8. sublime-text-how-to-jump-to-file-from-find-results-using-keyboard

    http://209.116.186.231/#newwindow=1&q=sublime+text+find+results+jump http://stackoverflow.com/qu ...

  9. mysql中date，datetime，timestamp数据类型区别

    (1)date表示日期,其范围为1000-01-01到9999-12-31 (2)datetime表示日期时间,其范围是1000-01-01 00:00:00到9999-12-31 23:59:59 ...

  10. FunDA（12）－ 示范：强类型数据源 - strong typed data sources

    FunDA设计的主要目的是解决FRM(Functional Relation Mapping)如Slick这样的批次型操作工具库数据源行间游动操作的缺失问题.FRM产生的结果集就是一种静态集合,缺乏动 ...