分享

博客美化教程

 yingxiongxy 2011-08-10
      表格标签是做代码贴的基础.编辑音画贴要用表格设置图框,制作网页要用表格设置框架,在网页不同位置显示文字和图片,要用表格来设置位置控制.学习表格设置极为重要,必须多用点精力学习.表格标签属性有十多个内容和参数(属值),先从7个常用的学起,逐步提高.     用表格做图框的背景有颜色的,也有用图片的.启步学做代码贴,最好先用颜色作背景的图框.先练习做一张宽700,高300,绿色背景,蓝色边框的图框如下:.
博客美化教程 - 小英子 -

 

 代码如下:.

1<CENTER>
2<TABLE width=700 height=300 bgcolor=#00FF00 borderColor=#0000ff border=10" cellspacing="3" cellpadding="10">
3<TR>
4<TD>
在这里开始插入文字图片等内容 

5</TD></TR></TABLE></CENTER>
代码的意义和属性说明:

说明:
  第一条标签是居中代码。
  第二条标签是表格的始标签,有七个属性内容和属值.,。
   ·TABLE 标签名称:表格.
   ·width=500 表格(图框)宽度500个点.
   ·height=300 表格(图框)高度300个点,
   ·bgcolor="#00FF00:背景颜色为绿色代码.
   ·borderColor=#0000ff:边框颜色为蓝色.
   ·border=10":边框粗度10个点.
   ·cellspacing="3":单元格间距,就是图框内细线与边框的距离.
   ·cellpadding="10":单元格衬距,就是插入内容与单元格间距细线的距离.
  ◆第三条标签是表格的行标签.
   ◆第四条标签是表格的列标签.
  ◆最后一行是居中和表格的全部尾标签.

 

  如果要用图片作为背景,只要把上面表格标签第二行第三个属性内容,即颜色背景及颜色代码bgcolor=#00FF00改为图片背景及图片地址background="http:.....gif".即可。我在网上找的图片地址是http://img.bimg.126.net/photo/lgpNQz_N6d0FMMAnJfLh8g==/2832482690640700899.jpg在background=""引号中间粘贴上图片地址,粘贴时在代码编辑页面光标切换成英文半角状态才行。在选择彩色图片时,尽量找宽大的图片,否则,网络显示页面的背景图案会有重复现象,在粘贴的网址jpg后面设置好图片的高和宽,单位都是像素,width=100% height=# ,宽一般是100%,这样显示的图片大小恰好和你的日志显示页面一致。用图片作背景的显示效果:

博客美化教程 - 小英子 -

 

 此时,你已经完成了背景设置,无论是单色图片还是彩色图片,你可以切换到文字编辑页面编辑你的文章了,即如下图页面,在此页面,光标要插入到任意一行的句首,也要切换成全角状态,空两格,每一自然段的开始都必须输入回车键才能空两格编辑文字,否则,你点发表日志后的网络生成页面段首不能正常空格.:.
         
博客美化教程(以单一颜色或彩色图片为日志背景) - 小英子 -
博客美化教程(以单一颜色或彩色图片为日志背景) - 小英子 -
 
;

 

 文字编辑页面只能在网络默认的范围内自定义字体的颜色、大小等,如上图,而不能任意自定义,比如文字的任意移动就必须回到原来的代码编辑页面(下图)编辑代码或文字,在此页面空格的方法和上面的一样。.:.
博客美化教程(以单一颜色或彩色图片为日志背景) - 小英子 -
 
 

移动标签名称:marquee
  移动的标签名称成对使用<marquee>移动内容</marquee>
  

博客美化教程(以单一颜色或彩色图片为日志背景) - 小英子 - 各位朋友、各路英雄,欢迎来这里做客、访问博客美化教程(以单一颜色或彩色图片为日志背景) - 小英子 - 各位朋友、各路英雄,欢迎来这里做客、访问博客美化教程(以单一颜色或彩色图片为日志背景) - 小英子 - 各位朋友、各路英雄,欢迎来这里做客、访问博客美化教程(以单一颜色或彩色图片为日志背景) - 小英子 - 各位朋友、各路英雄,欢迎来这里做客、访问博客美化教程(以单一颜色或彩色图片为日志背景) - 小英子 - 各位朋友、各路英雄,欢迎来这里做客、访问 只用移动标签,没有设置其他属性内容时,默认从右向左移动.:.

 > 移动标签的语句说明:
  marquee 移动标签名称.
  scrollamount=# 属性内容速度及属值.属值:#=1 最慢 #=10 较快,参值大速度快.
  direction=# 属性内容方向及属值.
  ▽移动方向属值:left向左移, right向右移,up向上移,down向下移,alternate来回走

