html版的门户首页DIY框架

这里的CSS有点坠余，可以自行修改的奥！
词html架构加以调整可以实现任何三栏风格的DIY：

1. <!--{subtemplate common/header}-->
   
2. <style id="diy_style" type="text/css"></style>
   
3. 
   
4. <div class="wp">
   
5. <!--[diy=diy1]--><div id="diy1" class="area"></div><!--[/diy]-->
   
6. </div>
   
7. <!--三栏，中间自动，两边浮动！-->
   
8. <div class="main" >
   
9. <div>
   
10. <!--header-->
    
11. <div id="header" >
    
12. <!--[diy=diy2]--><div id="diy2" class="area"></div><!--[/diy]-->
    
13. </div>
    
14. <!--content-left-->
    
15. <div id="content-left">
    
16. <!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]-->
    
17. </div>
    
18. <!--content-->
    
19. <div id="content">
    
20. <!--[diy=diy4]--><div id="diy4" class="area"></div><!--[/diy]-->
    
21. </div>
    
22. <!--content-right-->
    
23. <div id="content-right" >
    
24. <!--[diy=diy5]--><div id="diy5" class="area"></div><!--[/diy]-->
    
25. </div>
    
26. <!--footer-->
    
27. <div id="footr" >
    
28. <!--[diy=diy6]--><div id="diy6" class="area"></div><!--[/diy]-->
    
29. </div>
    
30. </div>
    
31. 
    
32. <!--第二部分-->
    
33. <div class="main" >
    
34. <!--header-->
    
35. <div id="header" >
    
36. <!--[diy=diy7]--><div id="diy7" class="area"></div><!--[/diy]-->
    
37. </div>
    
38. <!--content-left-->
    
39. <div id="content-left" >
    
40. <!--[diy=diy8]--><div id="diy8" class="area"></div><!--[/diy]-->
    
41. </div>
    
42. <!--content-->
    
43. <div id="content2" >
    
44. <!--[diy=diy9]--><div id="diy9" class="area"></div><!--[/diy]-->
    
45. </div>
    
46. <!--content-right-->
    
47. <div id="content-right" >
    
48. <!--[diy=diy10]--><div id="diy10" class="area"></div><!--[/diy]-->
    
49. </div>
    
50. <!--footer-->
    
51. <div id="footr" >
    
52. <!--[diy=diy11]--><div id="diy11" class="area"></div><!--[/diy]-->
    
53. </div>
    
54. <!--第二部分结束-->
    
55. </div>
    
56. </div>
    
57. 
    
58. <script src="misc.php?mod=diyhelp&action=get&type=index&diy=$_G['gp_diy']&r={echo random(4)}" type="text/javascript"></script>
    
59. <!--{subtemplate common/footer}-->
    

复制代码

顶一下

lyxyw 发表于 2011-10-24 18:21
顶一下

初步的构架还是不符合规格，最近即将出来比较给力的精简版，敬请期待！

为什么低部，没办法对齐？

urs2 发表于 2011-10-25 15:11
为什么低部，没办法对齐？

什么地步没办法对齐？奥，你说的这个是diy的时候自己没调好，其实如果把html的边框显示出来可以看到是对齐的！
要达到对其的目的，自己diy的时候注意一下字体的大小，适当调节就好，这只不过是一个框架！

{:soso__1117575024325907704_3:}

期待完善 顶一下

fuckgao 发表于 2011-11-2 10:21
期待完善 顶一下

精简版已经放出https://discuz.dismall.com/thread-2466524-1-1.html

爽