Mediawiki的边框效果

wangsisi

漂亮的页面布局，离不开各种边框的使用。通过不同样式的边框，可以让不同的内容板块一目了然，有效改进页面的可读性。

边框样式的基础实现有两种：

    * div边框
    * 表格边框

样式控制代码可以直接在mediawiki页面中书写，也可以在CSS文件中统一实现后在wiki页面中调用。

div边框的控制
Margin box 边界盒
Border box 边框盒
Padding box 补白盒
Element box 元素盒

Margin box 边界盒Border box 边框盒Padding box 补白盒Element box 元素盒



[url=http://www.allwiki.com/wiki/Div]div[/url]方式是[url=http://www.allwiki.com/wiki/Mediawiki]mediawiki[/url]页面中最常用的内容板块划分方式。
使用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样式控制，代码如下：

1. <table width="80%" align="center" style="border:5px solid #E0E0E0;">
   
2. <tr>
   
3. <td width="50%" valign="top" style="border:1px solid #8080FF;background-color:#E0E0FF;">
   
4. 测试内容1<hr>
   
5. *1111
   
6. *2222
   
7. *3333
   
8. </td>
   
9. <td width="50%" valign="top" style="border:1px solid #FF8080;background-color:#FFE0E0;">
   
10. 测试内容2<hr height="1">
    
11. *AAAA
    
12. *BBBB
    
13. *CCCC
    
14. *DDDD
    
15. </td>
    
16. </tr>
    
17. </table>

复制代码

就以上代码简介如下：

table标签控制：

1. 
   
2. <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

傲视之道

大家看怎么样 我认为很好.