首页 > 代码库 > IFE_2016_1_8

IFE_2016_1_8

2024-09-18 05:24:42   223人阅读

    任务链接

　　

技术分享一开始毫无头绪，看了评分最高的团队的代码，觉得很棒。

他们的代码 我的代码

思考了一下有没有优化的方法，发现权衡之下并没有。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>IFE_2016_1_8</title>
  6 </head>
  7 <style>
  8     body{
  9         margin: 0;
 10         width: 100%;
 11     }
 12 
 13     .constr{
 14         box-sizing: border-box;
 15         padding: 10px;
 16         width: 100%;
 17     }
 18 
 19     .fix:before .fix:after{
 20         content: "";
 21         display: table;
 22         clear: both;
 23     }
 24     .outer{
 25         box-sizing: border-box;
 26         padding: 10px;
 27         float: left;
 28     }
 29 
 30     .inner{
 31         height: 50px;
 32         background: #eee;
 33         border: 1px solid #c5c5c5;
 34     }
 35 
 36     @media (min-width: 769px){
 37         .outer-bs-4{
 38             width: 33.3333%;
 39         }
 40 
 41         .outer-bs-3{
 42             width: 25%;
 43         }
 44 
 45         .outer-bs-6{
 46             width: 50%;
 47         }
 48 
 49         .outer-bs-1{
 50             width: 8.3333%;
 51         }
 52 
 53         .outer-bs-2{
 54             width: 16.6666%;
 55         }
 56     }
 57 
 58     @media (max-width: 768px){
 59         .outer-ss-6{
 60             width: 50%;
 61         }
 62 
 63         .outer-ss-12{
 64             width: 100%;
 65         }
 66 
 67         .outer-ss-3{
 68             width: 25%;
 69         }
 70 
 71         .outer-ss-2{
 72             width: 16.6666%;
 73         }
 74 
 75         .outer-ss-8{
 76             width: 66.6666%;
 77         }
 78     }
 79 </style>
 80 <body>
 81 <div class="constr fix">
 82     <div class="outer outer-bs-4 outer-ss-6">
 83         <div class="inner"></div>
 84     </div>
 85     <div class="outer outer-bs-4 outer-ss-6">
 86         <div class="inner"></div>
 87     </div>
 88     <div class="outer outer-bs-4 outer-ss-12">
 89         <div class="inner"></div>
 90     </div>
 91     <div class="outer outer-bs-3 outer-ss-3">
 92         <div class="inner"></div>
 93     </div>
 94     <div class="outer outer-bs-6 outer-ss-6">
 95         <div class="inner"></div>
 96     </div>
 97     <div class="outer outer-bs-3 outer-ss-3">
 98         <div class="inner"></div>
 99     </div>
100     <div class="outer outer-bs-1 outer-ss-2">
101         <div class="inner"></div>
102     </div>
103     <div class="outer outer-bs-1 outer-ss-2">
104         <div class="inner"></div>
105     </div>
106     <div class="outer outer-bs-2 outer-ss-8">
107         <div class="inner"></div>
108     </div>
109     <div class="outer outer-bs-2 outer-ss-3">
110         <div class="inner"></div>
111     </div>
112     <div class="outer outer-bs-6 outer-ss-3">
113         <div class="inner"></div>
114     </div>
115 </div>
116 </body>
117 </html>

他们的代码使用box-sizing: border-box来解决了20px间距的问题，使用伪元素来清除浮动（我打算把父级元素改为overflow：hidden来解决，其实差不多，而且据说overflow有一些坑）

对于类的命名，我选择了张鑫旭对类名的命名规律。（感觉在于大的工程中会比较有用，然而这是一个小任务）

后来想到还有一种方法可以不使用浮动，就是将outer的display设置为inline-block，不过缩进有些辣眼睛，相较之下还是原作者的方法比较好，使用这样的缩进的原因请看css table-cell自动补充元素问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>IFE_2016_1_8</title>
</head>
<style>
    body{
        margin: 0;
        width: 100%;
    }

    .constr{
        box-sizing: border-box;
        padding: 10px;
        width: 100%;
        overflow: hidden;
    }

    .outer{
        box-sizing: border-box;
        padding: 10px;
        display: inline-block;
    }

    .inner{
        height: 50px;
        background: #eee;
    }

    @media (min-width: 769px){
        .outer-bs-4{
            width: 33.3333%;
        }

        .outer-bs-3{
            width: 25%;
        }

        .outer-bs-6{
            width: 50%;
        }

        .outer-bs-1{
            width: 8.3333%;
        }

        .outer-bs-2{
            width: 16.6666%;
        }
    }

    @media (max-width: 768px){
        .outer-ss-6{
            width: 50%;
        }

        .outer-ss-12{
            width: 100%;
        }

        .outer-ss-3{
            width: 25%;
        }

        .outer-ss-2{
            width: 16.6666%;
        }

        .outer-ss-8{
            width: 66.6666%;
        }
    }
</style>
<body>
<div class="constr">
    <div class="outer outer-bs-4 outer-ss-6">
        <div class="inner"></div>
    </div><div class="outer outer-bs-4 outer-ss-6">
        <div class="inner"></div>
    </div><div class="outer outer-bs-4 outer-ss-12">
        <div class="inner"></div>
    </div><div class="outer outer-bs-3 outer-ss-3">
        <div class="inner"></div>
    </div><div class="outer outer-bs-6 outer-ss-6">
        <div class="inner"></div>
    </div><div class="outer outer-bs-3 outer-ss-3">
        <div class="inner"></div>
    </div><div class="outer outer-bs-1 outer-ss-2">
        <div class="inner"></div>
    </div><div class="outer outer-bs-1 outer-ss-2">
        <div class="inner"></div>
    </div><div class="outer outer-bs-2 outer-ss-8">
        <div class="inner"></div>
    </div><div class="outer outer-bs-2 outer-ss-3">
        <div class="inner"></div>
    </div><div class="outer outer-bs-6 outer-ss-3">
        <div class="inner"></div>
    </div>
</div>
</body>
</html>

 

一下是辣眼睛的版本。

IFE_2016_1_8


联系
我们