主要是不采用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. Ruby on Rails 生成指定版本的 Rails 项目

    ruby-on-rails ruby 本地 Rails 默认5.1.6 版本 $ gem list --local rails (5.1.6, 5.1.5, 5.1.4) 使用 version 生成指 ...

  2. STM32的时钟配置随笔

    以前使用STM32都是使用库函数开发,最近心血来潮想要使用寄存器来试试手感,于是乎便在工作之余研究了一下STM32F4的时钟配置,在此将经历过程写下来作为锻炼,同时也供和我一样的新手参考,如有错误或者 ...

  3. 【cocos2d-x 手游研发小技巧（6）聊天系统+字体高亮】

    转载请注明出处:http://www.cnblogs.com/zisou/p/cocos2dxJQ-6.html 聊天系统在手机网游中是最常见的交互工具,大家在一起边玩游戏边聊天岂不乐哉: 废话不多了 ...

  4. redis所有数据结构及对象------redis设计与实现

    建议点开原图看

  5. 简述在MySQL数据库中MyISAM和InnoDB的区别

    区别主要有以下几点: (1)构成上,MyISAM的表在磁盘中有三个文件组成,分别是表定义文件(.frm).数据文件(.MYD).索引文件(.MYI),而InnoDB的表由表定义文件(.frm).表空间 ...

  6. Slope one—个性化推荐中最简洁的协同过滤算法

    Slope One 是一系列应用于 协同过滤的算法的统称.由 Daniel Lemire和Anna Maclachlan于2005年发表的论文中提出. [1]有争议的是,该算法堪称基于项目评价的non ...

  7. Flask从入门到精通之Flask表单渲染成HTML

    表单字段是可调用的,在模板中调用后会渲染成HTML.假设视图函数把一个NameForm 实例通过参数form 传入模板,在模板中可以生成一个简单的表单,如下所示: <form method=&q ...

  8. Kafka参数配置详解

    配置参数 参数说明 broker.id =1  每一个broker在集群中的唯一标示,要求是正数.当该服务器的IP地址发生改变时,如果broker.id没有变化,则不会影响consumers的消息情况 ...

  9. [Auto Testing] 工具准备：Selenium 与 ChromeDriver

    <留存> Selenium http://selenium-release.storage.googleapis.com/index.html https://www.seleniumhq ...

  10. linux centos7 防火墙及端口开放相关命令

    一.防火墙相关命令 1.查看防火墙状态 : systemctl status firewalld.service 注:active是绿的running表示防火墙开启 2.关闭防火墙 :systemct ...