css加寬語法－orzkuso的部落格

2007/09/27 23:06

奇摩部落格的自訂欄位終於可以不用受限制了，

很多喜歡的小玩意因為受欄寬的限制現在都可以隨心所欲的放出來囉～

如我之前發的文章：鏡空間～超準計日器．鏡空間～超準計日器．鏡空間～音樂時計公告板

鏡&木製～超實用公告板．baby製～實用性強的公告板．．．

有些因為欄寬限制的關係字顯示出來會變得很小，現在有了這些語法想怎麼用就怎麼用，

希望大家都可以好好運用這些語法更豐富您的部落格呦～

感謝[ ～～精靈世界～～ ]大方的語法分享～

備註：順便轉貼小精靈於2007/09/27 14:00給格友的回覆

寬度可調大調小，例如要寬200

對應語法內的數字是200及210
210是中央文章區與左(右)距離再加10像素(距離單位)

當然，寬180甚至寬300都行

【手動＊定義佈局寬度】三欄式

三欄式～欄寬150 語法：(原語法)

/*三欄式*/
.thrcol .yc3main {width:100%;float:left; margin-left:-160px;}
.thrcol .yc3mainbd {margin-left:160px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-160px;}
.thrcol .yc3pribd {margin-right:160px;}
.thrcol .yc3subbd {width:150px;float:right;}
.thrcol .yc3sec {width:150px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}

三欄式～欄寬200 語法：

/*三欄式*/
.thrcol .yc3main {width:100%;float:left; margin-left:-210px;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-210px;}
.thrcol .yc3pribd {margin-right:210px;}
.thrcol .yc3subbd {width:200px;float:right;}
.thrcol .yc3sec {width:200px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}

三欄式～左欄寬150‧右欄寬200 語法：

/*三欄式*/
.thrcol .yc3main {width:100%;float:left; margin-left:-210px;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-160px;}
.thrcol .yc3pribd {margin-right:160px;}
.thrcol .yc3subbd {width:200px;float:right;}
.thrcol .yc3sec {width:150px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}

三欄式～左欄寬200‧右欄寬150 語法：

/*三欄式*/
.thrcol .yc3main {width:100%;float:left; margin-left:-160px;}
.thrcol .yc3mainbd {margin-left:160px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-210px;}
.thrcol .yc3pribd {margin-right:210px;}
.thrcol .yc3subbd {width:150px;float:right;}
.thrcol .yc3sec {width:200px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}

【手動＊定義佈局寬度】二欄式

兩欄位～窄欄寬150 語法：(原語法)

/*兩欄式 - 窄欄靠右*/
.twocolga .yc3main {width:100%;float:left; margin-left:-160px;}
.twocolga .yc3mainbd {margin-left:160px;}
.twocolga .yc3pri {width:100%;}
.twocolga .yc3subbd {width:150px;float:right;}
.twocolga .yc3sec {display:none;} /*in case there's content*/

/*兩欄式 - 窄欄靠左*/
.twocoldr .yc3main {width:100%;float:right; margin-right:-160px;}
.twocoldr .yc3mainbd {margin-right:160px;}
.twocoldr .yc3pri {width:100%;}
.twocoldr .yc3subbd {width:150px;}
.twocoldr .yc3sec {display:none;} /*in case there's content*/

兩欄位～窄欄寬200 語法：

/*兩欄式 - 窄欄靠右*/
.twocolga .yc3main {width:100%;float:left; margin-left:-210px;}
.twocolga .yc3mainbd {margin-left:210px;}
.twocolga .yc3pri {width:100%;}
.twocolga .yc3subbd {width:200px;float:right;}
.twocolga .yc3sec {display:none;} /*in case there's content*/

/*兩欄式 - 窄欄靠左*/
.twocoldr .yc3main {width:100%;float:right; margin-right:-210px;}
.twocoldr .yc3mainbd {margin-right:210px;}
.twocoldr .yc3pri {width:100%;}
.twocoldr .yc3subbd {width:200px;}
.twocoldr .yc3sec {display:none;} /*in case there's content*/