MSN Space进入稳定期.能够在Space应用的东西,也基本定型...
下面介绍几种利用信纸图片,来更加丰富日志内容的方法.
如果懂得HTML语言/懂得利用网页编辑软件,就没有必要看下面的内容了.
下面的内容是针对不懂HTML语言的朋友们做的.
基本上是以复制和更改为主,没有对源码做详细注释.
每种实例都标有复制起点和终点.
只要复制该部分到日志里.做一下简单修改即可. |
|
1.利用<Table>标识的背景图片 |
复制起点
复制终点 |
|
源码： |
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="376" height="600">
<tr>
<td width="100%" background="http://www.ka-ca.com/home/m/data/db/photo/69/92/71/16/11234099450" height="600" valign="top">
<p align="center"><font face="Arial" style="font-size: 9pt">在这里输入文字内容</font>
</td>
</tr>
</table> | |
|
注释： |
|
<table..width="376" height="600">里的宽度(width)和高度(height)的值,一定要和图片的实际宽度和高度相同.
valign="center" : valign-垂直对齐方式, center为默认值-相对居中, top为顶端对齐,bottom为相对底段对齐.
<p align="center">: 水平对齐方式, center为居中,right为右对齐,left为左对齐.
中间红颜色部分为背景图片地址,可以更改为自己的图片地址. |
| |
|
2.利用<Table>标识的背景图片+框内排版 |
复制起点
|
文字或图片 |
文字或图片 |
|
文字或图片 |
文字或图片 |
|
文字或图片 |
文字或图片 | |
复制终点 |
|
注释：这种方式比较复杂.如果有专业编辑软件,可以试一试.因为在日志内直接编辑有很大难度.不做详解. |
| |
|
3.利用<Table>标识的背景图片+滚动框 |
|
有时文字内容很多. 超过了背景图片的范围. 不太好看...那么只好利用滚动框, 把文字内容限制在图片之内. |
复制起点
| |
|
|
| |
1. 文字内容...
2.
3.
4.
5.右对齐文字内容
6.
7. 图片
8.
9.
10.居中文字内容...
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.文字内容... |
|
|
|
| |
复制终点 |
|
源码： |
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="376" id="AutoNumber1" height="514">
<tr>
<td width="100%" background="http://www.ka-ca.com/home/m/data/db/photo/2/72/81/97/11234099451" align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="495">
<tr>
<td width="11%" height="170"> </td>
<td width="78%" height="170"> </td>
<td width="11%" height="170"> </td>
</tr>
<tr>
<td width="11" height="309"> </td>
<td width="78%" height="309">
<div style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: black 0px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: black 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 270px; BACKGROUND-COLOR: transparent">
<div>
<p align="left"><font face="Arial" style="font-size: 9pt">1.
<span lang="zh-cn">文字内容</span>...</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">2.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">3.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">4.</font></p>
<p align="right"><font face="Arial" style="font-size: 9pt">5.<span lang="zh-cn">右对齐文字内容</span></font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">6.</font></p>
<p align="center"><font face="Arial" style="font-size: 9pt">7.<img border="0" src="http://img69.imageshack.us/img69/4432/msnlogo2uw.gif" width="48" height="48"><span lang="zh-cn">图片</span></font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">8.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">9.</font></p>
<p align="center"><font face="Arial" style="font-size: 9pt">10.<span lang="zh-cn">居中文字内容</span>...</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">11.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">12.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">13.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">14.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">15. </font>
</p>
<p align="left"><font face="Arial" style="font-size: 9pt">16.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">17.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">18.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">19.</font></p>
<p align="left"><font face="Arial" style="font-size: 9pt">20.<span lang="zh-cn">文字内容</span>...</font></div>
</div>
</td>
<td width="11" height="309"> </td>
</tr>
<tr>
<td width="11%" height="16"></td>
<td width="78%" height="16"></td>
<td width="11%" height="16"></td>
</tr>
</table>
</td>
</tr>
</table>
| |
|
注释： |
|
这么长的代码,即使懂HTML语言,也很难做分析.所以尽量复制上部的演示部分.
在这里重点解释几个重要组成部分.
1.<table>标识部分：有两套<table>.
外部的<table>是为了添加最底部背景图片.此部分可参考第一个演示注释.
内部的<table>是为了固定滚动框的位置而添加的.
2.<div>部分：也有两套<div>
外部的<div>是滚动框部分.内部的<div>是文字内容部分.
在这里对外部<div>做简单的解释.此部分代码较长. |
| <div style="BORDER-RIGHT: black 0px solid; BORDER-TOP: black 0px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: black 0px solid; WIDTH: 300px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: black 0px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 270px; BACKGROUND-COLOR: transparent"> | |
|
只要记住(红色部分)宽度和高度位置就可以. |
| |
|
注意：不要强求~要根据自己掌握的HTML语言知识.<table>是一个比较复杂的标识.
如果在日志里用得不当,会出现意想不到的结果
如：主页日志内容消失或只显示一半, 模块会出现在应有的位置之外等. |
工具 
帮助
