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

一博天下分享 我快乐

大其心,容天下之物,虚其心,爱天下之善,平其心,论天下之事,潜其心,观天下之理,

 
 
 

日志

 
 
关于我

有为有不为,知足知不足,锐气藏于胸,和气浮于面,才气见于事,义气施于人-------大事难事,看担当,逆境顺境,看胸襟,是喜是怒,看涵养,有舍有得,看智慧,是成是败,看坚持。----大其心,容天下之物,虚其心,爱天下之善,平其心,论天下之事,潜其心,观天下之理,定其心,应天下之变。 —一博天下分享 我快乐!

网易考拉推荐

拼图日志详解  

2009-05-20 21:31:43|  分类: 制作专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
拼图日志详解

先看图片、完整日志、及全代码,再往下看全解:

拼图日志详解 - 流星港湾 - .   拼图日志详解 - 流星港湾 - .   拼图日志详解 - 流星港湾 - .
63X223    63X223  49X223
    拼图日志详解 - 流星港湾 - .
             175X1
拼图日志详解 - 流星港湾 - .     拼图日志详解 - 流星港湾 - .      拼图日志详解 - 流星港湾 - .
53X239   53X239    49X238
拼图日志详解 - 流星港湾 - .

30X31 

 

 

 

 

 

 

 

 

 

 

 拼图日志详解 - 流星港湾 - .
       151X58
拼图日志详解 - 流星港湾 - . 拼图日志详解 - 流星港湾 - .

 151X20                  20X20

  拼图日志详解 - 流星港湾 - .

30X31

 

 

 

 

    拼图日志详解 - 流星港湾 - .

 14X7

 

 

 

 

 

 

 拼图日志详解 - 流星港湾 - .

20X20

     多数日志背景是图片叠加式,很容易编辑。

       从左3幅图片可以看出,“寄中秋”这背景是拼贴图形式,并分别以三个版面拼图,又把三个版面合成一体。

       本节将详细讲解各版块的拼贴图片代码。


拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .

 

 

清明祀
拼图日志详解 - 流星港湾 - .

  云霭重重,散雨正稀疏。天际飞鸿,数叶扁舟含烟细。望乡情稠,巧借东风寄甸怀。天涯游子,一澜愁绪.

  花絮叠叠,落叶铺满地。一冢孤坟,乱生春色何人问?绿荫深处,几缕青烟入霄际。慈母墓前,叟父独祭。

            拼图日志详解 - 流星港湾 - .

拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .

