教你如何自定義門戶DIY格局的比例，如添加3：2比例

pole1010

遊客，如果您要查看本帖隱藏內容請回復

以下以3：2為例，朋友們可根據自己的需要，稍微修改以下數字的比例便可添加任意比便的框架，本方法本人僅在2.0版本下試驗無錯，其它版本未知。

一、打開common.css,找到以下代碼：

1. .frame-3-1-l, .frame-1-3-l

複製代碼

用下面的代碼來替換：

1. .frame-3-1-l, .frame-1-3-l, .frame-3-2-l, .frame-2-3-l

複製代碼

找到：

1. .frame-3-1-r, .frame-1-3-r

複製代碼

用下面的代碼來替換：

1. .frame-3-1-r, .frame-1-3-r, .frame-3-2-r, .frame-2-3-r
   

複製代碼

再找到：

1. .frame-3-1 .mn, .frame-3-1 .col-l, .frame .frame-3-1 .mn, .frame .frame-3-1 .col-l { float: left; width: 74.9%;}
   
2. 
   
3.         .frame-3-1 .sd, .frame-3-1 .col-r, .frame .frame-3-1 .sd, .frame .frame-3-1 .col-r { float: right; width: 24.9%}

複製代碼

在代碼下面插入：

1. .frame-2-3 .mn, .frame-2-3 .col-r, .frame .frame-2-3 .mn, .frame .frame-2-3 .col-r { float: right; width: 59.9%;}
   
2. 
   
3.         .frame-2-3 .sd, .frame-2-3 .col-l, .frame .frame-2-3 .sd, .frame .frame-2-3 .col-l { float: left; width: 39.9%;}
   
4. 
   
5. 
   
6. 
   
7.         .frame-3-2 .mn, .frame-3-2 .col-l, .frame .frame-3-2 .mn, .frame .frame-3-2 .col-l { float: left; width: 59.9%;}
   
8. 
   
9.         .frame-3-2 .sd, .frame-3-2 .col-r, .frame .frame-3-2 .sd, .frame .frame-3-2 .col-r { float: right; width: 39.9%}

複製代碼

二、打開css_diy.css，

找到

1. .frame-1-3, .frame-3-1

複製代碼

用下面代碼替換之

1. .frame-1-3, .frame-3-1, .frame-2-3, .frame-3-2

複製代碼

再找到：

1. .frame-1-3 { background-position: 24.9% 0; }
   
2. 
   
3.         .frame-3-1 { background-position: 74.9% 0; }

複製代碼

在其下面插入：

1. .frame-2-3 { background-position: 39.9% 0; }
   
2. 
   
3.         .frame-3-2 { background-position: 59.9% 0; }

複製代碼

三、打開header_diy.htm文件，

找到：

1. <li><a href="javascript:;" id="frame_3_1" onmousedown="drag.createObj(event,'frame','3-1');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-3-1.png" />3:1</a></li>

複製代碼

在下面插入：

1. <li><a href="javascript:;" id="frame_2_3" onmousedown="drag.createObj(event,'frame','2-3');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-2-3.png" />2:3</a></li>
   
2. 
   
3.                         <li><a href="javascript:;" id="frame_3_2" onmousedown="drag.createObj(event,'frame','3-2');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-3-2.png" />3:2</a></li>

複製代碼

至此代碼部分的修改已完成，只要上傳附件的比便圖片到空間目錄裡/static/image/diy即可

gn01669977

不錯的內容~讚

wantgo

謝謝你的分享內容~太棒了

020429979

不錯的內容~讚

love030223

	wantgo 于 2016-2-27 23:35:26 回复本贴，感谢 wantgo 的回复，回复对楼主是莫大的鼓舞。 谢谢你的分享内容~太棒了

不错.....

射雕英雄女

	本回复帖回复于 2016-1-15 14:35:04 ，认真回复,您的回复对楼主是莫大的鼓舞。 不错的内容~赞

不错.....

泰山石1

	gn01669977 于 2016-1-15 14:35:04 回复本贴，感谢 gn01669977 的回复，回复对楼主是莫大的鼓舞。 不错的内容~赞

不错.....

莱芜戒烟馆

	本回复帖回复于 2016-1-15 14:35:04 ，感谢您的回复,您的回复对楼主是莫大的鼓舞。 不错的内容~赞

不错.....

路人不是看客

	gn01669977 于 2016-1-15 14:35:04 回复本贴，感谢 gn01669977 的回复，回复对楼主是莫大的鼓舞。 不错的内容~赞

不错.....