打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
12定位插入的各种代码
定位插入的各种代码
页面上要在那一个位置插入文字或图片等内容,有三种方法:第一,是定位标签.第二,是用表格多行多列,在单元格内插入内容.第三,是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".....cellpadding="10">表格标签,用鲜花图片作背景.
◆<td valign=top height="130">第一单元格.加入居左靠顶语句.<
◆<td align=center height="200">第二单元格.加入居中语句.
◆<td align=right valign=bottom height="80">第三单元格.加入居右靠底语句.
◆</td></tr></table></P>表格和图片居中代码的尾标签.
显示结果:
送给春兰妹妹
祝你生日快乐!
大姐冬梅
20080808
注:  这种多元格表格,边框虽设定为零,但有一些论坛发表时,仍显示出单元格分隔线,用下面不设多元格的方法,也可达到相仿的效果.
说明:
◆<td align=LEFT valign=top >列标签指令第一行文字居左靠顶语句.
◆<DIV align=center style.....>定义居中的第二行特效文字的代码.
◆<BR><BR><BR><BR><BR><BR>设置6个空行标签,占用一些位置.
◆<DIV align=right valign=tbottom>定义第三行文字居右靠底.
显示结果:
送给春兰妹妹
祝你生日快乐!
大姐冬梅
20080808
击点打开html代码浏览器
原创编辑:游子
2005年10月试编 2006年06月改编
2007年04月改编 2008年11月改编
(为了让更多网友学用html代码制作音画贴,本贴欢迎转载.但是.我用了很多时间和精力编写这些资料的,转载时请注意网络上的荣辱公德不要把原创编辑游子的名字改掉。谢谢!)
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
代码入门教程(22)
图片---不同位置插入文字
学习代码01
HTML学习笔记☆定位代码应用
在图片上加入文字的代码
文字显示在图片位置上的控制(房间背景)
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服