主要是不采用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. allowMultiQueries=true允许插入多条语句

    在context.xml中,url写成url="jdbc:mysql://localhost:3306/fivecrowdsourcing?allowMultiQueries=true&qu ...

  2. 配置阿里yum源,设置命令

    配置阿里yum源 #linux的软件包管理 安装 软件的方式有三种 .源代码编译安装() .下载python3的源代码 .解压缩源代码 .进入源代码目录,开始编译安装 .配置环境变量 .yum方式安装 ...

  3. String对象的简单方法（特别讲解length（）方法的实现。

    length() 返回字符串中的字符数 charAt(index) 返回字符串中指定位置的字符 concat(s1)    将本字符串和字符串s1连接,返回一个新字符串 toUpperCase() 返 ...

  4. uiautomator2

    uiautomator2    该项目正在火热的开发中 uiautomator2 是一个可以使用Python对Android设备进行UI自动化的库.其底层基于Google uiautomator,Go ...

  5. Design-341. Flatten Nested List Iterator

    Given a nested list of integers, implement an iterator to flatten it. Each element is either an inte ...

  6. [Swift实际操作]七、常见概念-(4)范围CGRect的使用详解

    本文将为你演示区域对象CGRect的使用.你可以将区域对象,看作是点对象和尺寸对象的组合 首先导入需要使用到底界面工具框架 import UIKit 然后初始化一个区域对象,它的原点位于(0,0),宽 ...

  7. HttpClient调用IdentityServer4获取Token并调用接口

    using System; using System.Net.Http; using IdentityModel.Client; namespace ClientCredential { class ...

  8. Android 打开系统设置界面及相应的系统界面

    方法 1 :startActivity(new Intent(Settings.ACTION_WIFI_SETTINGS)); 方法 2:Intent intent = new Intent(&quo ...

  9. margin 和 padding

    一图胜千言!!  参考 CSS padding margin border属性详解

  10. django -orm操作总结

    前言 Django框架功能齐全自带数据库操作功能,本文主要介绍Django的ORM框架 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MyS ...