DZX 1:1:1 ，1:2:1，N:N:N框架修改（任意宽度3列框架修改）适合6月1日后正式版本

原来一位朋友发的教材（https://discuz.dismall.com/viewthread.php?tid=1681095）但是不适合6月1日后的框架了，前面2步是一样的，主要是后面CSS的修改

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



图片下载：https://discuz.dismall.com/data/attachment/album/201005/26/101902tjjf3thtkk7ujy7e.png

修改default\common\

2，找到 header_diy.htm 文件 搜索

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

复制代码
下面增加

• <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. /* 新的框架结构 */
   
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. .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. .frame-1-1-l, .frame-1-1-r { width: 49.9% }
   
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. .frame-2-1-l, .frame-1-2-r { width: 66.6%; }
   
7. .frame-3-1-l, .frame-1-3-r { width: 74.9%; }
   
8. .frame-3-1-r, .frame-1-3-l { width: 24.9%; }
   
9. /* End */

复制代码

替换成下面的代码

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

复制代码

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

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

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

复制代码

呵呵，简单吧 。秀下我的X站 www.0566sh.com

这贴会火

  留待观察

dz搜索一下

不错 很好的~~~~~~~~~~~~~

header_diy.htm 增加代码少了一句
应该添加为：

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

复制代码

顶楼主，我正为此事郁闷呢，谢谢了

火吧 呵呵

顶了