HTML单层及多层代码【教程详解】

来源:百度文库 编辑:神马文学网 时间:2024/04/30 06:06:34
完整的HTML帖子由:背景(颜色背景或图片背景)、插图、文章、收尾等元素组成。一层背景(颜色背景或图片背景)即是一层表格,不同背景叠加效果即是不同表格的叠加效果。
例:这是一层的颜色背景:
这层背景的表格代码如下:






例:这是一层的图片背景:
这层背景的表格代码如下:




请仔细看看表格的构成。
表格代码由以下基本元素组成:






表格代码的参数设定及注解:
table表格元素
align=表格的摆放位置元素(水平)可选值为:居中center,左left, 右right
cellspacing=表格格线的厚度元素"0"数值
cellpadding=表格格线内厚度元素"0"数值
bordercolordark=表格边框背光部分的颜色"#000000"(黑色)颜色编码
bordercolorlight=表格边框向光部分的颜色元素"#000000"(黑色)颜色编码
background=表格的背景图片元素"背景图片地址"例如:http://image8.360doc.com/DownloadImg/2010/04/1013/2821439_4.jpg
bgcolor=表格的背景颜色元素"#1C4F1D "
bgcolor(表格的背景颜色元素) 与background(表格的背景图片元素)不能同时使用
width=显示宽度元素"0"数值,接受绝对值(如 500)或相对值(如 80%)
height=显示高度元素"0"数值,接受绝对值(如 500)或相对值(如 80%)
border=表格边框的厚度元素"0"数值,根据需要设置
表格行元素
表格列元素
表格行收尾元素
表格列收尾元素
表格收尾元素
特别注意:用了多少层表格起始代码,后面就要有多少收尾的结束代码。多收尾和少收尾都会造成帖子的不规整。
您若是对此有兴趣,可以将代码复制后,在“音画广场”使用HTML编辑模式或者打开在线HTML编辑器进行试做。

我们所看到用HTML代码编辑的帖子,其实是由一层层表格相套而成。现在,将背景图片链接失效,就能看明白。
输入标题文字

输入文字并排版,换行处务必插入
代码

 
教程中第一层表格的构成代码:







一张表格代码是由表格元素、表格行、表格列构成一组的,其中,表格元素内包含各个表格属性,各个属性可以根据需要设置数值、颜色;更换适合内容的图片为背景等等,由它们来具体地达到设计效果。几组表格代码层层叠套,可增可减,在最上面一层表格上插入图片、文字、音乐、特效等元素,就产生了个性化的美帖。
了解了表格组代码各元素及属性变化,接着再来对插入图片、文字、音乐等内容分析一番,您自己琢磨可以作何种设计,作出个性化的帖子。


输入文字




< FONT文字元素组 face=字体元素= 楷体_GB2312字体属性 color颜色元素=#EFEDEA颜色属性 size字号元素=4字号属性>
建议您将图片元素组与文字元素组可调节的属性,用“在线HTML编辑器”对蓝色代码进行更换图片、改变颜色、字体、字号等调试,以便熟悉和掌握设计这部分体现个人审美风格和理念的帖子核心部分。
请看例题的完整页面:

输入标题文字

输入文字并排版,文字换行务必插入
字符进行分行。
例如:闲坐屏前敲五笔
感时键上造诗篇
显示为:
闲坐屏前敲五笔
感时键上造诗篇

请看这张页面的代码:(适合1024*768分辨率设置,文字居中型代码)

代码分析:

居中















输入标题文字




输入文字并排版




 
一组代码是由起始代码与结束代码组成,例如:








红色为起始代码,蓝色为结束代码,请注意排列组合次序。其他代码组不一一解释,还是让您在实践中自己思考,加深理解和掌握。
您若是对此有兴趣,可以将代码复制后,打开:在线HTML编辑器  进行试做。