- 2008-03-08 (土) 22:14
- 6BOX
- 2Columun 6BOX
- #header>#menu>#content(wrapper)>#extra>#other>#footer
- ＸＭＬ宣言あり
- 文字コード：UTF-8
- ダウンロード：2Column 6box Elastic LeftExtra
HTML:
CSS:
-
*{margin:0;padding:0;}
-
body {text-align:center;}
-
#container{width:auto;margin:0;text-align:left;}
-
#header{height:60px;}
-
#extra {height:200px;width:180px;float:left;}
-
#other {height:200px; width:180px;float:left;}
-
#menu{height:50px;}
-
#wrapper{float:right;width:100%;margin-left:-180px}
-
#content{height:400px;margin-left:180px}
-
#footer {clear:both;}
-
-
* html #container{width:100%;}
-
-
body{background-color:#B2B4BF;}
-
#container{border: 3px solid #181533}
-
#header{background-color:#212C87;}
-
#menu{background-color:#652B7D;}
-
#content{background-color:#FFFFFF;}
-
#extra{background-color:#02787b;color:#66CC99;}
-
#other{background-color:#008ee3;color:#66CCFF}
-
#footer {background-color:#CC6699;}
グローバルナビゲーション＋メニュー＋サブメニューみたいに
やたらメニューが多い場合に向いてるレイアウト。
アドセンスとかアフィとかも並べやすいと思います。
関連記事
- Newer: 3Column 5box Elastic
- Older: 2Column 4box Fixed L-hlv
