Wikia

Wikia中文

评论1

弹性界面编辑便签

Cal-Boy 2013年12月16日 用户博客:Cal-Boy

“弹性界面”已经发布一段时间了,这里给大家罗列一些编辑小技巧,用于适应新的版面编辑。

"百分比"替换"数值"

关于界面的宽度,百分比将替换数值。比如表格:

之前:

{| style=“width:670px;” |- |Example |}

调整之后:

{| style=“width:100%;” |- |Example |}

只要简单地将“670px”替换成“100%”将解决所有问题。

不过,需要注意的是,百分比必须根据它的第一层版面而调整。如下图所示:

Screen Shot 2013-12-16 at 1.17.52 PM.png

背景页面为1270px(即100%),红色区域为90%即为背景版面的90%,而黑色区域50%即为红色区域的50%。如果背景页面不再是100%,那么红色和黑色区域的宽度都会相应的调整。如果调整红色区域的百分比,那么黑色区域的宽度比例也会有所改变。

同时需要注意的是,如果在代码中添加padding或者border,就必须调整百分比。如果还使用100%,方框就会变大而越界,如下图绿色区域所示:

Screen Shot 2013-12-16 at 1.23.07 PM.png

主页右栏

弹性界面已经将主页右侧的宽度从330px更改为300px。大多数的方框可以设置为“300px”或者“100%”。在低分辨率的状况下,文章页的右侧栏目将移到左侧内容栏的下方。

如果图片册在右方,在编写代码的时候,会被自动设置为300px的宽度;但实际的宽度为310px,所以你需要将宽度调整为290px才不会遮盖图片并且显示正常,如下面红色区域所示:

Screen Shot 2013-12-16 at 1.30.27 PM.png

表格

尽量避免在主页上使用表格。

表格是用来展示数据使用,而不是用于图片的展示。如果将表格用来展示图片或者某种设计,如下图所示,将出现滚动条,非常不美观。

Screen Shot 2013-12-16 at 1.33.45 PM.png

目前表格在弹性界面上的呈现状态并不是非常好。

如果你一定想使用表格展示,可以使用HTML进行修饰,比如:

<div style="margin: 0 auto; text-align: center;"> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div> <div style="display: inline-block;">[[File:Example.jpg|150px|Example]]<br /> Example caption</div>

之后会呈现出这样的效果:

Screen Shot 2013-12-16 at 1.35.12 PM.png

这种方法只建议拥有html高级编程能力的用户使用。

图片和视频

百分比的使用并不适用于图片尺寸的变更,所以请记住:图片依然使用尺寸进行展示,比如“350px”。

在一个600px宽度的区域内,将宽度改成100%并不会让宽度成为600px,而是会变成图片本身的尺寸。

请试图将尺寸调整为屏幕显示的最低尺寸。

如果屏幕能够显示的最低宽度为700px,你插入了一张800px的图片,这张图片在低分辨率的屏幕上将不能正常显示。

标题(Header)

如果你希望在内容栏里面放上标题,一定确保标题的宽度为100%。

百分比并不适用以文件的形式([[File:]]进行呈现的代码适用,比如[[File:Header|100%]]并不适用,这点和图片一样。请使用带有<div>的HTML进行编辑。

如果你希望使用带阴影的标题,一定记得阴影部分也是被算入尺寸之内的。编辑的时候记得不要让阴影部分超出了页面的宽度,如下图所示:

Screen Shot 2013-12-16 at 2.51.09 PM.png

背景分割

如果你不希望分割背景,记得将背景图片的宽度设置为2000px

小于2000px宽度的背景图片在“我的工具”-“界面设计”中将不会显示“split”(分割)。

背景图片的尺寸将由最小限制150KB增大至300KB

更多维基

随机维基