注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

申根吴角的博客

学无止境,博采众长。

 
 
 

日志

 
 

【引用】边框代码注解  

2012-03-25 21:33:39|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自玉都商人《边框代码注解》

边框代码注解

2009年3月9日   腾飞

(资料来源:网络)

        边框其实就是一种表格。要制作边框或者要调节边框中的具体细节,首先要明确表格语法与表格代码的基本属性。

   一、基本代码简介:

<table>:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符</table>。

   <tbody>:表体的起始符。紧跟在<table>之后,表示表体开始。必须有结尾符,放在</table>之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。

   <tr>:tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。<tr>;紧跟在<tbody>之后。必须有终止符</tr>。

  <td>:td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

  </TD></TR></TBODY></TABLE>:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。 从表格的代码框架分析得出:表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。

   border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。

   cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

   cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框的距离。

   width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。

   height:表格的高度,取值方法同width。提示:如果不是特别需要,建议不用设置表格的高度,系统会根据表格的内容自动设置高度。所谓特别的需要,是指一些特殊的情形下,需要表格的高度精确,比如,当我们通过表格的背景来发一张图片时,如果表格的高度不精确定义,图片就不可能完整或完美地显示。

   bgcolor:表格的背景色。取值方法举例:bgcolor=#ff0000或bgcolor=red。单元格td也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。

   background:表格的背景图。其值为一个有效的图片地址。td也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。

   bordercolor:表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor。

   bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

   bordercolordark:暗边框颜色,当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

   align:表格的对齐方式,值有left(左对齐,默认)、center(居中)以及right(右对齐)。align定义的是表格自身的位置,这是一个很有用的属性。

 

 二、表格语法:

表格语法:

<table aling=left>...</table>表格位置,置左

<TABLE aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割窗口

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架.

三、其它参考:

<TABLE> 表格标记 设定该表格的各项参数  
<CAPTION> 表格标题 做成一打通列以填入表格标题  
<TR> 表格列 设定该表格的列  
<TD> 表格栏 设定该表格的栏  
<TH> 表格标头 相等于<TD>,但其内之字体会变粗  
表单标记
<FORM> 表单标记 决定单一表单的运作模式  
<TEXTAREA> 文字区块 提供文字方盒以输入较大量文字  
<INPUT> 输入标记 决定输入形式  
<SELECT> 选择标记 建立 pop-up 卷动清单  
<OPTION> 选项 每一标记标示一个选项  
图形标记
<IMG> 图形标记 用以插入图形及设定图形属性  
连结标记
<A> 连结标记 加入连结  
<BASE> 基准标记 可将相对 URL 转绝对及指定连结目标  
框架标记
<FRAMESET> 框架设定 设定框架  
<FRAME> 框窗设定 设定框窗  
<IFRAME> 页内框架 于网页中间插入框架
<NOFRAMES> 不支援框架 设定当浏览器不支援框架时的提示

 

                                                  HTML最基本的代码认识

  做音画代码帖首先我们先打破对代码的困惑,而我们最先接触的代码就是

  <table><tr><td>

  <table><tr><td>必须成对出现,缺一不可,

  table这一项是具体的工作场,如吧整个音画做为一出戏,那table就是戏中的舞台

  要是吧整个音画做为一顿美餐。table就是桌子

  tr是拓展工作区域的标识工具。

  td就是舞台上的装饰品

例:代码<table bgcolor=#000066 width=300 height=200><tr><td></td></tr></table>

效果如下:
 

这个代码中多了大家不认得的代码bgcolor。 bgcolor是设置舞台背景色的代码
  </TD></TR></TABLE>这是结束代码
  有多少个
  <TABLE>
  <TBODY>
  <TR>
  <TD>,就有多少个</TD></TR></TBODY></TABLE>而顺序也是刚好相反
  

再看一下另外一个贴 代码为:
  <TABLE height=200 width=500 bgColor=#000066>
  <TBODY>
  <TR>
  <TD align=middle><FONT color=#ff0000 size=6><STRONG>床前明月光,凝是地上霜。<BR>举头望明月,低头思故乡。</FONT></TD></TR></TBODY></TABLE>

效果如下:

        
床前明月光,凝是地上霜。
举头望明月,低头思故乡。

上面这个贴的代码中多了文字代码
  <TD align=middle>时文字得位置。当中。
  align=cneter(居中,align:文字对齐方式的标识),还有一种是right(居右)left(居左),
  <FONT color=#ff0000 size=6>时文字得属性。color=#ff0000 。字得色彩。可以用英文代替。size=6字体大小
  </FONT></TD></TR></TBODY></TABLE>对应的收尾代码。
  我们再看另外一个贴 代码为
<TABLE height=200 width=500 bgColor=#000066><BR>
<TBODY>
<TR>
<TD align=middle><BR><MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光,凝是地上霜。<BR>举头望明月,低头思故乡。 </STRONG></FONT></P></MARQUEE></TD></TR></TBODY></TABLE>
上面这个舞台的代码。已经接近我们一般做帖的代码了。但文字代码多了一个属性:marouee
marouee是文字的移动代码。
scrollamount=3:文字滚动速度,数字越大速度越快
direction=UP: 文字滚动方向,它有四个参数:UP(向上),down(向下),left(向左),right(向右)
height:滚动文本框的高度,width: 滚动文本框的宽度 ,数值多少自已可以定,高度太小了,视觉会很窄,高度太了,字又很少,滚动一次和第二次的间隔会很长,宽度小了字不能完全显示

效果如下:


床前明月光,凝是地上霜。
举头望明月,低头思故乡。


我们上面所有的贴只是在一个舞台上展示。下面我们就来看看变动多一点的舞台看看。

代码为:
<center ><table bgcolor=#000066 width=500 border=10 bordercolor=#EEAD0E height=300> <TBODY>  <tr><td>
<MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光,凝是地上霜。<BR>举头望明月,低头思故乡。 </STRONG></FONT>
  </td></tr> </TBODY></table></center><BR>

效果如下:


床前明月光,凝是地上霜。
举头望明月,低头思故乡。


上面这个代码中多了给音画定位的center(中间)代码。关键是多了这两个代码:border(设定边框宽度)bordercolor(设定边框颜色)。如果我们想让边框理漂亮一点,就要用到这个工具:cellspacing(设定内部细小格线的工具)看一下下面这个舞台设计:


床前明月光,凝是地上霜。
举头望明月,低头思故乡。


上面的边框代码为:
<center ><table bgcolor=#000066 width=500 cellspacing=10 border=10 bordercolor=#EEAD0E height=300> <TBODY>  <tr><td>
<MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光,凝是地上霜。<BR>举头望明月,低头思故乡。 </STRONG></FONT>
  </td></tr> </TBODY></table></center><BR>

    这里我们设的cellspacing=10,你做的时候可以任意更改,想设为多少都行,上面所有的代码我们都没有用到图片,而在我们做音画必不可少的就是图片,我们现在就看看怎样吧色彩代码变为图片代码。我们现在把bgcolor换成background。把色彩代码换成图片链接地址:http://img.blog.163.com/photo/ieJjc4eOJLshbzHI-4DRTg==/3739113590625184963.jpg看一下效果:


床前明月光,凝是地上霜。
举头望明月,低头思故乡。

  评论这张
 
阅读(10)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017