玩家社区_三国杀官方社区

标题: 【美化】NANA排版教学1 [打印本页]

作者: Heaven1y    时间: 2017-11-20 21:13
标题: 【美化】NANA排版教学1
本帖最后由 Heaven1y 于 2017-11-20 21:14 编辑






很多朋友问我怎么排版,所以我大言不惭厚着脸皮弄了个教学帖

最近也是在钻研,有懂的朋友不要笑话我啦~

以最近的活动帖1楼为例子,活动帖链接







首先,排版前你需要懂一些基本代码。比如以下:


  1. [align=center]居中[/align]
  2. [b]字体加粗[/b]
  3. [backcolor=Pink]粉←背景颜色[/backcolor]
  4. [color=Pink]粉←字体颜色[/color]

复制代码





表格是个作边框好东西,希望你能学会。

三个表格组成 ↑ 框中框
  1. 以下是表格的代码,如果表格需要设置颜色,又忘记了哪些代码是它,那么可以在百分比后打上逗号+颜色,如:[table=50%,pink]

  2. 百分比是表格宽度,根据个人喜好设置,也可填数字。tr和td = 行和列

  3. [table=50%]
  4. [tr][td]内容[/td][/tr]
  5. [/table]
复制代码

注意:

1、查看代码方式,编辑页面点右上角纯文本旁边的框
2、本文所教的操作,在编辑页面均能找到
3、所有斜杠的前面都是可改变的内容,多保存,多尝试.
4、表格默认居左,需手动代码改成居中,
居中代码放在需要居中的代码两旁(任何方式居中都如此),下面有教学。












这个图片的排版由两个表格组成,因为一个表格只能设定一个背景颜色



第一步

打开表格,先设定2行1列,根据个人喜好设定宽度,背景颜色



表格默认居左,需手动代码改成居中,效果如下:


排版图片


排版图片




第二步

居中表格(在纯文本改动)


在表格中打回车键可以增加高度,

添加图片素材进去,如果图片要居中,也要在图片的代码两旁加上居中代码。


表格例子:








居中效果:

居中排版图片



排版图片






第三步



