立即注册 登录
彼岸网 返回首页

东风的个人空间 http://www.bian-wang.com/discuz/?10703 [收藏] [复制] [分享] [RSS]

日志

增加网站diy框架

热度 3已有 415 次阅读2016-10-2 10:05 PM |个人分类:Discuz学习|系统分类:十万个怎么办| 网站

犹豫加宽,原来的DIY不够用,在北美网测试后,分享这里( 我在那里也贴出来了,不过当时没验证还):http://www.beimeilife.com/thread-32306-1-1.html

1:上传添加的框架图案到:
 static/image/diy/


http://www.bian-wang.com/discuz/data/userupload/10703/diy.zip


2:修改CSS与html文件

修改文件
css_diy.css
common.css
header_diy.htm

文件路径template/default/common/

a:css_diy.css

发现:
  1.          .frame-1-1, .frame-1-1-1 { background-position: 50% 0; }
  2.         .frame-1-1-1{ background-image: url({STATICURL}image/diy/vline2.png); }
  3.         .frame-1-2 { background-position: 33.3% 0; }
  4.         .frame-2-1 { background-position: 66.6% 0; }
  5.         .frame-1-3 { background-position: 24.9% 0; }
  6.         .frame-3-1 { background-position: 74.9% 0; }

替换:
  1. .frame-1-1, .frame-1-1-1 { background-position: 50% 0; }

  2.         .frame-1-1-1{ background-image: url({STATICURL}image/diy/vline2.png); }

  3.         .frame-1-2 { background-position: 33.3% 0; }
  4.         
  5.         .frame-2-1 { background-position: 66.6% 0; }

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

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

  10.         .frame-4-3 { background-position: 56.8% 0; }

  11.         .frame-3-4 { background-position: 43.1% 0; }

  12.         
  13. .frame-4-1 { background-position: 79.9% 0; }

  14.         .frame-1-4 { background-position: 19.9% 0; }

  15.         .frame-5-1 { background-position: 83.3% 0; }

  16.         .frame-1-5 { background-position: 16.6% 0; }

  17.         .frame-6-1 { background-position: 85.7% 0; }

  18.         .frame-1-6 { background-position: 14.2% 0; }

b:common.css