.;

文字在图片上向上移动的代码如下:

 

 

1<div align="center">
2<TABLE height=380 width=580 background=http://image33.360doc.com/DownloadImg/2011/08/1021/15598738_6.jpg border=1 cellpadding="20">
3<TR>
4<td align=LEFT valign=top>
5<MARQUEE scrollAmount=1 direction=up width=450 height=150>
6<font face=华文行楷 size=5 color=0000ff><b>
   《梅花落》<BR>
隆冬十二月,寒风西北吹。<BR>
独有梅花落,飘荡不依枝。<BR>
留恋逐霜彩,漫步下冰斯。<BR>
何当与春日,共映芙蓉词。
7</b></FONT></MARQUEE>
</TD></TR></TABLE></DIV>

显示效果如下图:

   《梅花落》
隆冬十二月,寒风西北吹。
独有梅花落,飘荡不依枝。
留恋逐霜彩,漫步下冰斯。
何当与春日,共映芙蓉词。
 
 
 
 
 
 

以上代码说明:1 设置图片的位置,是在显示页面居中位置。

2图片可视为一个表格,即设置的表格的属性

4文字设置的在图片上显示的位置,即在左边,并靠上显示。

5设置的文字在图片上显示的范围即数值是150和450,并是向上移动的,数值1是移动的速度,这些数值都可以变化的。

6是设置的诗文字的属性,即字体的大小,颜色、等。

7是一切代码的尾标签,首尾标签一定要成对,对称使用,否则不行。

<Br>是换行代码,它可以不成对使用,不用尾标签,也不分大小写,不成对使用的代码是很少的。

说明:以上各个图片的属性都是自定义的,在实际操作中可以按照自己的爱好进行修改,如颜色、大小数值、位置、方向等,如果朋友们认为代码很难记住,输入这些代码又很麻烦,其实很简单,你可以把这些固定的代码复制保存起来,或者保存在你的私密日志里,在你写文章时直接复制、粘贴就可以使用了,只不过你要简单的设置一下属性就可以了。

 

以下是我给朋友们附加的关于表格的代码:

1.表格标题
<caption>..........</caption>
表格标题位置 -- align
<caption align="#"> #号可为 top:表标题置于表格上方(预设值)
bottom:表标题置于表格下方
2.定义列 <tr>
3.定义栏位 《1》<td>:靠左对齐
《2》<th>:靠中对齐ⅱ粗体
【1】水平位置 -- align <th align="#">
#号可为 left:向左对齐 center:向中对齐 right:向右对齐
【2】垂直位置 -- align <th align="#"> #号可为
top:向上对齐 middle:向中对齐 bottom:向下对齐
【3】栏位宽度 -- width <th width=点数或百分比>
【4】栏位垂直合并 -- rowspan <th rowspan=欲合并栏位数>
【5】栏位横向合并 -- colspan <th colspan=欲合并栏位数>

1. <table>标记的主要属性
align定义表格的对齐方式,有三个属性值center,left,right
background定义表格的背景图案,属性值为图片的地址
bgcolor定义表格的背景颜色,属性值是各种颜色代码
border定义表格的边框宽度,属性值是数字
bordercolor定义表格边框的颜色,属性值是各种颜色代码
cellpadding定义单元格内容与单元格边框之间的距离,属性值是数字
cellspacing定义表格中单元格之间的距离
height定义表格的高度,属性值是数字
width定义表格的宽度,属性值是数字
2. <tr>标记,表格是由多行与多列组成的,<tr>标记用来定义表格的一行,他的属性极其属性值定义的是表格中的该行,其主要属性与属性值如下:
align定义对齐方式,属性值与上同
background定义背景图案 bgcolor定义背景色
3. <td>标记。用<td>标记概况起来的内容表示表格的单元。其主要属性与属性值和<table>标记的一样,补充两个合并列和行的代码:
colspan定义合并表格的列数,属性值是数字
rowspan定义合并表格的行数,属性值是数字

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

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多