小米MIX 2S +关注 已有0人关注 +发表新主题
回复

【帖子美化】失传已久的表格代码,让你的帖子与众不同

精华 发表在 玩法&技巧 01-01 22:07:13  来自PC 复制链接 手机看帖扫一扫!手机看帖更爽 426 24217

推荐年度精华
暗夜精帖
小米新闻
热门活动

2015年5月20日小米社区新旧交替,从此开启全新的交流体验;升为新社区后,曾旧版可用的美化代码均已失效,新版再无美化代码。可能有用户觉得,帖子内容才是重点,不要太倾向于花哨的格式;而暗夜觉得,如果较好的内容加上精美的排版,当属锦上添花;本篇暗夜将为大家分享两组美化代码,轻松制作顶部导航与内容推荐表,让你的帖子与众不同。

 ▷▶  点击➤关注暗夜-每天收获玩机技能  


代码基础说明

美化代码基础是表格,我们通过修改表格参数,实现各种各样的效果。目前小米社区自带表格没有丰富的元素,更别说美化,要用于美化,我们需要更为精细的表格代码。

所以第一件事就是弄清楚表格原理,以及各种控制;一个精细化表格,至少需要包含宽度控制、边框大小、边框颜色、表格背景颜色、表格内文字对齐方式、表格内文字颜色、表格内文字加粗等元素,具体的可参考下面说明。

border-width: 1pt;      边框大小

border-color: rgb(128, 0, 128);  边框颜色

 background: rgb(128, 0, 128); 背景色

text-align: center;   文字左右居中对齐

color: rgb(255, 255, 255);   文字颜色

font-size: 12pt;  文字大小

 font-weight: 700; 文字加粗

弄明白每个代码控制对象,我们在后面的操作的只需要去调整对应位置即可,比如我们调整表格背景色则只需要修改background后面的颜色参数即可,这里的颜色除开RGB模式,也可以采用#000000这类格式,可根据自己喜好灵活运用。

帖子炫彩导航

表格基础的东西说完了,我们现在需要用实例来进行验证。我们先来制作一个炫彩导航,导航就是类似于网站顶部的标签区域,对每个功能进行分类,方便用户快速直达,引导作用。而我们制作的表格导航是插入帖子中,所以首先需要进行功能预设,暗夜就以为本篇帖子开头导航为例进行解读。
我们看到顶部导航为一行里有五个不同颜色的表格,为便于区分,往往第一个导航用较深的颜色,其他四个推荐链接则用浅色便于文字显示。为了每个表格的背景色、文字颜色等都是单独可控,所以我们则定义为“一行五列”,这样就得到了五个框;然后根据前面的元素控制说明对单个列进行背景颜色、文字颜色控制,从而得到如下代码;这里提醒一下,社区超链接文字默认为紫色或者蓝色,所以导航里的背景颜色切勿设为紫色与蓝色,尽量避开颜色冲撞。




下载附件炫彩导航.txt( 1.52 KB )

插入导航方法:打开小米社区网页>进入帖子编辑页面>点击右边“HTML”标签切换到源码>把编好的“炫彩导航代码”插入进来>再次点击“HTML”标签即可看到效果(建议电脑操作,手机上大家可能不习惯)。

添加超链接方法:回到正常的帖子编辑界面>点击编辑器上的超链接按钮>输入超链接文字与网页链接即可。

技巧提示:导航为“一行五列”,所以应当tr统帅全部td,tr表示行,td表示列;如果写成td统帅tr,那就变成“一列五行”;如果需要添加一列,直接复制td下的代码增加在tr内即可。不懂就直接用暗夜提供的代码直接改颜色就好,或者私聊暗夜解决。


模仿商城推荐

做这段内容的启发主要是来自小米网,小米网首页有个推荐栏,所以我们也可以通过表格来模仿类似的效果,不过毕竟不是网页,暗夜只能模仿其形而已。我们先来看看小米网的网页效果,左边是文字链接,右边是图片。