发现:/* 新的框架结构 */ 下面的语句, 以及/* X1 之前的框架结构 */ 下面的语句, 用下面代替:
  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, .frame-2-3-l, .frame-3-2-l, .frame-4-3-l, .frame-3-4-l, .frame-4-1-l, .frame-1-4-l, .frame-5-1-l, .frame-1-5-l, .frame-6-1-l, .frame-1-6-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, .frame-2-3-r, .frame-3-2-r, .frame-4-3-r, .frame-3-4-r, .frame-4-1-r, .frame-1-4-r, .frame-5-1-r, .frame-1-5-r, .frame-6-1-r, .frame-1-6-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.         
  10.         .frame-2-3-l, .frame-3-2-r { width: 39.9%; }
  11.         .frame-2-3-r, .frame-3-2-l { width: 59.9%; }
  12.         .frame-4-3-l, .frame-3-4-r { width: 56.8%; }
  13.         .frame-4-3-r, .frame-3-4-l { width: 43.1%; }
  14.         
  15.         .frame-4-1-l, .frame-1-4-r { width: 79.9%; }
  16.         .frame-4-1-r, .frame-1-4-l { width: 19.9%; }
  17.         .frame-5-1-l, .frame-1-5-r { width: 83.3%; }
  18.         .frame-5-1-r, .frame-1-5-l { width: 16.6%; }
  19.         .frame-6-1-l, .frame-1-6-r { width: 85.7%; }
  20.         .frame-6-1-r, .frame-1-6-l { width: 14.2%; }
  21.         /* End */

  22.         /* X1 之前的框架结构 */
  23.         .frame .mn { margin-bottom: 0; }
  24.         .frame .sd { min-height: 0; _height: auto; }

  25.         .frame-1-1 .col-r { float: right; width: 49.9%; }
  26.         .frame-1-1 .col-l { float: left; width: 49.9%; }

  27.         .frame-1-2 .mn, .frame-1-2 .col-r, .frame .frame-1-2 .mn, .frame .frame-1-2 .col-r { float: right; width: 66.6%; }
  28.         .frame-1-2 .sd, .frame-1-2 .col-l, .frame .frame-1-2 .sd, .frame .frame-1-2 .col-l { float: left; width: 33.3%; }

  29.         .frame-2-1 .mn, .frame-2-1 .col-l, .frame .frame-2-1 .mn, .frame .frame-2-1 .col-l { float: left; width: 66.6%; }
  30.         .frame-2-1 .sd, .frame-2-1 .col-r, .frame .frame-2-1 .sd, .frame .frame-2-1 .col-r { float: right; width: 33.3%; }

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

  33.         .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%;}
  34.         .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%}
  35.         
  36.         .frame-2-3 .mn, .frame-2-3 .col-l, .frame .frame-2-3 .mn, .frame .frame-2-3 .col-l { float: left; width: 39.9%;}
  37.         .frame-2-3 .sd, .frame-2-3 .col-r, .frame .frame-2-3 .sd, .frame .frame-2-3 .col-r { float: right; width: 59.9%}
  38.         
  39.         .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%;}
  40.         .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%}
  41.         
  42.         .frame-4-3 .mn, .frame-4-3 .col-l, .frame .frame-4-3 .mn, .frame .frame-4-3 .col-l { float: left; width: 56.8%;}
  43.         .frame-4-3 .sd, .frame-4-3 .col-r, .frame .frame-4-3 .sd, .frame .frame-4-3 .col-r { float: right; width: 43.1%}
  44.         
  45.         .frame-3-4 .mn, .frame-3-4 .col-l, .frame .frame-3-4 .mn, .frame .frame-3-4 .col-l { float: left; width: 43.1%;}
  46.         .frame-3-4 .sd, .frame-3-4 .col-r, .frame .frame-3-4 .sd, .frame .frame-3-4 .col-r { float: right; width: 56.8%}
  47.         
  48.         .frame-4-1 .mn, .frame-4-1 .col-l, .frame .frame-4-1 .mn, .frame .frame-4-1 .col-l { float: left; width: 79.9%;}
  49.         .frame-4-1 .sd, .frame-4-1 .col-r, .frame .frame-4-1 .sd, .frame .frame-4-1 .col-r { float: right; width: 19.9%}
  50.         
  51.         .frame-5-1 .mn, .frame-5-1 .col-l, .frame .frame-5-1 .mn, .frame .frame-5-1 .col-l { float: left; width: 83.3%;}
  52.         .frame-5-1 .sd, .frame-5-1 .col-r, .frame .frame-5-1 .sd, .frame .frame-5-1 .col-r { float: right; width: 16.6%}
  53.         
  54.         .frame-6-1 .mn, .frame-6-1 .col-l, .frame .frame-6-1 .mn, .frame .frame-6-1 .col-l { float: left; width: 85.7%;}
  55.         .frame-6-1 .sd, .frame-6-1 .col-r, .frame .frame-6-1 .sd, .frame .frame-6-1 .col-r { float: right; width: 14.2%}

  56.         .frame-1-1-1 .col-l { float: left; width: 33.3%; }
  57.         .frame-1-1-1 .col-c { float: left; width: 33.3%; }
  58.         .frame-1-1-1 .col-r { float: right; width: 33.3%; }
  59.         
  60.         .frame .frame-1-1-1 .col-l, .frame .frame-1-1-1 .col-c, .frame .frame-1-1-1 .col-r { padding: 0; width: 33%; }
  61.         .frame .frame-1-1 .col-l, .frame .frame-1-1 .col-r { width: 49.9%; }
  62.         /* End */

c:header_diy.htm:发现 <ul id="contentframe" class="content hide">....</ul>中间的语句,

