主要是不采用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. [翻译]NUnit---TearDown and SetUpFixture and Test Attributes(二十)

    TearDownAttribute (NUnit 2.0 / 2.5) 本特性在TestFixture内部使用,每个测试方法执行后调用的方法集.也可以在SetUpFixture中使用,在同一命名空间或 ...

  2. ASP.NET控制HTTP缓存

    请求   响应 If-Modified-Since Last-Modified If-None-Match ETag 至于Expires和Cache-Control 附上几张高手的图 Etag 在使用 ...

  3. electron-vue 开发环境搭建(Windows环境)

    1.安装 Node.js,一切都基于这个.安装完成后,终端输入 node -v 验证. 2.建立自己的项目目录,然后进入目录. 安装 vue-cli ,终端输入 npm install -g vue- ...

  4. Redux其实很简单（原理篇）

    在这一篇文章中,笔者将带大家编写一个完整的Redux,深度剖析Redux的方方面面,读完本篇文章后,大家对Redux会有一个深刻的认识. 核心API 这套代码是笔者阅读完Redux源码,理解其设计思路 ...

  5. mysql数据库binlog日志的异地备份

    MySQL数据库的二进制日志binlog记录了对数据库的全量DDL和DML操作,对数据库的point to point灾难恢复起着无法替代的关键作用.因此,基于此类考虑,需要对生产环境产生的binlo ...

  6. 《Python黑帽子：黑客与渗透测试编程之道》 Web攻击

    Web的套接字函数库:urllib2 一开始以urllib2.py命名脚本,在Sublime Text中运行会出错,纠错后发现是重名了,改过来就好: #!/usr/bin/python #coding ...

  7. 再看javascript执行上下文、变量对象

    突然看到一篇远在2010年的老文,作者以章节的形式向我们介绍了ECMA-262-3的部分内容,主要涉及到执行上下文.变量对象.作用域.this等语言细节.内容短小而精悍,文风直白而严谨,读完有酣畅淋漓 ...

  8. C#中ExecuteReader、ExecuteNonQuery、ExecuteScalar、SqlDataReader、SqlDataAdapter的区别

    ExecuteNonQuery()执行命令对象的SQL语句,返回一个int 类型的变量,返回数据库操作之后影响的行数.适合用来验证对数据库进行增删改的情况. 2.ExecuteScalar()也可以执 ...

  9. mapreduce程序的按照key值从大到小降序排列

    在近期的Hadoop的学习中,在学习mapreduce时遇到问题:让求所给数据的top10,们我们指导mapreduce中是有默认的排列机制的,是按照key的升序从大到小排列的 然而top10问题的求 ...

  10. h5预订酒店项目|html5酒店模板|h5酒店webapp开发

    近几天尝试着使用html5+css3+swiper+jqUI+layerMobile等技术开发了一款仿携程.去哪儿.艺龙webapp酒店预订系统,页面图标统一使用iconfont,仿原生app右侧弹窗 ...