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

雾树芦花的博客

 
 
 

日志

 
 

定位插入的各种代码  

2011-05-15 15:17:27|  分类: 音画教程 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 页面上要在那一个位置插入文字或图片等内容,有三种方法:

第一,是定位标签.

第二,是用表格多行多列,在单元格内插入内容.

第三,是html标签行内套用css语句,设置绝对定位加叠内容.先学习第一种方法定位标签.
  定位标签有二种属性内容及属值:
  定位标签属性内容:水平方向(align)和垂直方向(valign).
  水平方向align有三种属值:left(左对齐),center(居中),right(右对齐).
  垂直方向valign有二种属值:top(靠顶),bottom(靠底)。
定位标签模式:
<DIV 属性内容=属值> 定位标签模式1</DIV>
<p属性内容=属值> 定位标签模式2</p>

 


 



水平方向即左中右的示例:

文字左对齐的代码:
<p align=left>
<font style=font:15pt face=黑体 color=0000ff>
文字左对齐的标签:<p align=left>
</font></P>
显示结果:

文字左对齐的标签:<p align=left>

 


 


文字居中的代码:
<p align=center>
<font style=font:15pt face=黑体 color=0000ff>
文字居中的标签:<p align=center>
</font></P>
  还有下面两条居中标签:
<CENTER>居中标签</CENTER>
<DIV align=center> 居中标签</DIV>

显示结果:

文字居中的标签:<p align=center>

 


 


文字右对齐的代码:
<p align=right>
<font style=font:15pt face=黑体 color=0000ff>
文字右对齐的标签:<p align=right>
</font></P>

显示结果:

文字右对齐的标签:<p align=right>


 


 



垂直方向即靠顶和靠底的示例:

  垂直方向定位靠顶或靠底,可以结合水平方向左中右,构成六种位置指令.代码必须加在表格的列标签<d>中,才有效.一个单元格中只能执行一条指令.
  代码模式:
  
  <TD align=LEFT valign=top>
  ◆<TD 水平方向=左 垂直方=顶>
  (一) 靠顶top的不同水平位置代码:
<TD align=LEFT valign=top>居左靠顶
<TD align=center valign=top>居中靠顶
<TD align=right valign=top>居右靠顶
  (二) 靠底bottom的不同水平位置代码:
<TD align=LEFT valign=bottom>居左靠顶
<TD align=center valign=bottom>居中靠顶
<TD align=right valign=tbottom>居右靠顶

 


 



不同位置插入文字的实例 (一)

  练习做生日图片.设置一张有鲜花作背景的图框,表格分拆为上中下三个单元格,边框粗度设为"0". 第一单元格插入的文字靠顶居左;第二单元插入的文字居中;第三单元格插入的文字靠底居右.代码如下:

<p align="center"> <table border="0" width="640" cellspacing="1"cellpadding="10" height="330" id="table1" background="http://www.photoshop.org.cn/5/JPEG640/091/051_100/DT099_L.jpg" > <tr> <td align=LEFT valign=top height="50"> <FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#00ff00><B> <p >文字</B> </FONT> </P><br> </td></tr> <tr> <td align=center height="200"> <FONT style="FONT-SIZE: 46pt" face=华文行楷 color=#ffff00><B> 文字!</B> </FONT> </P> </td></tr> <tr> <td align=right valign=bottom height="80"> <FONT style="FONT-SIZE: 25pt" face=华文行楷 color=#00ff00><B> 文字<br>20080808</B> </FONT> </td></tr></table></P>

  说明:
  ◆<p align="center">居中标签.
  ◆<table border="0".....cellpadding="10">表格标签,用鲜花图片作背景.
  ◆<td valign=top height="130">第一单元格.加入居左靠顶语句.<
  ◆<td align=center height="200">第二单元格.加入居中语句.
  ◆<td align=right valign=bottom height="80">第三单元格.加入居右靠底语句.
  ◆</td></tr></table></P>表格和图片居中代码的尾标签.


 

 

 

  评论这张
 
阅读(119)| 评论(0)

历史上的今天

评论

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

页脚

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