天谕官网论坛

标题: 【新手教程】美化代码进阶 [打印本页]
作者: 茶理理ぃ    时间: 2014-11-1 00:11
标题: 【新手教程】美化代码进阶
本帖最后由 茶理理ぃ 于 2014-11-1 00:12 编辑

这里是美化代码进阶


之前楼楼有发过新手简单教程


今天分享些其他表格


代码大神请轻拍


                                                                                  这里是新手代码第一课


                                               注：楼楼也是新手，所以有些不足的地方请大家见谅，代码大神请轻拍
                                                      不懂得小盆友可以站内私信我，楼楼看到的话就会回哒                                       

                                 
作者: 茶理理ぃ    时间: 2014-11-1 00:12
本帖最后由 茶理理ぃ 于 2014-11-1 15:25 编辑

            
                            简单日记1

写在前面的话

这个表格看起来很清晰，并且也很简单，就是表格套表格，很容易上手，颜色可以自己换，图片也是自定义。


下面是示例表格的效果：







◆◇◆◇◆
        










                                                            by：茶理理丶
   


作者: 茶理理ぃ    时间: 2014-11-1 00:15
本帖最后由 茶理理ぃ 于 2014-11-1 15:39 编辑



具体的解释


1，这是一个紫色渐变的表格，最外层是DCB5FF，依次为E6CAFF，F1E1FF，FAF4FF

2，最外层表格560，一共四层，间隔10。

3.，菱形开头，◆◇这个其实是自己随意添加的，图形本身没有颜色，我添加的是紫色，在菱形开头放入颜色编码即可。

◆◇◆◇◆◇

  1. [color=E6CAFF]◆◇◆◇◆◇[/color]
复制代码


4，然后就是插入行了，这个之前也有说过的，在这里我就不详细解释了。

  1. [tr][td]
  2. [/td][/tr]
  3. [tr][td]
  4. [/td][/tr]
复制代码


5.插入名字前面图片，这个随自己喜欢就好，可直接上传电脑图片或者其他网页图片。

6.插入分割线，这个和5是一样的，分割线可自选，然后上传图片就可以了。

作者: 茶理理ぃ    时间: 2014-11-1 00:16
本帖最后由 茶理理ぃ 于 2014-11-1 15:40 编辑

