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

主要是不采用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>
posted @ 2016-03-24 16:12  huansky  阅读(459)  评论(0)  编辑  收藏  举报