主要是不采用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. 8086汇编语言(1)虚拟机安装ms-dos 7.1

    8086汇编语言(1)虚拟机安装ms-dos 7.1 文/玄魂 前言 在开始这一系列文章之前,我想先说下,对于古董级的8086汇编到底还以有没有学习的必要.这里我说下我要从8086开始学习,而不是从w ...

  2. 利用backtrace和backtrace_symbols函数打印调用栈信息

    在头文件"execinfo.h"中声明了三个函数用于获取当前线程的函数调用堆栈. #include <execinfo.h>  int backtrace(void * ...

  3. js实现回车登陆

    2018-11-15 $(document).keydown(function (event) { if (event.keyCode == 13) { $("#LoginBtn" ...

  4. NPOI datatable导出类

    using NPOI.HSSF.UserModel; using NPOI.SS.UserModel; using System; using System.Collections.Generic; ...

  5. vs2017 修改项目名称

    由于经常接到各种项目需求, 又不想重新搭建框架. 于是便想到直接修改项目名. 话不多说, 上图~ 1 重命名 解决方案 和  项目名称 2 重命名项目的应用程序名和命名空间 3 Ctrl+F 将旧的工 ...

  6. NET项目发布到IIS上报错：HTTP 错误 403.14

    NET项目发布到IIS上报错:HTTP 错误 404.0 - Not Found 原因:由于本机开发环境是Net4.5,所以虽然创建项目时选择的是net framework4.5的,但是webconf ...

  7. easyui-layout系列之布局（1）

    1.Layout布局 通过 $.fn.layout.defaults 重写默认的 defaults. 布局(layout)是有五个区域(北区 north.南区 south.东区 east.西区 wes ...

  8. iOS App的加固保护原理

    本文由  网易云发布. 本文从攻防原理层面解析了iOS APP的安全策略.iOS以高安全性著称,但它并非金刚不坏之身.对于信息安全而言,止大风于青萍之末是上上策,杭研深入各个细节的研发工作,正是网易产 ...

  9. OI动态规划&&优化 简单学习笔记

    持续更新!! DP的难点主要分为两类,一类以状态设计为难点,一类以转移的优化为难点. DP的类型 序列DP [例题]BZOJ2298 problem a 数位DP 常用来统计或者查找一个区间满足条件的 ...

  10. 730. Count Different Palindromic Subsequences

    Given a string S, find the number of different non-empty palindromic subsequences in S, and return t ...