1、建立新边框
(背景颜色自己挑http://club.sanguosha.com/thread-146282-1-1.html



效果:






2、居中




3、在表格中建立新表格,1行1列,百分60,底色白色



4、居中


居中代码介于外框和内框的代码中间,

新手做每一步前,都需要保存代码,不然容易做错无法修复!








5、重复上个动作,在内框第二行加弄一个蓝色框,宽度占内框98%

(忘记居中)效果图:

然后箭头指着的地方,内框和外框之间,删掉一行

变成



6、在内框添加表格,1行2列,白底,内框居中
(忘记居中第三个框)




内框居中代码如下:



7、添加素材,如果有行高不合适又删不掉的情况,切换文本再回来看看。

(全部居中后效果)







目前做的这个边框,跟我活动帖有所不同,因为我的宽度设置不一样。

对框的宽度不满意也可以进文本修改,除了第一个框是设定总体大小,

里面的框设定宽度都是以外框为准,比如内框宽度98%就是外框的总体98%

大家可以根据自己的风格随意变换。

基本教学完毕。






问:是什么东西?



答:。。。。。。,…&-

懂了吗




作者: Heaven1y    时间: 2017-11-20 21:13
能回帖吗
作者: 幼蕉    时间: 2017-11-20 21:14
娜娜的板凳是我
作者: 站着睡觉的树    时间: 2017-11-20 21:14
先顶再看!!!
作者: T-Mac。    时间: 2017-11-20 21:15
好贴 厉害了!
作者: 刀锋灬雪雪雪    时间: 2017-11-20 21:23
膜拜技术大佬
作者: 辣眼睛    时间: 2017-11-20 21:23
娜娜最厉害




































p.s:看了也没学会
作者: 良人当归即好    时间: 2017-11-20 21:23
膜拜大佬。
作者: 黑火    时间: 2017-11-20 21:24
收藏一下
作者: 萨塔尼亚大魔王    时间: 2017-11-20 21:25
这个厉害了
作者: 陆神粉一生    时间: 2017-11-20 21:27
看完还是不会排版系列
作者: 老虎吃小孩    时间: 2017-11-20 21:27
一直觉得H的帖子排版超赞 可惜还是没看懂...
作者: YiDao    时间: 2017-11-20 21:34
学习了
作者: 会发光的眼睛    时间: 2017-11-20 21:39
娜娜厉害了
作者: 国色天香1000    时间: 2017-11-20 21:39
疯狂疯狂狂狂狂狂狂给娜娜打call
作者: 夏泪鬼爷    时间: 2017-11-20 21:45
懂了
作者: 足控抖M    时间: 2017-11-20 21:46
好厉害!!
作者: 鲱鱼喵丶    时间: 2017-11-20 21:48
666
这波很技术
作者: 千穆    时间: 2017-11-20 21:48
收藏慢慢看
作者: 笙笛之影    时间: 2017-11-20 21:50
膜拜大佬,萌新求抱大腿
作者: 幼蕉    时间: 2017-11-20 21:52


交个作业给娜娜,写得好清楚,辛苦辣!
楼层链接

作者: 周杰伦脑残粉    时间: 2017-11-20 21:55
这么难,不学了
作者: VIP.盛夏光年    时间: 2017-11-20 22:04
厉害厉害,学习了
作者: 打酱油的人啊    时间: 2017-11-20 22:11
好厉害
我选择不排版
作者: 初蓝    时间: 2017-11-20 22:17
本帖最后由 初蓝 于 2017-11-20 22:52 编辑





作者: Sarabi    时间: 2017-11-20 22:29
强大的一波~
作者: 明明白白    时间: 2017-11-20 22:30
本帖最后由 明明白白 于 2017-11-24 13:08 编辑



















作者: 桔梗的眷恋    时间: 2017-11-20 22:30
太长不看
作者: 雪星    时间: 2017-11-20 22:33
。。。。和你们比起来我们*帖真是够粗糙的
作者: 弃杀坑主公    时间: 2017-11-20 22:33
排版不错,学习
作者: 薰风羽    时间: 2017-11-20 22:44
学习了
作者: 天才的逆袭    时间: 2017-11-20 22:48
哇!!!!娜娜好腻害!!!!
作者: 木丶婉清    时间: 2017-11-20 22:50
太棒了~我娜娜~而且超实用~已经收藏了~
作者: 站着睡觉的树    时间: 2017-11-20 22:53
我为娜娜打CALL!!!娜娜太厉害惹!!!
试着做了一个小小的~嘿嘿嘿嘿


作者: 仙儿    时间: 2017-11-20 22:55
先收藏 慢慢看
作者: 我有两个蛋蛋    时间: 2017-11-20 23:00
给大佬端茶
作者: JIAO    时间: 2017-11-20 23:00
代码这种东西  只要学会简单的逻辑就可以了
作者: 边城    时间: 2017-11-21 00:41
这是什么
作者: 西川蜀将    时间: 2017-11-21 00:50
先顶再看
作者: 梦落梨花    时间: 2017-11-21 01:19
给娜娜大佬递茶~
作者: 二飘丶    时间: 2017-11-21 06:55
好帖~要收藏
作者: 易客人    时间: 2017-11-21 10:33
学不会,我选择不排版
作者: 帅灬夫人    时间: 2017-11-21 10:35
好贴,打call !
作者: 汤圆圆    时间: 2017-11-21 10:38
表格tr是可以改颜色的
作者: 白橘子    时间: 2017-11-21 10:39
我这种智障儿童看不懂的
作者: 汤圆圆    时间: 2017-11-21 10:47
举个例子


  1. [table=50%,Black]
  2. [tr][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  3. [tr=white][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  4. [tr][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  5. [tr=red][td] [/td][td] [/td][td] [/td][td] [/td][/tr]
  6. [/table]
复制代码

作者: Heaven1y    时间: 2017-11-21 10:52



  1. [table=50%,Plum]
  2. [tr=blue][td=1,2,30] [/td][td] [/td][td] [/td][/tr]
  3. [tr][td=2,2,30] [/td][td] [/td][td] [/td][/tr]
  4. [tr][td] [/td][td] [/td][td] [/td][/tr]
  5. [/table]
复制代码

@汤圆圆  求阴影面积


作者: 要赢    时间: 2017-11-21 11:14
666,支持娜娜申精
作者: 秋风残阳    时间: 2017-11-21 11:23
娜娜厉害了,支持一下
作者: 问天丶问雅    时间: 2017-11-21 14:09
娜娜,最厉害。
作者: 天才的逆袭    时间: 2017-11-21 14:41
今天编辑一个帖子又用到了娜娜的排版教学!!!娜娜真是很厉害呢!!!!
作者: miletou    时间: 2017-11-21 15:06
收藏了~好评娜娜~
作者: VS丶Never    时间: 2017-11-21 15:13
厉害啦~~~可惜我懒癌晚期
作者: 起名真草蛋    时间: 2017-11-21 15:21
大佬好厉害,萌新佩服
作者: 血龙煞    时间: 2017-11-21 15:28
后排帮娜娜顶,技术贴
作者: 丷霜影夜    时间: 2017-11-21 15:53
小娜娜厉害了
作者: 鲱鱼喵丶    时间: 2017-11-21 19:45
本帖最后由 鲱鱼喵丶 于 2017-11-21 19:56 编辑




作者: Ara    时间: 2017-11-21 20:11
效果真是棒棒哒~码住等用的时候再学
作者: 青钱沽酒丷梦    时间: 2017-11-23 15:07
厉害了,我还是学着简单点。这个和我工作差不多了,我觉得娜娜学设计的。
作者: 源泉    时间: 2017-11-23 15:10
糙汉子学不来,后排支持下
作者: 谈无欲    时间: 2017-11-23 15:17
原来那个框框可以直接写网页代码,有点厉害
作者: 7爷思密达    时间: 2017-11-30 11:57
收藏之
作者: Elegante    时间: 2017-11-30 12:03
好贴!但是懒人表示只想复制黏贴
作者: 白沫子    时间: 2017-12-30 17:48
看完美化教程,我表示更想知道这些可爱的小表情,还有那些小小的动图是怎么找的
作者: おいしい    时间: 2017-12-30 18:23
本帖最后由 おいしい 于 2017-12-30 18:24 编辑

                                                                                   
作业




L
好特么丑...技术废的我

作者: miletou    时间: 2018-1-16 12:39
交作业啦 娜娜因为我太笨了

每次看感觉复杂就没试

这次终于看懂了!





作者: 时光倒转    时间: 2018-11-29 13:58
本帖最后由 时光倒转 于 2018-11-29 14:57 编辑



我的好丑,要是能复制粘贴做快点就好了
。。。。
再做一个

生如夏花之绚烂

死如秋叶之静美






作者: 心中一萌    时间: 2018-11-29 14:10
这么牛批的吗,马住就当学会了




欢迎光临 玩家社区_三国杀官方社区 (https://club.sanguosha.com/) Powered by Discuz! X3.3