分享

HTML学习笔记★颜色边框制作

 吉祥如意988 2014-06-13

       制作精美的装饰边框,将文字、图片、动画、音乐组合在一起展现在日志中,能让日志鲜活生动起来令人赏心悦目。

一、单层简易表格框制作:

代码:
<TABLE width=宽度 height=高度 border=1>
<TBODY>
<TR>
<TD>插入内容</TD></TR></TBODY></TABLE>
 
二、多层简易表格框制作:
 
代码:
<TABLE width=宽度 height=高度 border=1>
<TBODY>
<TR><TD>插入内容</TD></TR></TBODY></TABLE>
将以上代码复制后,根据需要在“<td>插入内容</td>”处粘贴,需要几层就重复粘贴几次。
 

三、表格的背景颜色

       1、单层表格框纯色背景(bgcolor=#颜色编码       

代码:
<TABLE width=宽度 height=高度 border=1>
<TBODY>
<TR><TD>插入内容</TD></TR></TBODY></TABLE>
在代码<TABLE ...... border=1>中的......位置加bgColor=#efef8f。
 

        2、多层表格框纯色背景
       
在每层框的代码<TABLE ...... border=1>中的......位置加bgColor=#颜色编码,并加宽每层框之间的距离:cellSpacing=10。
 
   
       3、单层渐变色
 

代码:

<TABLE style="FILTER: progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#EFEF8F,endColorstr=#9CE2AA); WIDTH: 600px; HEIGHT: 100px" borderColor=#62e16f height=100 cellSpacing=5 cellPadding=15 width=600 align=center border=3>

<TBODY>
<TR>
<TD>文章正文</TD></TR></TBODY></TABLE>

 
       4、多层表格框渐变色
 
 

  

四、表格的边框颜色

       1、四边同一颜色(borderColor=#颜色编码)

在代码<TABLE ...... border=1>中的......位置加borderColor=#ff00ff

        2、宽、高对边的颜色(borderColorLight=#颜色编码,外框线上左,内框线下右、borderColorDark=#颜色编码,外框线下右,内框线上左)
 
 
 在代码<TABLE ...... border=5>的......位置加borderColorLight=#e01616  borderColorDark=#06324f 
 
        3、四边各边不同颜色表格框
 
 在代码<TABLE style="...;...">中;后加BORDER-RIGHT: #颜色编码 solid; BORDER-TOP: #颜色编码 solid;BORDER-LEFT: #颜色编码 solid;BORDER-BOTTOM: #颜色编码 solid; 
 

    五、表格边框的样式 

       none无边框、hidden隐藏、dotted点状、dashed虚线、solid实线、double双线、groove凹槽、ridge垄状、inset 3D内嵌式、outset 3D外嵌式。 

顶部double双线 

左边solid实线                                                     右边dotted点状

 底部dashed虚线

       边框样式代码:     

<TABLE style="BORDER-RIGHT: #ff00ff 7px dotted; BORDER-TOP: #ff0000 7px double; FILTER: progid:DximageTransform.Microsoft.gradient(gradientType=1,startColorstr=#eFeF8F,endColorstr=#9Ce2AA); BORDER-LEFT: #0000ff 7px solid; WIDTH: 525px; BORDER-BOTTOM: #aa0000 7px dashed; HEIGHT: 39px" cellSpacing=1 cellPadding=3 width=525 align=center bgColor=#efef8f border=7>
<TBODY>
<TR>
<TD>
<P> </P>
<P> </P></TD></TR></TBODY></TABLE>
</body></html>

 欢迎语素材 - 吉祥如意988 - 

http://jxry988.360doc.com 吉祥如意988-360doc个人图书馆 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多