<TABLE cellSpacing=0 cellPadding=0 width=640 align=center bgColor=#00008b border=0>
<TBODY>
<TR>
<TD width=175>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width=175 border=0>
<TBODY>
<TR>
<TD vAlign=top background=http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg><IMG height=223 src="http://img.blog.163.com/photo/-iFZIZ6siFDnmxBswwxW6w==/5661306206581620279.jpg" width=63 border=0><IMG height=223 src="http://img.blog.163.com/photo/ysMS86S15a0vluxAOxCPBw==/5661306206581620278.jpg" width=63 border=0><IMG height=223 src="http://img.blog.163.com/photo/5UsH0ai8v_AQ9yytmhwlow==/2315694633398804960.jpg" width=49 border=0></TD></TR>
<TR>
<TD width=175 background=http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg height=450><IMG height=450 src="http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg" width=175></TD></TR>
<TR>
<TD vAlign=bottom width=175 background=http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg height=223><IMG height=223 src="http://img.blog.163.com/photo/et0nfjeASXnzYhifEaIfSw==/3426676366475798878.jpg" width=63 border=0><IMG height=223 src="http://img.blog.163.com/photo/GsIIuZZkHSdFiMjfJ15tLg==/4288271270187061591.jpg" width=63 border=0><IMG height=223 src="http://img.blog.163.com/photo/kGTxfhPkownAYHFa6tRftQ==/3139008940277457546.jpg" width=49 border=0></TD></TR></TBODY></TABLE></TD>
<TD vAlign=top align=middle width=450>
<TABLE cellSpacing=0 cellPadding=0 width=450 bgColor=#f7f7f7 border=0>
<TBODY>
<TR>
<TD width=450 background=http://img.blog.163.com/photo/VzCCn-KsMTukBkyQBAP2ZA==/5661306206581620276.jpg height=31><IMG height=31 src="http://img.blog.163.com/photo/VzCCn-KsMTukBkyQBAP2ZA==/5661306206581620276.jpg" border=0></TD></TR>
<TR>
<TD vAlign=top align=middle width=450>
<TABLE height=785 cellSpacing=0 cellPadding=0 width=340 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left>
<P>&nbsp;</P>
<P>&nbsp;</P>
<CENTER><FONT face=华文行楷 color=#ff0000 size=6>清明祀<BR><IMG src="http://img.photo.163.com/fEnmZ4fJO8kWlHiVsMW2Cw==/301741175035599499.gif" border=0></FONT></CENTER><BR>
<P style="TEXT-INDENT: 2em"><FONT face=宋体 color=#ff0000 size=5>&nbsp; 云霭重重,散雨正稀疏。天际飞鸿,数叶扁舟含烟细。望乡情稠,巧借东风寄甸怀。天涯游子,一澜愁绪.</FONT></P>
<P style="TEXT-INDENT: 2em"><FONT face=宋体 color=#ff0000 size=5>&nbsp; 花絮叠叠,落叶铺满地。一冢孤坟,乱生春色何人问?绿荫深处,几缕青烟入霄际。慈母墓前,叟父独祭。</FONT></P>
<P></P>
<P></P>
<P></P>
<P></P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <IMG src="http://img.photo.163.com/XtlUIBH19sY4DBpM6sZ-Tw==/2762676896415092553.gif" border=0>
</P></FONT></FONT></FONT></FONT></FONT></FONT></FONT>
<P></P>
<P></P></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD vAlign=bottom align=left width=450 height=58><IMG src="http://img.blog.163.com/photo/IeuESaGf1j_aFqv0vHNDaA==/4288271270187061588.jpg" border=0></TD></TR>
<TR>
<TD align=left width="100%" background=http://img.blog.163.com/photo/gRLoYSj_E2HPJ1GxXr47RQ==/4288271270187061586.jpg height=20><IMG src="http://img.blog.163.com/photo/S5tXWXBBrNEFpRnJftZKlA==/4288271270187061587.jpg" border=0> </TD></TR></TBODY></TABLE></TD>
<TD vAlign=top width=26>
<TABLE cellSpacing=0 cellPadding=0 width=26 bgColor=#f7f7f7 border=0>
<TBODY>
<TR>
<TD vAlign=top width=26 background=http://img.blog.163.com/photo/VzCCn-KsMTukBkyQBAP2ZA==/5661306206581620276.jpg height=31></TD></TR>
<TR>
<TD align=left width=26 height=844><IMG height=844 src="http://img.blog.163.com/photo/TJeoT9hsoYGPt8t5bFkK3w==/5661306206581620274.jpg" width=7 border=0></TD></TR>
<TR>
<TD vAlign=top width=26 height=19>
<TABLE height=19 cellSpacing=0 cellPadding=0 width=26 bgColor=#f7f7f7 border=0>
<TBODY>
<TR>
<TD align=left width=26 background=http://img.blog.163.com/photo/gRLoYSj_E2HPJ1GxXr47RQ==/4288271270187061586.jpg height=19><IMG height=19 src="http://img.blog.163.com/photo/gRLoYSj_E2HPJ1GxXr47RQ==/4288271270187061586.jpg" border=0> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

(1):建立一个锁定宽度表格,先看代码及图样,再看详解:

<TABLE cellSpacing=0 cellPadding=0 width=640 align=center bgColor=#00008b border=0>
<TBODY>
<TR>
<TD width=175>

这个表格是用来叠放三个版块用,写日志全版宽度约是750像素,从上面图片可以看出左边版是由3张图贴成=175宽,中间版是用来写日志我设为450宽,右边的版块26宽,我设宽度为width=640是(175+450+26=651)更好锁紧3个版块,cellSpacing=0 是表格四周留空白为0及cellPadding=0是表格的格与格之间空隙为0图片才能紧贴在一起,align=center是表格处于居中,bgColor=#00008b是背景颜色(可以不要),border=0表格为无显示,width=175也就左边贴图的宽度。

