<em id="hanht"></em>

    <dd id="hanht"></dd>

    <em id="hanht"><acronym id="hanht"></acronym></em>
    
    <button id="hanht"></button>
    <rp id="hanht"><object id="hanht"><blockquote id="hanht"></blockquote></object></rp><em id="hanht"></em>

    首頁 > 開發 > HTML > 正文

    組合CLASS來完成網頁布局風格

    2018-10-16 21:10:36
    字體:
    來源:轉載
    供稿:網友

    我是這樣來做DIV布局代碼的.不知道說的清楚不清楚,湊和看吧
    我的想法是未來能這樣:用標準件的方式來組裝網頁DIV布局

    我把class分為2種,布局class,風格class,布局class是骨架,風格class是衣服
    舉個例子:
    比如布局中的左欄
    首先它的屬性有:是左欄,寬度,背景顏色,字體顏色等

    1.首先會定義一個class,比如:.layout,主要用來控制頁面整個的大小
    .layout{width:98%;margin:0 auto;text-align:left;}

    2.然后會定義3個基本布局Class(l,m,r)
    .l{float:left}
    .m{width:auto}
    .r{float:right}
    我把2欄布局也歸類于3欄布局,因為3欄布局中,左右欄的寬度分別為0的時候,3欄就變成了2欄.
    我們寫基本布局代碼的時候,最好還是寫成3欄格式.

    3.對應布局Class,定義需要的風格Class,比如寬度,高度,背景顏色等等這些都屬于風格元素
    .class_l{background:#ff0;margin-right: -150px;width:150px;}
    .class_m{background:#f00;margin:0 140px 0 150px;}
    .class_r{background:#00f;margin-left: -140px;width:140px;}

    布局class只有一套,風格class可以定義很多.
    比如,要中欄里面在做一個小的2欄布局
    就可以再定義一個風格class
    .mid_l{background:#ff0;margin-right: -100px;width:100px;}
    .mid_m{background:#f00;margin:0 0 0 100px;}

    4.將布局class和風格class結合起來,在代碼這樣引用
    <div class="l class_l"></div>
    <div class="l mid_l"></div>
    將2個class都引用,中間用空格隔開,前面的是布局class,后面的是風格class,后面還可以繼續空格引用,如果需要再特殊定義,你可以給這個div取一個id來定義.

    其他的一些常用的風格class也可以寫成通用的,比如隱含可以定義為
    .hide{display:none}
    然后需要的時候,class="xxx hide"來引用,很方便.

    代碼:
     
    發表評論 共有條評論
    用戶名: 密碼:
    驗證碼: 匿名發表
    一级特黄大片欧美久久久久_一本一道久久综合狠狠老_JLZZ日本人年轻护士_欧美男男作爱VIDEOS可播放
      <em id="hanht"></em>

      <dd id="hanht"></dd>

      <em id="hanht"><acronym id="hanht"></acronym></em>
      
      <button id="hanht"></button>
      <rp id="hanht"><object id="hanht"><blockquote id="hanht"></blockquote></object></rp><em id="hanht"></em>