分享

教您制作画轴边框

 春天没来 2013-08-27
教您制作画轴边框

内容处

代码:
<table title=" *精美边框* " border="0" cellSpacing="0" borderColor="#000000" cellPadding="0" width="650">
<tbody>
<tr>
<td height="45" background="
http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_4.gif" width="45"></td>
<td height="45" background="
http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_5.jpg"></td>
<td height="45" background="
http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_6.gif" width="45"> </td></tr>
<tr>
<td width="45"></td>
<td>
<table border="0" cellSpacing="25" cellPadding="0" width="100%" background="
http://image55.360doc.com/DownloadImg/2012/09/0818/26704338_140">
<tbody>
<tr>
<td>
<table title="*精美边框*" border="1" cellSpacing="10" borderColor="#e5aa7a" cellPadding="0" width="100%" background="
http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_8.gif">
<tbody>
<tr>
<td>
<table title="*精美边框*" border="0" cellSpacing="0" borderColor="#e5aa7a" cellPadding="0" width="100%" bgColor="#000000">
<tbody>
<tr>
<td>
<p align="center"><font style="font-size: 29px;" color="#00ff00"><strong>内容处</strong></font> </p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>
</td>
<td width="45"></td></tr>
<tr>
<td height="45" background="
http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_4.gif" width="45"></td>
<td height="45" background="
http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_5.jpg">
<td height="45" background="
http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_6.gif" width="45">
</td></tr></tbody></table>
制作说明:
一、制作思路:
画轴是由三个图片组成的,这三个图片必须放置在同一行。因此,制作画轴边框,我们应设置一个一行三列的表格。
表格第一行和第三行的三个单元格中,各放置一个组成画轴的图片。
表格的第二行中,第一和第三单元格是空单元格,第二个单元格中应放入一个表格,以便放置网页的内容。为了使网页美观,第二个单元格中放入的表格可以是多重表格。
二、一种效果可以有几种不同的设置方法:
方法一:
表格第二行的第二个单元格中把红色的动态图片设置为表格的背景图片。
 

<table title=" *画轴边框* " border="0" cellSpacing="0" borderColor="#000000" cellPadding="0" width="100%">
<tbody>
<tr>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_4.gif" width="45"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_5.jpg"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_6.gif" width="45"> </td></tr>
<tr>
<td width="45"></td>
<td>

<table border="0" cellSpacing="25" cellPadding="0" width="100%" background="http://image55.360doc.com/DownloadImg/2012/09/0818/26704338_140">
<tbody>
<tr>
<td>
<table title="*画轴边框*" border="1" cellSpacing="10" borderColor="#e5aa7a" cellPadding="0" width="100%" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_8.gif">
<tbody>
<tr>
<td>
<table title="*画轴边框*" border="0" cellSpacing="0" borderColor="#e5aa7a" cellPadding="0" width="100%" bgColor="#000000">
<tbody>
<tr>
<td>
<p align="center"><font style="font-size: 29px;" color="#00ff00"><strong>内容处</strong></font> </p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>

</td>
<td width="45"></td></tr>
<tr>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_4.gif" width="45"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_5.jpg">
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_6.gif" width="45">
</td></tr></tbody></table>



方法二:
表格第二行的第二个单元格中用段落的外边矩显示红色的背景图片。
 

<table title=" *画轴边框* " border="0" cellSpacing="0" borderColor="#000000" cellPadding="0" width="100%">
<tbody>
<tr>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_4.gif" width="45"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_5.jpg"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_6.gif" width="45"> </td></tr>
<tr>
<td width="45"></td>
<td background="http://image55.360doc.com/DownloadImg/2012/09/0818/26704338_140">
<p style="margin: 20px;">
<table title="*画轴边框*" border="1" cellSpacing="10" borderColor="#e5aa7a" cellPadding="0" width="100%" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_8.gif">
<tbody>
<tr>
<td>
<table title="*画轴边框*" border="0" cellSpacing="0" borderColor="#e5aa7a" cellPadding="0" width="100%" bgColor="#000000">
<tbody>
<tr>
<td>
<p align="center"><font style="font-size: 29px;" color="#00ff00"><strong>内容处</strong></font> </p></td></tr></tbody></table></td></tr></tbody></table></p></td>
<td width="45"></td></tr>
<tr>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_4.gif" width="45"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_5.jpg">
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_6.gif" width="45">
</td></tr></tbody></table>



方法三:
表格第二行的第二个单元格用设置表格间距的方法显示红色的动态图片。
 

 <table title=" *画轴边框* " border="0" cellSpacing="0" borderColor="#000000" cellPadding="0" width="100%">
<tbody>
<tr>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_4.gif" width="45"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_5.jpg"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_6.gif" width="45"> </td></tr>
<tr>
<td width="45"></td>
<td>
<table border="0" cellSpacing="25" cellPadding="0" width="100%" background="http://image55.360doc.com/DownloadImg/2012/09/0818/26704338_140">
<tbody>
<tr>
<td>
<table title="*画轴边框*" border="1" cellSpacing="10" borderColor="#e5aa7a" cellPadding="0" width="100%" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_8.gif">
<tbody>
<tr>
<td>
<table title="*画轴边框*" border="0" cellSpacing="0" borderColor="#e5aa7a" cellPadding="0" width="100%" bgColor="#000000">
<tbody>
<tr>
<td>
<p align="center"><font style="font-size: 29px;" color="#00ff00"><strong>内容处</strong></font> </p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td>
<td width="45"></td></tr>
<tr>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_4.gif" width="45"></td>
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_5.jpg">
<td height="45" background="http://image63.360doc.com/DownloadImg/2013/08/1120/34425973_6.gif" width="45">
</td></tr></tbody></table>



“春天没来”编撰
2013年8月28日于北京

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多