同样由于我们是插入在社区帖子里,所以我们需要考虑帖子整体的美观性,所以暗夜预设左边为6个超链接,右边放图片,左下角放宣传图标,右下角放超链接推荐,效果如下。




下载附件模仿商城代码.txt( 3.52 KB )

步骤一:复制表格代码,然后在社区帖子html编辑模式,把表格代码粘贴,再切换到正常模式即可;如果觉得用代码比较麻烦,也可以直接复制下面表格,然后直接粘贴到帖子,表格优化过,不会出现错乱与变形。

步骤二:在超链接区域插入超链接,在图片区域插入图片;这里注意,插入超链接时,文字切勿过长,文字太长会换行,换行了效果不太好看;右边大图建议尺寸420 x 190,左下角三个小图尺寸建议125 x 65,这是建议尺寸比例,如果需要尺寸放大,建议参考此尺寸。

模仿商城推荐页
汇总,2017暗夜 精华 帖一览表
MIUI隐藏功能获取途径-全解读 
小米社区帖子美化排版技巧
小米MIX2玩机精华帖,搞机必看
小米6全版评测精华帖,成长必看
小米最新资讯一键直达
小米动态推荐
加入小米达人
进入小米商城
社区米粉达人


创意表格文字

表格不仅如此,我们甚至还可以用表格制作漂亮的文字,使你的帖子更与众不同。与其他效果相比制作表格文字的原理更简单,就是填充背景色,我们只需要在一堆格子里,把文字显示部分填充成区别与其他格子的颜色,比如其他框白色,文字蓝色,效果如下所示。




下载附件10x10表格代码.txt( 20.56 KB )

步骤一:
为了效果完美,理论上来说,格子越多文字显示效果越好,本帖为了简化操作,我们在10*10的表格上,填充出M、U两个字母。复制下面这段代码,在社区html编辑模式下插入代码。

步骤二:
从html编辑模式切换正常模式,看到我们现在已经得到了个10*10的表格,为了方便填充,我们需要把文字显示部分用数字标出来,比如M全部用1,U全部用2,这个主要是便于填充颜色时判断我们应该填充哪个格子,因为100个格子,有100行代码,如果没有标注,不便于操作。

步骤三:
点击html切换到代码模式,我们现在就是非常细心认真的操作,首先我们需要把文字颜色代码查出来,比如RGB模式蓝色代码为(5,5,255),然后我们找到数字标注的表格,把background后面的颜色代码改为(5,5,255)即可,把所有标注改为点击html切换到正常模式即可看到效果。把标注了文字的表格填充背景色即可。

表格实例样式

下面暗夜为大家准备了一系列实用表格效果,希望对大家评测、玩机有所帮助,使用方法直接复制下面表格,这个代码已经优化过,不会因复制粘贴而变形。

=================================

段落标题

文字

内容

图1

图2

图3

图4

=================================

段落标题

文字

内容

图1

图2

=================================

文字

内容

图1

图2

图3

图4

=================================

圆点效果

双实线效果-回复后获取代码

虚线效果-回复后获取代码


3D边框效果-回复后获取代码

温馨提示:3D样式、虚线样式、双实线样式表格代码需要回复后下载,感谢大家支持!

以下内容被隐藏,回复本帖后可见

=================================


以上就是暗夜关于表格用于美化社区帖子的所有分享,代码是死的,人是活的,关键看自己需要何种效果,从而调整代码实现;最后提醒一下,本帖采用多种颜色组合,目的是告诉大家表格的丰富性,大家在实际写帖时,应当减少颜色,一帖最多不要超过3种颜色表格。如果大家觉得不错欢迎转发、点赞,写帖整理不易,2018年大家依然多多支持暗夜,支持小米达人!


扫描二维码,手机查看本帖
发表
最新评论 | 正序排列
6 条评论被过滤    只看楼主|楼层直达:
回复