hostease主机优惠

Mediawiki中文技术论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 7472|回复: 1

Mediawiki的边框效果

[复制链接]
发表于 2010-12-28 16:56:27 | 显示全部楼层 |阅读模式
美国主机侦探
漂亮的页面布局,离不开各种边框的使用。通过不同样式的边框,可以让不同的内容板块一目了然,有效改进页面的可读性。

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

    * 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. <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


回复

使用道具 举报

发表于 2011-8-23 18:52:06 | 显示全部楼层
RAKsmart美国服务器
大家看怎么样 我认为很好.













回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

美国主机评测网站

Archiver|手机版|小黑屋|Mediawiki中文技术论坛

GMT+8, 2021-3-3 15:40 , Processed in 0.073664 second(s), 15 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表