DiscuzX 1:1:1 ，1:2:1，N:N:N框架修改

秋子淡无痕

1，上传图片到static\image\diy\目录下，并改名为：layout-1-2-1.png
图片下载：

修改default\common\
2，找到 header_diy.htm 文件 搜索

1. <ul id="contentframe" class="content hide">
   
2. <li><a href="javascript:;" id="frame_1" data="$widthstr"><img src="{STATICURL}image/diy/layout-1.png" />100%框架</a></li>
   
3. <li><a href="javascript:;" id="frame_1_1"><img src="{STATICURL}image/diy/layout-1-1.png" />1:1</a></li>
   
4. <li><a href="javascript:;" id="frame_1_2"><img src="{STATICURL}image/diy/layout-1-2.png" />1:2</a></li>

复制代码

下面增加

1. <li><a href="javascript:;" id="frame_1_2_1"><img src="{STATICURL}image/diy/layout-1-2-1.png" />1:2:1</a></li>

复制代码

2、找到 common.css 文件，找到

1.   1. /* 新的框架结构 */
   
2.    2. .frame-1-1-l, .frame-1-1-1-l, .frame-1-1-1-c, .frame-2-1-l, .frame-1-2-l, .frame-3-1-l, .frame-1-3-l { float: left; }
   
3.    3. .frame-1-1-r, .frame-1-1-1-r, .frame-2-1-r, .frame-1-2-r, .frame-3-1-r, .frame-1-3-r { float: right; }
   
4.    4. .frame-1-1-l, .frame-1-1-r { width: 49.9% }
   
5.    5. .frame-1-1-1-l, .frame-1-1-1-c, .frame-1-1-1-r, .frame-2-1-r, .frame-1-2-l { width: 33.3%; }
   
6.    6. .frame-2-1-l, .frame-1-2-r { width: 66.6%; }
   
7.    7. .frame-3-1-l, .frame-1-3-r { width: 74.9%; }
   
8.    8. .frame-3-1-r, .frame-1-3-l { width: 24.9%; }
   
9.    9. /* End */

复制代码

替换成下面的代码

1.   1. /* 新的框架结构 */
   
2.    2. .frame-1-1-l, .frame-1-1-1-l, .frame-1-1-1-c, .frame-1-2-1-l, .frame-1-2-1-c, .frame-2-1-l, .frame-1-2-l, .frame-3-1-l, .frame-1-3-l { float: left; }
   
3.    3. .frame-1-1-r, .frame-1-1-1-r, .frame-1-2-1-r, .frame-2-1-r, .frame-1-2-r, .frame-3-1-r, .frame-1-3-r { float: right; }
   
4.    4. .frame-1-1-l, .frame-1-1-r { width: 49.9% }
   
5.    5. .frame-1-1-1-l, .frame-1-1-1-c, .frame-1-1-1-r, .frame-2-1-r, .frame-1-2-l { width: 33.3%; }
   
6.    6. .frame-1-2-1-l { float: left; width: 29.9%; }
   
7.    7. .frame-1-2-1-c{ float: left; width: 49.9%; }
   
8.    8. .frame-1-2-1-r { float: right; width: 20.2%; }
   
9.    9. .frame-2-1-l, .frame-1-2-r { width: 66.6%; }
   
10.   10. .frame-3-1-l, .frame-1-3-r { width: 74.9%; }
    
11.   11. .frame-3-1-r, .frame-1-3-l { width: 24.9%; }
    
12.   12. /* End */

复制代码

然后记得  台后-工具- 更新缓存。。前台就可以了。

如果想任意宽度3列框架，那么只需要修改，就可以任意布局了 如果是默认模板需要算好总的宽度哦不能大于99%，官方默认的站是970px的宽度，如果用固定宽度也要略小于这个.

1. 
   
2. .frame-1-2-1-l { float: left; width: 左边宽度; }
   
3. .frame-1-2-1-c{ float: left; width: 中间宽度; }
   
4. .frame-1-2-1-r { float: right; width: 右边宽度; }

复制代码