此为之前简单日记1代码

  1. [size=12px][/size][p=30, 2, center][size=12px][/size]
  2. [table=450,#DCB5FF]
  3. [tr][td][table=440,#E6CAFF]
  4. [tr][td][table=430,#F1E1FF]
  5. [tr][td][table=420,#FAF4FF]
  6. [tr][td][color=#c98610][font=Monaco, Consolas,][color=DCB5FF]◆◇[/color][/font][color=#c98610][font=Monaco, Consolas,][color=DCB5FF]◆◇[/color][/font][color=#c98610][font=Monaco, Consolas,][color=DCB5FF]◆[/color][/font][/color][/color][/color][/td][/tr]
  7. [tr][td][color=#ffc0cb][size=2]        [/size] [/color]
  8. [/td][/tr]
  9. [tr][td]
  10. [/td][/tr]
  11. [tr][td]
  12. [/td][/tr]
  13. [tr][td]
  14. [/td][/tr]
  15. [tr][td]
  16. [/td][/tr]
  17. [tr][td]
  18. [/td][/tr]
  19. [tr][td]
  20. [/td][/tr]
  21. [tr][td]
  22. [/td][/tr]
  23. [tr][td]
  24. [/td][/tr]
  25. [tr][td]
  26. [/td][/tr]
  27. [tr][td]
  28.                                                          [img]http://f.ty.netease.com/month_1410/1410021831d0e89c7e53c11048.gif[/img]   [b][size=3][color=#DCB5FF]by：茶理理丶[/color][/size][/b]
  29. [/td][/tr]
  30. [/table][/td][/tr]
  31. [/table][/td][/tr]
  32. [/table]   [img]http://f.ty.netease.com/month_1410/141002182782f4baa8af9c6cfb.gif[/img]
  33. [/td][/tr]
  34. [/table]

  36. [/p]
复制代码
作者: 茶理理ぃ    时间: 2014-11-1 00:16
本帖最后由 茶理理ぃ 于 2014-12-8 10:45 编辑



                        简单日记表格2

写在前面的话：

这个表格是楼楼之前一直用的，简单也很整洁，上手也很容易

下面是示例表格的效果






       

         




      








      



                                                                     by：茶理理丶


     










作者: 茶理理ぃ    时间: 2014-11-1 00:16
本帖最后由 茶理理ぃ 于 2014-11-1 16:05 编辑



                                              简单日记表格2


具体的解释：

1，先放一个一层表格，表格：480  颜色为FF99cc，然后在里面插入分割线，可自选。

  1. [table=480,#ff99cc]
  2. [tr][td]     [img]http://f.ty.netease.com/month_1410/1410021845a8770423626de744.gif[/img][img]http://f.ty.netease.com/month_1410/1410021845a8770423626de744.gif[/img]  
  3. [/td][/tr]
复制代码


2，然后插入2层表格，外层，表格：480  颜色为FF99cc，里层表格：470  颜色为FFFFFF，插入分割线，加入行。

3，加入名字前面的图片，署名，中间表格完成。

2，3，代码

  1. [table=480,#ff99cc]
  2. [tr][td][table=470,#ffffff]
  3. [tr][td][font=Impact][size=2][size=3]      [img]http://f.ty.netease.com/month_1410/1410021859e74d2c13ac88e9b7.gif[/img][img]http://f.ty.netease.com/month_1410/1410021859e74d2c13ac88e9b7.gif[/img] [img]http://f.ty.netease.com/month_1410/1410021859e74d2c13ac88e9b7.gif[/img] [img]http://f.ty.netease.com/month_1410/1410021859e74d2c13ac88e9b7.gif[/img]  


  6. [/size][/size][/font][/td][/tr]
  7. [tr][td][size=3]       [/size][/td][/tr]
  8. [tr][td]
  9. [/td][/tr]
  10. [tr][td]
  11. [/td][/tr]
  12. [tr][td]
  13. [/td][/tr]
  14. [tr][td]
  15. [/td][/tr]
  16. [tr][td][b][size=2][color=#ffc0cb]       [/color][/size][/b][/td][/tr]
  17. [tr][td]

  19.                                                                     [img]http://f.ty.netease.com/month_1410/1410021901819ac3d006cf68be.gif[/img] [color=#ffc0cb][b][font=黑体][size=5]by：[/size][size=3]茶理理丶[/size][/font][/b][/color][/td][/tr]
  20. [/table][font=Impact][size=2]
  21. [size=3][/size][/size][/font][table=248,silver]
  22. [/table][/td][/tr]
  23. [/table]
复制代码


4，最后插入2层表格，外层，表格：480  颜色为FF99cc，里层表格：470  颜色为FFFFFF，上传分割线即刻。

  1. [table=480,#ff99cc]
  2. [tr][td][table=470,#ffffff]
  3. [tr][td]     [img]http://f.ty.netease.com/month_1410/1410021852e0c5d0fed2828cb1.gif[/img][/td][/tr]
  4. [/table][/td][/tr]
  5. [/table]
复制代码



作者: 茶理理ぃ    时间: 2014-11-1 00:17
本帖最后由 茶理理ぃ 于 2014-11-1 16:06 编辑

此为简单日记2代码
  1. [table=480,#ff99cc]
  2. [tr][td]     [img]http://f.ty.netease.com/month_1410/1410021845a8770423626de744.gif[/img][img]http://f.ty.netease.com/month_1410/1410021845a8770423626de744.gif[/img]  
  3. [/td][/tr]
  4. [/table][p=30, 2, center][size=3][/size][table=480,#ff99cc]
  5. [tr][td][table=470,#ffffff]
  6. [tr][td][font=Impact][size=2][size=3]      [img]http://f.ty.netease.com/month_1410/1410021859e74d2c13ac88e9b7.gif[/img][img]http://f.ty.netease.com/month_1410/1410021859e74d2c13ac88e9b7.gif[/img] [img]http://f.ty.netease.com/month_1410/1410021859e74d2c13ac88e9b7.gif[/img] [img]http://f.ty.netease.com/month_1410/1410021859e74d2c13ac88e9b7.gif[/img]  


  9. [/size][/size][/font][/td][/tr]
  10. [tr][td][size=3]       [/size][/td][/tr]
  11. [tr][td]
  12. [/td][/tr]
  13. [tr][td]
  14. [/td][/tr]
  15. [tr][td]
  16. [/td][/tr]
  17. [tr][td]
  18. [/td][/tr]
  19. [tr][td]
  20. [/td][/tr]
  21. [tr][td]
  22. [/td][/tr]
  23. [tr][td]
  24. [/td][/tr]
  25. [tr][td]
  26. [/td][/tr]
  27. [tr][td][b][size=2][color=#ffc0cb]       [/color][/size][/b][/td][/tr]
  28. [tr][td]

  30.                                                                     [img]http://f.ty.netease.com/month_1410/1410021901819ac3d006cf68be.gif[/img] [color=#ffc0cb][b][font=黑体][size=5]by：[/size][size=3]茶理理丶[/size][/font][/b]
  31. [/color]
  32. [/td][/tr]
  33. [/table][font=Impact][size=2]
  34. [size=3][/size][/size][/font][table=248,silver]
  35. [/table][/td][/tr]
  36. [/table][/p][p=30, 2, center][size=3][/size][table=480,#ff99cc]
  37. [tr][td][table=470,#ffffff]
  38. [tr][td]     [img]http://f.ty.netease.com/month_1410/1410021852e0c5d0fed2828cb1.gif[/img][/td][/tr]
  39. [/table][/td][/tr]
  40. [/table]

复制代码
作者: 茶理理ぃ    时间: 2014-11-1 00:17
本帖最后由 茶理理ぃ 于 2014-11-1 16:22 编辑


                          简单日记表格3

写在前面的话

这个跟之前的相比算了比较难一点的，总体来说都是3层的表格。

下面为示例表格效果





         



      



     
   
                                 by：茶理理丶
  

作者: 呗呗酱    时间: 2014-11-1 00:20
可以插楼了咩
作者: 茶理理ぃ    时间: 2014-11-1 00:27
回复 9# 呗呗酱


   我打算直接在2楼做个连接
作者: 茶理理ぃ    时间: 2014-11-1 00:27
本帖最后由 茶理理ぃ 于 2014-11-1 16:44 编辑



                                                    简单日记表格3


具体的解释：

1，这个表格整体都是由3层表格构成的

2，外层为550，颜色FFFFFF
  1. p=30, 2, center][table=550,#ffffff]
  2. [tr][td][table=540,#ffffff]
  3. [tr][td][table=100,#ffc0cb]
  4. [tr][td][/td][/tr]
  5. [/table][/td][td][table=100,#f5deb3]
  6. [tr][td][/td][/tr]
  7. [/table][/td][td][table=100,#ffc0cb]
  8. [tr][td][/td][/tr]
  9. [/table][/td][td][table=100,#f5deb3]
  10. [tr][td][/td][/tr]
  11. [/table][/td][td][table=100,#ffc0cb]
  12. [tr][td][/td][/tr]
  13. [/table][/td][/tr]
  14. [/table][/td][/tr]
  15. [/table]
  16. [/p]
复制代码
3，再放一个3层的，外层为FFFFFF，中间为F5EDB3，里面为FFC0CB，表格为550  540  530  中间插入分割线
  1. [p=30, 2, center][table=550,#ffffff]
  2. [tr][td][table=540,#f5deb3]
  3. [tr][td][table=530,#ffc0cb]
  4. [tr][td]
  5. [/td][/tr]
  6. [/table][/td][/tr]
  7. [/table][/td][/tr]
  8. [/table]
  9. [/p]
复制代码
4，中间文字表格，3层，外层FFFFF，中间F5EDB3，里面为FFFFF，表格为550  540  530

5，插入和表格最开始的代码即可。


作者: 茶理理ぃ    时间: 2014-11-1 00:28
本帖最后由 茶理理ぃ 于 2014-11-1 16:45 编辑

此为简单日记表格3代码

  1. [p=30, 2, center][table=550,#ffffff]
  2. [tr][td][table=540,#ffffff]
  3. [tr][td][table=100,#ffc0cb]
  4. [tr][td][/td][/tr]
  5. [/table][/td][td][table=100,#f5deb3]
  6. [tr][td][/td][/tr]
  7. [/table][/td][td][table=100,#ffc0cb]
  8. [tr][td][/td][/tr]
  9. [/table][/td][td][table=100,#f5deb3]
  10. [tr][td][/td][/tr]
  11. [/table][/td][td][table=100,#ffc0cb]
  12. [tr][td][/td][/tr]
  13. [/table][/td][/tr]
  14. [/table][/td][/tr]
  15. [/table][/p][p=30, 2, center][table=550,#ffffff]
  16. [tr][td][table=540,#f5deb3]
  17. [tr][td][table=530,#ffc0cb]
  18. [tr][td][img]http://f.ty.netease.com/month_1410/1410080041e7757b654ef4f563.jpg[/img]
  19. [/td][/tr]
  20. [/table][/td][/tr]
  21. [/table][/td][/tr]
  22. [/table][/p][p=30, 2, center][table=550,#ffffff]
  23. [tr][td][table=540,#f5deb3]
  24. [tr][td][table=530,white]
  25. [tr][td]         
  26. [/td][/tr]
  27. [tr][td]
  28. [/td][/tr]
  29. [tr][td]
  30. [/td][/tr]
  31. [tr][td]
  32. [/td][/tr]
  33. [tr][td]       [/td][/tr]
  34. [tr][td]
  35. [/td][/tr]
  36. [tr][td]
  37. [/td][/tr]
  38. [tr][td]
  39. [/td][/tr]
  40. [tr][td]     [/td][/tr]
  41. [tr][td]    [b][size=2] [/size][/b][/td][/tr]
  42. [tr][td]                                [img]http://f.ty.netease.com/month_1410/141008004216423c1ae5fc8dbb.jpg[/img][size=4] [/size][b][size=4]by：[/size][size=3]茶理理丶 [/size][/b]
  43. [/td][/tr]
  44. [/table]  [img]http://f.ty.netease.com/month_1410/1410080036896617b461275a48.jpg[/img]
  45. [/td][/tr]
  46. [/table][/td][/tr]
  47. [/table][/p][p=30, 2, center][table=550,#ffffff]
  48. [tr][td][table=540,#ffffff]
  49. [tr][td][table=100,#ffc0cb]
  50. [tr][td][/td][/tr]
  51. [/table][/td][td][table=100,#f5deb3]
  52. [tr][td][/td][/tr]
  53. [/table][/td][td][table=100,#ffc0cb]
  54. [tr][td][/td][/tr]
  55. [/table][/td][td][table=100,#f5deb3]
  56. [tr][td][/td][/tr]
  57. [/table][/td][td][table=100,#ffc0cb]
  58. [tr][td][/td][/tr]
  59. [/table][/td][/tr]
  60. [/table][/td][/tr]
  61. [/table][/p]
复制代码
作者: 茶理理ぃ    时间: 2014-11-1 00:30
本帖最后由 茶理理ぃ 于 2014-11-1 16:52 编辑


                              简单日记表格4

写在前面

这款表格是楼楼很喜欢的一款，清晰，并且不难上手。

下面为示例表格效果





           
            2010/10/29








                                               
                                                                  by：茶理理ぃ
作者: 茶理理ぃ    时间: 2014-11-1 00:30
本帖最后由 茶理理ぃ 于 2014-11-1 17:08 编辑

   

                                                    简单日记表格4


具体解释：

1，这个表格为大套小的表格。

2，最外层，表格为470  颜色FFAAD5  

3，然后是第一个白色窄条，表格为459  颜色FFFFFF

  1. [table=459,white]
  2. [tr][td][/td][/tr]
  3. [/table]
复制代码


4，第二个白色窄条，表格为270  颜色FFFFFF

  1. [table=270,white]
  2. [tr][td][/td][/tr]
  3. [/table]
复制代码


5，插入小图片，可自定义

6，三个粉色的窄条，颜色为FFAAD5  表格分别为 220   230  250

  1. [table=220,#ffaad5]
  2. [tr][td][/td][/tr]
  3. [/table][table=230,#ffaad5]
  4. [tr][td][/td][/tr]
  5. [/table][table=250,#ffaad5]
  6. [tr][td][/td][/tr]
  7. [/table]
复制代码


7，插入文章表格，表格为445  颜色FFFFFF  

  1. [table=445,white]
  2. [tr][td]           
  3. [/td][/tr]
  4. [tr][td]
  5. [/td][/tr]
  6. [tr][td]
  7. [/td][/tr]
  8. [tr][td]
  9. [/td][/tr]
  10. [tr][td]
  11. [/td][/tr]
  12. [tr][td]
  13. [/td][/tr]
  14. [/table]
复制代码


8，插入白色窄条，短条表格为270  459   颜色FFFFFF

  1. [table=270,white]
  2. [tr][td][/td][/tr]
  3. [/table][table=459,white]
  4. [tr][td][/td][/tr]
  5. [/table]
复制代码


作者: 茶理理ぃ    时间: 2014-11-1 00:30
本帖最后由 茶理理ぃ 于 2014-11-1 17:08 编辑

此为简单日历表格4 代码

  1. [table=470,#ffaad5]
  2. [tr][td][table=459,white]
  3. [tr][td][/td][/tr]
  4. [/table][table=270,white]
  5. [tr][td][/td][/tr]
  6. [/table][table=459,white]
  7. [tr][td][img]http://f.ty.netease.com/month_1410/1410120059c13048b89f367a50.jpg[/img] [img]http://f.ty.netease.com/month_1410/14101201008f3f85e6f0030ec5.jpg[/img] [img]http://f.ty.netease.com/month_1410/1410120100939e2db6cf95e0bf.jpg[/img]
  8. [table=220,#ffaad5]
  9. [tr][td][/td][/tr]
  10. [/table][table=230,#ffaad5]
  11. [tr][td][/td][/tr]
  12. [/table][table=250,#ffaad5]
  13. [tr][td][/td][/tr]
  14. [/table][table=445,white]
  15. [tr][td]           
  16.            [img]http://f.ty.netease.com/month_1410/1410120130a9d8865e6d018af1.gif[/img] [b][size=2][color=#696969]2010/10/29[/color][/size][/b][/td][/tr]
  17. [tr][td]
  18. [/td][/tr]
  19. [tr][td]
  20. [/td][/tr]
  21. [tr][td]
  22. [/td][/tr]
  23. [tr][td]
  24. [/td][/tr]
  25. [tr][td]
  26. [/td][/tr]
  27. [tr][td]
  28. [/td][/tr]
  29. [tr][td]
  30. [/td][/tr]
  31. [tr][td]
  32. [/td][/tr]
  33. [/table][size=3]                                               
  34.                                                               [/size][img]http://f.ty.netease.com/month_1410/1410181431f24c4ddf041e7450.gif[/img] [size=4][color=#696969][b]   by：[/b][/color][/size][size=3][color=#696969][b]茶理理ぃ[/b][/color][/size]
  35. [/td][/tr]
  36. [/table][table=270,white]
  37. [tr][td][/td][/tr]
  38. [/table][table=459,white]
  39. [tr][td][/td][/tr]
  40. [/table][/td][/tr]
  41. [/table]
复制代码
作者: 瑜姐的老大    时间: 2014-11-1 01:36
我也是！！！
作者: 瑜姐的老大    时间: 2014-11-1 01:37
我也要蟑螂！
作者: 瑜姐的老大    时间: 2014-11-1 01:37
占楼~~~~~~~~~~~~~~~~~~~~~~~~~
作者: 不诉离殇    时间: 2014-11-1 02:05
立正站好！
作者: 中庸    时间: 2014-11-1 09:10
好厉害贝贝酱~
作者: 宁宁大魔王    时间: 2014-11-1 11:16
作者: 鸢尾莳青青    时间: 2014-11-11 17:07
数量太少不够用啦~~~
作者: 丷洛瞳丶    时间: 2014-11-11 17:12
抱走~~~~~~~~~~~
作者: 茶理理ぃ    时间: 2014-11-11 17:59
回复 22# 青青子衿


    我明天在更点
作者: Mr-J    时间: 2015-5-17 16:22
理理酱绝对是美图的版主呢！
作者: 岸部眞明    时间: 2015-5-17 16:57
此 帖 不 朽
作者: 玩命灬    时间: 2015-5-21 12:06
好复杂的样子
作者: 茶理理ぃ    时间: 2015-5-21 22:26
回复 25# Mr-J


    哈喽 好久不玩论坛了
作者: Mr-J    时间: 2015-5-21 23:56
回复 28# 茶理理ぃ


   但是看你的签名档动图头像，一看就是一个很用心的人呢~！
作者: 阿喜大人    时间: 2015-5-22 01:02
脑子不够用，Mark一个，以后要用可以照着搬家的样子。　　　 楼主好贴心。



欢迎光临 天谕官网论坛 (http://ty.netease.com/) Powered by Discuz! X3.3