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

宁静夏

淡之喧嚣,坐拥宁静;舍之奢靡,但享温馨。

 
 
 

日志

 
 

引用 【博客*教程】日记边框代码注解,新手必学   

2013-03-28 22:42:29|  分类: 代码学习 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 


 【博客*教程】日记边框代码注解,新手必学 - 佳人有约【飞飞】 - 网易博客素材、教程、代码基地 

【博客*教程】日记边框代码注解,新手必学 - 佳人有约【飞飞】 - 网易博客素材、教程、代码基地

边框代码注解 (资料来源:网络) 

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

   一、基本代码简介:

<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看一下效果:


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

【博客*教程】日记边框代码注解,新手必学 - 佳人有约【飞飞】 - 网易博客素材、教程、代码基地

 谢谢 腾飞 老师

原创散文 原创文章
原创音画 日记边框
PS教程 U5教程 音画精品 留言祝福
佳人涂鸦 诗歌朗诵 音画教程 边框教程
博客教程 3D教程 F歌曲库 电脑教程
生活常识 点击进入佳人有约博客 分享更多精彩... 原创素材
生日节日素材 精品高清素材 背景人物素材
免欧制图素材 闪字动态素材 音画分割素材 天下美食 精品欣赏
健康保健 值得收藏 FLASH总汇 情感攻略

  评论这张
 
阅读(16)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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