网格布局的两种实现

网格布局常见的两种布局形式:

1.利用组合类方式:这方式将布局细化,利于扩展,但是代码结构性较差;

2.子选择器方式:这方式结构性,可读性优秀,但是xx-xx-xx的命名方式有局限行,但不失为一种不错的布局方式

css:

  .fl{float:left}
        .fr{float:right}
        .content{clear:both}
        .header{}
        .footer{clear:both}
        .siderbar{}
        .main{}
        .w25{width:25%}
        .w70{width:70%}
        .w35{width:35%}
        .w60{width:60%}
        .w80{width:80%}
        .w15{width:15%}
        
        .content-lr-7025 .main{float:left;width:70%}
        .content-lr-7025 .sidebar{float:right;width:25%}
        .content-rl-7025 .main{float:right; width:70%}
        .content-rl-7025 .siderbar{float:left;width:25%}
        .content-lr-6035 .main{float:left;width:60%}
        .content-lr-6035 .siderbar{float:right;width:35%}
        .content-rl-6035 .main{float:left;width:35%}
        .content-rl-6035 .siderbar{float:right;width:60%}

界面

 1 <!-- 網格佈局 組合類方式 -->
 2         <div class="header"></div>
 3         <div class="content">
 4             <div class=" main fl w70"></div>
 5             <div class="siderbar fr w25"></div>
 6         </div>
 7         <div class="content">
 8             <div class=" main fr w60"></div>
 9             <div class="siderbar fl w35"></div>
10         </div>
11         <div class="footer"></div>
12         
13         <!-- 網格佈局 子選擇器方式 -->
14         <div class="header"></div>
15         <div class="content-lr-7025">
16             <div class="main"></div>
17             <div class="siderbar"></div>
18         </div>
19         <div class="content-rl-6035">
20             <div class="main"></div>
21             <div  class="siderbar"></div>
22         </div>
23         <div class="footer"></div>

View Code