Mediawiki的边框效果
漂亮的页面布局，离不开各种边框的使用。通过不同样式的边框，可以让不同的内容板块一目了然，有效改进页面的可读性。边框样式的基础实现有两种：
* div边框
* 表格边框
样式控制代码可以直接在mediawiki页面中书写，也可以在CSS文件中统一实现后在wiki页面中调用。
div边框的控制
Margin box 边界盒
Border box 边框盒
Padding box 补白盒
Element box 元素盒
Margin box 边界盒Border box 边框盒Padding box 补白盒Element box 元素盒
wiki.com/wiki/Div]div方式是wiki.com/wiki/Mediawiki]mediawiki页面中最常用的内容板块划分方式。
使用div方式，可以实现灵活的边框控制：
[*]边框色彩
[*]边框粗细
* 边框样式：实线、虚线、点划线、阴影等
以上边框控制参数均可对四边单独控制。如果想进一步控制边框与内部文本、外围文本的间隔距离，请参见CSS的盒状模型中关于padding和margin参数的说明。右图给出了这些参数的控制示意图。
div的控制的控制参数如下：
* width:板块宽度
* background-color:板块底色
边框的基本控制参数如下：
* border:边框宽度 边框样式 边框色彩
所以一般的板块边框代码一般这样书写：
<div style="width:100px;background-color:#FF0000;border:5px solid #FFFFFF;">
测试
</div>
下面是一些样例：（更多边框效果请参见CSS边框效果）
[*]solid单线边框
[*]border:1px solid #808080
常用边框之一，推荐
[*]dashed虚线边框
[*]border:1px dashed #808080
常用边框之一，推荐
[*]double双线边框
[*]border:3px double #808080
常用双线边框之一，推荐
[*]ridge立体边框
[*]border:3px ridge #808080
过宽的边框显得重拙
表格边框的控制
使用
进行边框控制，在样式方面比较好调整，但在多栏布局方面，不容易做到多版块高度一致，出现分栏下边参差不齐的现象。在这方面，利用表格进行多栏高度、宽度统一控制是比较简单的方式。有兴趣的可以参考html表格制作。与
方式相比，单纯html的样式控制要单调一些。因此这里着重说明在表格中结合CSS样式控制排版的方法。
测试内容1
[*]1111
[*]2222
[*]3333
测试内容2
[*]AAAA
[*]BBBB
[*]CCCC
[*]DDDD
上面的例子中混合使用了表格和CSS样式控制，代码如下：
<table width="80%" align="center" style="border:5px solid #E0E0E0;">
<tr>
<td width="50%" valign="top" style="border:1px solid #8080FF;background-color:#E0E0FF;">
测试内容1<hr>
*1111
*2222
*3333
</td>
<td width="50%" valign="top" style="border:1px solid #FF8080;background-color:#FFE0E0;">
测试内容2<hr height="1">
*AAAA
*BBBB
*CCCC
*DDDD
</td>
</tr>
</table>
就以上代码简介如下：
table标签控制：
<table width="80%" align="center" style="border:5px solid #E0E0E0;">
其中width指定表格宽度，align指定水平居中。style中的border指定了整个板块的外边框样式
td标签控制：
<td width="50%" valign="top" style="border:1px solid #FF8080;background-color:#FFE0E0;">
其中width指定单元格的宽度，valign指定了内部文字靠上对齐。style中的border指定了子板块的边框样式及底色。
css样式的控制
各种边框实例
粗线阴影效果。（在IE中为灰色粗边，在Firefox中显示黑框+阴影）|-|width="350" bgcolor="#CCFFFF" valign="top" align="left"|双线立体边框效果asdfasdfasdfasdfasdf右侧栏asdfasdfasdfasdfasdf|}
虚线边框 asdf
Key
大家看怎么样 我认为很好.
static/image/common/sigline.gif
http://img2081.poco.cn/mypoco/myphoto/20110719/00/6035253720110719001855088.png
页:
[1]
