您好!欢迎你光临用HTML做网页背景_佳人有约!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习园地>>>网页素材>>>用HTML做网页背景
用HTML做网页背景
发表日期:2006/2/24 10:04:00 出处:未知 作者:未知 发布人:maizi1020 已被访问 1339

 

我们先来个简单的一层表格:

1.找到背景图片资源:

    网上有很多网页素材库,找到要用的图片,并找到图片地址就可以了(有关找图片地址,在学习园地中已经发帖说明了)。

这里用:

(相关图片地址为:http://www.vicn.net/UploadFile/2004-4/200442710470330.gif

2.点击按钮:

  点击“查看HTML源代码“前面的小方框,看到有个“对勾”出现,进入HTML编辑方式。

3 粘贴代码:

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" background=http://www.vicn.net/UploadFile/2004-4/200442710470330.gif border=1>
<TBODY>
<TR>
<TD>

这里输入表格的内容

</TD></TR></TBODY></TABLE>

注意:上面代码中用红色标记出的就是图片地址,如果想用别的图片背景,只要用你想用的图片地址把现在标记为红色的地址换掉就可以了。一个简单的图片背景就做好了!

      在图片地址和代码“border=1”中间一定要有空格存在!

代码注解:

<TABLE borderColor=边框颜色代码 border=边框粗细 cellSpacing=单元格间距 cellPadding=单元格边距 width="表格宽度,可以是占屏幕的白分比(1%-100%),也可以是像素值" background=http://www.vicn.net/UploadFile/2004-4/200442710470330.gif >
<TBODY>
<TR>
<TD>

这里输入表格的内容

</TD></TR></TBODY></TABLE>

4  点击按钮

   再点击“查看HTML源代码“前面的小方框,看到“对勾”消失,可以看到如下效果:

这里输入表格的内容

5.鼠标点到表格内,想做什么都行,贴图,贴歌,设置字体,链接

 

下面就讲多层的--大家仔细看看

一。实例:

七个表格套在一起,大家可以举一反三,套他个5个10个的


 

 



 


代码如下:(符号“//”后面是注释)


<CENTER>
<TABLE height=267 cellSpacing=5 borderColorDark=#502f2e cellPadding=0 width="80%" borderColorLight=#985252 background=http://www.vicn.net/UploadFile/2004-4/200443071233119.gif border=1>    
//最外层表格的定义
<TBODY>                              
<TR>
<TD width="100%" height=259>
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#543636 cellPadding=0 width="100%" borderColorLight=#a57372 background=http://www.vicn.net/UploadFile/2004-4/200443071250124.gif border=1>       //第二层表格定义
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 borderColorDark=#a57372 cellPadding=0 width="100%" borderColorLight=#543636 background=http://www.vicn.net/UploadFile/2004-4/200443072033179.gif border=1>    
//第三层表格定义
<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=0 cellPadding=0 width="80%" background=http://www.vicn.net/UploadFile/2004-4/200443071137932.gif border=0>
                                              //第四层表格定义

<TBODY>                                   //表格内容开始

<TR>                                           //换行符
<TD width="100%">                      //内容占满,下面开始是表格的内容
<DIV align=center>                      
//表格内容居中
<TABLE cellSpacing=0 cellPadding=0 width="99%" background=http://www.vicn.net/UploadFile/2004-4/200443072033179.gif border=0>
<TBODY>                                      //第五层表格定义

<TR>
<TD width="100%">
<DIV align=center>                         //居中
<TABLE cellSpacing=5 borderColorDark=#a57372 cellPadding=0 width="80%" borderColorLight=#543636 background=http://www.vicn.net/UploadFile/2004-4/200443071250124.gif border=1>      
//第六层表格定义

<TBODY>
<TR>
<TD width="100%">
<DIV align=center>
<TABLE cellSpacing=5 cellPadding=0 width="100%" background=http://www.vicn.net/UploadFile/2004-4/200443072033179.gif border=0>
<TBODY>                                      //最外层表格定义
<TR>
<TD width="100%">
<P align=center>                            //居中

<IMG src="http://www.vicn.net/UploadFile/2004-4/200443071212420.gif" ></P>
                                                     //下面是表格的最后收尾,千万别忘记哦,html是成对

                                                     //标签语言,有头必然有尾。

</TD></TR></TBODY></TABLE></DIV>         //最内层的表格收尾

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE></DIV>         //..............................

</TD></TR></TBODY></TABLE>                   //最外层的表格收尾

</CENTER>

三。代码详解

第一层代码(最外层)

<TABLE height=267 cellSpacing=5 borderColorDark=#502f2e cellPadding=0 width="80%" borderColorLight=#985252 background=http://www.vicn.net/UploadFile/2004-4/200443071233119.gif border=1>  

详细解释:

☆   height=267       --------最外层表格高度为267像素高(最外面当然是最大咯)

☆   cellapacing=5         ---表格格线的厚度,数值越大,显示就越厚。

☆   borderColorDark=#502f2e      ---表格的边框背光部分的颜色,数值由#00000-#fffff

                                                            这里是暗红色

☆   cellPadding=0          ---表格中文字内容与格线的距离。

☆  borderColorLight=#985252   ---表格边框部分的颜色,这里是亮红色

☆  border=1                            ---表格边框的厚度

☆  background=http://www.vicn.net/UploadFile/2004-4/200443071233119.gif

                                              ---表格背景,这里用的是图片:

第二层代码

<TABLE cellSpacing=5 borderColorDark=#543636 cellPadding=0 width="100%" borderColorLight=#a57372 background=http://www.vicn.net/UploadFile/2004-4/200443071250124.gif border=1>

内容和第一层的相同,也是那么些东东,

背景图片:

第三层背景  //三五七相同

第四层背景      

第五层背景          //三五七相同

第六层背景

最外层背景             //三五七相同


双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

佳人有约 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:麦子.永恒

琼icp备09005167