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

太师的博客

学无止境,快乐无限

 
 
 

日志

 
 

定位插入的各种代码  

2012-11-18 18:21:28|  分类: 网海搜寻 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
欢迎您!启步学代码。

(游子学习笔记。 供初学HTML代码的朋友参考)


定位插入的各种代码

  页面上要在那一个位置插入文字或图片等内容,有三种方法:第一,是定位标签.第二,是用表格多行多列,在单元格内插入内容.第三,是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". 第一单元格插入的文字靠顶居左;第二单元插入的文字居中;第三单元格插入的文字靠底居右.代码如下:

<br>
<p align="center">
<table border="0"rules=none width="640" cellspacing="1"cellpadding="10" height="330" id="table1" background="http://www.photoshop.org.cn/5/JPEG640/091/051_100/DT099_L.jpg" border=2>
<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>


  说明:
  ◆<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>表格和图片居中代码的尾标签.

显示结果:

送给春兰妹妹


祝你生日快乐!

大姐冬梅
20080808



  注:  这种多元格表格,边框虽设定为零,但有一些论坛发表时,仍显示出单元格分隔线,用下面不设多元格的方法,也可达到相仿的效果.



<P align=center>
<TABLE id=table1 border=0 cellSpacing=1 cellPadding=10 width=640 background=http://www.photoshop.org.cn/5/JPEG640/091/051_100/DT099_L.jpg height=340>
<TBODY>
<TR>
<TD vAlign=top align=left><FONT style="FONT-SIZE: 25pt" color=#00ff00 face=华文行楷><B>
<P>送给春兰妹妹</P></B></FONT> 
<DIV style="FILTER: glow(color=#000fff, strength=8); WIDTH: 600px" align=center><BR><BR><BR><BR><FONT style="LINE-HEIGHT: normal; FONT-VARIANT: normal; FONT-STYLE: normal; FONT-SIZE: 40pt; FONT-WEIGHT: normal" color=#ffff00 face=隶书>祝你生日快乐!</FONT></DIV><BR><BR><BR>
<DIV align=right valign="tbottom"><FONT style="FONT-SIZE: 25pt" color=#00ff00 face=华文行楷><B>大姐冬梅<BR>20080808</B> </FONT></DIV></TD></TR></TBODY></TABLE></P>


  说明:
  ◆<td align=LEFT valign=top >列标签指令第一行文字居左靠顶语句.
  ◆<DIV align=center style.....>定义居中的第二行特效文字的代码.
  ◆<BR><BR><BR><BR><BR><BR>设置6个空行标签,占用一些位置.
  ◆<DIV align=right valign=tbottom>定义第三行文字居右靠底.

显示结果:

送给春兰妹妹

 




祝你生日快乐!



大姐冬梅
20080808





击点打开html代码浏览器

定位插入的各种代码 - 星系-ZDW. - 太师的博客
  原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编

(为了让更多网友学用html代码制作音画贴,本贴欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢!)

 


您已欣赏本篇日志 定位插入的各种代码 - 星系-ZDW. - 太师的博客定位插入的各种代码 - 星系-ZDW. - 太师的博客。谢谢朋友对我的支持!

 


 

定位插入的各种代码 - 星系-ZDW. - 太师的博客星系-ZDW欢迎您!定位插入的各种代码 - 星系-ZDW. - 太师的博客

  评论这张
 
阅读(43)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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