代替:


  1.                         <li><a href="javascript:;" id="frame_1" onmousedown="drag.createObj(event,'frame','1');" onfocus="this.blur();" data="$widthstr"><img src="{STATICURL}image/diy/layout-1.png" />100%{lang header_frame}</a></li>
  2.                         <li><a href="javascript:;" id="frame_1_1" onmousedown="drag.createObj(event,'frame','1-1');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-1-1.png" />1:1</a></li>
  3.                         <li><a href="javascript:;" id="frame_1_2" onmousedown="drag.createObj(event,'frame','1-2');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-1-2.png" />1:2</a></li>
  4.                         <li><a href="javascript:;" id="frame_2_1" onmousedown="drag.createObj(event,'frame','2-1');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-2-1.png" />2:1</a></li>
  5.                         <li><a href="javascript:;" id="frame_1_3" onmousedown="drag.createObj(event,'frame','1-3');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-1-3.png" />1:3</a></li>
  6.                         <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>
  7.                         
  8.                                                 <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>
  9.                                                 <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>
  10.                                                 <li><a href="javascript:;" id="frame_4_3" onmousedown="drag.createObj(event,'frame','4-3');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-4-3.png" />4:3</a></li>
  11.                                                 <li><a href="javascript:;" id="frame_3_4" onmousedown="drag.createObj(event,'frame','3-4');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-3-4.png" />3:4</a></li>
  12.                                                                         
  13.                         <li><a href="javascript:;" id="frame_4_1" onmousedown="drag.createObj(event,'frame','4-1');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-4-1.png" />4:1</a></li>
  14.                         <li><a href="javascript:;" id="frame_1_4" onmousedown="drag.createObj(event,'frame','1-4');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-1-4.png" />1:4</a></li>
  15.                         <li><a href="javascript:;" id="frame_5_1" onmousedown="drag.createObj(event,'frame','5-1');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-5-1.png" />5:1</a></li>
  16.                         <li><a href="javascript:;" id="frame_1_5" onmousedown="drag.createObj(event,'frame','1-5');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-1-5.png" />1:5</a></li>
  17.                         <li><a href="javascript:;" id="frame_6_1" onmousedown="drag.createObj(event,'frame','6-1');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-6-1.png" />6:1</a></li>
  18.                         <li><a href="javascript:;" id="frame_1_6" onmousedown="drag.createObj(event,'frame','1-6');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-1-6.png" />1:6</a></li>
  19.                         <li><a href="javascript:;" id="frame_1_1_1" onmousedown="drag.createObj(event,'frame','1-1-1');" onfocus="this.blur();" data="$widthstr"><img src="{STATICURL}image/diy/layout-1-1-1.png" />1:1:1</a></li>
  20.                         <li><a href="javascript:;" id="frame_tab" onmousedown="drag.createObj(event,'tab');" onfocus="this.blur();" data="$widthstr"><img src="{STATICURL}image/diy/layout-tab.png" />tab{lang header_frame}</a></li>



后记:测试页在江南兄的提醒下, 修改后的链接为:http://www.beimeilife.com/portal.php?mod=topic&topicid=119

发表评论 评论 (12 个评论)

回复 东风 2016-10-27 11:48 PM
忆江南: 别客气。新的一周又要过去了,也祝东风兄周末愉快!
江南兄,给你短消息了,请速排查~
回复 忆江南 2016-10-20 12:55 PM
东风: 太谢谢提醒了, 我用这个专题页作为前台测试代码用, 在不断改写Instagram代码时候, 遇到Javascript冲突, 结果整个页面打不开了( 其实后台修改下代码就可以, ...
别客气。新的一周又要过去了,也祝东风兄周末愉快!
回复 carry0987 2016-10-17 10:16 AM
东风: 周末愉快, Carry~~
謝謝~你也是阿~
回复 东风 2016-10-15 04:03 PM
carry0987: 支持!!
周末愉快, Carry~~
回复 东风 2016-10-15 04:03 PM
天香公主: &quot;在原来的基础上添加了2:3、3:2、3:4、4:3、1:5、5:1、1:6、6:1、1:4、4:1 共十个框架&quot;
问好天香兄~
回复 东风 2016-10-15 04:01 PM
测试页改为这里:http://www.beimeilife.com/portal.php?mod=topic&topicid=119
回复 东风 2016-10-15 03:59 PM
忆江南: 谢谢东风兄分享心得!测试页是不是撤掉了?
太谢谢提醒了, 我用这个专题页作为前台测试代码用, 在不断改写Instagram代码时候, 遇到Javascript冲突, 结果整个页面打不开了( 其实后台修改下代码就可以,当时忙于测试, 就重新做了个测试页:http://www.beimeilife.com/portal.php?mod=topic&topicid=119
忙完后忘了到这里更新测试页, 再次谢谢您,江南兄,我马上更新这里的正文里的链接, 顺道~周末愉快~
回复 忆江南 2016-10-15 10:23 AM
谢谢东风兄分享心得!测试页是不是撤掉了?
回复 天香公主 2016-10-3 02:58 PM
"在原来的基础上添加了2:3、3:2、3:4、4:3、1:5、5:1、1:6、6:1、1:4、4:1 共十个框架"
回复 carry0987 2016-10-3 01:03 PM
支持!!
回复 东风 2016-10-2 10:08 PM
测试页:http://www.beimeilife.com/portal.php?mod=topic&topicid=110
回复 东风 2016-10-2 10:07 PM
很遗憾,不知道怎么插编码 , 不好复制,大家可以到上面提供的北美网链接去复制。

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2017-10-18 10:43 AM , Processed in 0.060344 second(s), 20 queries.

返回顶部