Mediawiki的边框效果
天下维客，你可以修改的网络知识库
| mediawiki的美化 | 使用皮肤扩展 | mediawiki皮肤展示 | 正规风格皮肤集锦 | 原版微调与简约风格 | 优秀风格展示 |
| 天下维客界面 | 页面效果制作 | 边框效果制作 | CSS边框效果展示 | 页面配色:淡彩风格 | 标题效果制作 |
| mediawiki的设置 |
漂亮的页面布局，离不开各种边框的使用。通过不同样式的边框，可以让不同的内容板块一目了然，有效改进页面的可读性。
边框样式的基础实现有两种：
- div边框
- 表格边框
样式控制代码可以直接在mediawiki页面中书写，也可以在CSS文件中统一实现后在wiki页面中调用。
目录 |
[编辑]
div边框的控制
Margin box 边界盒
Border box 边框盒
Padding box 补白盒
Element box 元素盒
div方式是mediawiki页面中最常用的内容板块划分方式。
使用div方式，可以实现灵活的边框控制：
- 边框色彩
- 边框粗细
- 边框样式：实线、虚线、点划线、阴影等
以上边框控制参数均可对四边单独控制。如果想进一步控制边框与内部文本、外围文本的间隔距离，请参见CSS的盒状模型中关于padding和margin参数的说明。右图给出了这些参数的控制示意图。
div的控制的控制参数如下：
- width:板块宽度
- background-color:板块底色
边框的基本控制参数如下：
- border:边框宽度 边框样式 边框色彩
所以一般的板块边框代码一般这样书写：
<div style="width:100px;background-color:#FF0000;border:5px solid #FFFFFF;"> 测试 </div>
下面是一些样例：（更多边框效果请参见CSS边框效果）
常用边框之一，推荐 |
常用边框之一，推荐 |
常用双线边框之一，推荐 |
过宽的边框显得重拙 |
[编辑]
表格边框的控制
使用进行边框控制，在样式方面比较好调整，但在多栏布局方面，不容易做到多版块高度一致，出现分栏下边参差不齐的现象。在这方面，利用表格进行多栏高度、宽度统一控制是比较简单的方式。有兴趣的可以参考html表格制作。
与
方式相比，单纯html的样式控制要单调一些。因此这里着重说明在表格中结合CSS样式控制排版的方法。
|-
|width="350" bgcolor="#CCFFFF" valign="top" align="left"|双线立体边框效果
asdfasdfasdfasdfasdf
测试内容1
|
测试内容2
|
上面的例子中混合使用了表格和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中显示黑框+阴影） |
| 右侧栏
asdfasdfasdfasdfasdf |}
|