(2):贴左边图块后的代码及图样,再看代码详解:

<TABLE cellSpacing=0 cellPadding=0 width=640 align=center bgColor=#00008b border=0>
<TBODY>
<TR>
<TD width=175>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width=175 border=0>
<TBODY>
<TR>
<TD vAlign=top background=http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg><IMG height=223 src="http://img.blog.163.com/photo/-iFZIZ6siFDnmxBswwxW6w==/5661306206581620279.jpg" width=63 border=0><IMG height=223 src="http://img.blog.163.com/photo/ysMS86S15a0vluxAOxCPBw==/5661306206581620278.jpg" width=63 border=0><IMG height=223 src="http://img.blog.163.com/photo/5UsH0ai8v_AQ9yytmhwlow==/2315694633398804960.jpg" width=49 border=0></TD></TR>
<TR>
<TD width=175 background=http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg height=450><IMG height=450 src="http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg" width=175></TD></TR>
<TR>
<TD vAlign=bottom width=175 background=http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg height=223><IMG height=223 src="http://img.blog.163.com/photo/et0nfjeASXnzYhifEaIfSw==/3426676366475798878.jpg" width=63 border=0><IMG height=223 src="http://img.blog.163.com/photo/GsIIuZZkHSdFiMjfJ15tLg==/4288271270187061591.jpg" width=63 border=0><IMG height=223 src="http://img.blog.163.com/photo/kGTxfhPkownAYHFa6tRftQ==/3139008940277457546.jpg" width=49 border=0></TD></TR></TBODY></TABLE></TD>

拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .

在<TD width=175>后又重建了一表格,设width=175宽,vAlign=top是图向顶对齐,height=223是图片高度,当第一格3张图片贴完后要用</TD></TR>结尾转行到下一格,也就是左边图组的中间部,从图片可看到那只是一个线条图片157X1,所以贴图最好同时设宽高<IMG height=450 src="http://img.blog.163.com/photo/h-6puQRYbEOjpJose0xkhA==/5661306206581620280.jpg" width=175>,高height=450就是左、中、右能节全版同高的数字,贴完后还以</TD></TR>转行到下一格,vAlign=bottom是图片向底部对齐。最后要以</TD></TR></TBODY></TABLE></TD>结束转到中间写日志的版面。

(3):贴中间版图块后的代码及图样,再看代码详解:

<TD vAlign=top align=middle width=450>
<TABLE cellSpacing=0 cellPadding=0 width=450 bgColor=#f7f7f7 border=0>
<TBODY>
<TR>
<TD width=450 background=http://img.blog.163.com/photo/VzCCn-KsMTukBkyQBAP2ZA==/5661306206581620276.jpg height=31><IMG height=31 src="http://img.blog.163.com/photo/VzCCn-KsMTukBkyQBAP2ZA==/5661306206581620276.jpg" border=0></TD></TR>
<TR>
<TD vAlign=top align=middle width=450>
<TABLE height=785 cellSpacing=0 cellPadding=0 width=340 border=0>
<TBODY>
<TR>
<TD vAlign=top align=left>
<P>&nbsp;</P>
<P>&nbsp;</P>
<CENTER><FONT face=华文行楷 color=#ff0000 size=6>清明祀<BR><IMG src="http://img.photo.163.com/fEnmZ4fJO8kWlHiVsMW2Cw==/301741175035599499.gif" border=0></FONT></CENTER><BR>
<P style="TEXT-INDENT: 2em"><FONT face=宋体 color=#ff0000 size=5>&nbsp; 云霭重重,散雨正稀疏。天际飞鸿,数叶扁舟含烟细。望乡情稠,巧借东风寄甸怀。天涯游子,一澜愁绪.</FONT></P>
<P style="TEXT-INDENT: 2em"><FONT face=宋体 color=#ff0000 size=5>&nbsp; 花絮叠叠,落叶铺满地。一冢孤坟,乱生春色何人问?绿荫深处,几缕青烟入霄际。慈母墓前,叟父独祭。</FONT></P>
<P></P>
<P></P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <IMG src="http://img.photo.163.com/XtlUIBH19sY4DBpM6sZ-Tw==/2762676896415092553.gif" border=0> </P>
<P style="TEXT-INDENT: 12em"><FONT face=宋体 color=#ff0000 size=4></FONT></P></FONT></FONT></FONT></FONT></FONT></FONT></FONT>
<P></P>
<P></P></TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD vAlign=bottom align=left width=450 height=58><IMG src="http://img.blog.163.com/photo/IeuESaGf1j_aFqv0vHNDaA==/4288271270187061588.jpg" border=0></TD></TR>
<TR>
<TD align=left width="100%" background=http://img.blog.163.com/photo/gRLoYSj_E2HPJ1GxXr47RQ==/4288271270187061586.jpg height=20><IMG src="http://img.blog.163.com/photo/S5tXWXBBrNEFpRnJftZKlA==/4288271270187061587.jpg" border=0> </TD></TR></TBODY></TABLE></TD>

拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .

 

 

清明祀
拼图日志详解 - 流星港湾 - .

  云霭重重,散雨正稀疏。天际飞鸿,数叶扁舟含烟细。望乡情稠,巧借东风寄甸怀。天涯游子,一澜愁绪.

  花絮叠叠,落叶铺满地。一冢孤坟,乱生春色何人问?绿荫深处,几缕青烟入霄际。慈母墓前,叟父独祭。

            拼图日志详解 - 流星港湾 - .

拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .

首先大家可以看当右边版块末放时,版面是不能全并一起的,width=450是中间版的宽度,<TABLE height=785 cellSpacing=0 cellPadding=0 width=340 border=0>的height=785是调节左、中、右同高的数字,<TD vAlign=top align=left>是文字顶对齐及向左对齐,<CENTER>标题居中</CENTER>是居中结束<BR>文字转行,bgColor=#f7f7f7是写日志的背景灰白色。最后还是以</TD></TR></TBODY></TABLE></TD>结束转到右边版块。

(4):贴右边版图块后的代码及图样,再看代码详解:

<TD vAlign=top width=26>
<TABLE cellSpacing=0 cellPadding=0 width=26 bgColor=#f7f7f7 border=0>
<TBODY>
<TR>
<TD vAlign=top width=26 background=http://img.blog.163.com/photo/VzCCn-KsMTukBkyQBAP2ZA==/5661306206581620276.jpg height=31></TD></TR>
<TR>
<TD align=left width=26 height=844><IMG height=844 src="http://img.blog.163.com/photo/TJeoT9hsoYGPt8t5bFkK3w==/5661306206581620274.jpg" width=7 border=0></TD></TR>
<TR>
<TD vAlign=top width=26 height=19>
<TABLE height=19 cellSpacing=0 cellPadding=0 width=26 bgColor=#f7f7f7 border=0>
<TBODY>
<TR>
<TD align=left width=26 background=http://img.blog.163.com/photo/gRLoYSj_E2HPJ1GxXr47RQ==/4288271270187061586.jpg height=19><IMG height=19 src="http://img.blog.163.com/photo/gRLoYSj_E2HPJ1GxXr47RQ==/4288271270187061586.jpg" border=0> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .

 

 

清明祀
拼图日志详解 - 流星港湾 - .

  云霭重重,散雨正稀疏。天际飞鸿,数叶扁舟含烟细。望乡情稠,巧借东风寄甸怀。天涯游子,一澜愁绪.

  花絮叠叠,落叶铺满地。一冢孤坟,乱生春色何人问?绿荫深处,几缕青烟入霄际。慈母墓前,叟父独祭。

            拼图日志详解 - 流星港湾 - .

拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .
拼图日志详解 - 流星港湾 - .

当3版块编完,图片也就锁紧了。width=26是右边版块宽,<TD align=left width=26 height=844>的height=844是调节全版同高。

所以在height=450、height=785、height=844同时加上或减少一个数,版面就会一样高

  评论这张
 
阅读(176)| 评论(24)
推荐 转载

历史上的今天

评论

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

页脚

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