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

 
 
 

日志

 
 

怎么做文字显示位置的控制  

2010-04-09 23:17:54|  分类: 博客技巧 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

文字显示位置分别为:

水平方向(align),垂直方向(valign)

水平方向即左中右:

left(左对齐)

center(居中)

RIGHT(右对齐)

垂直方向即靠顶和靠底.

top(靠顶)、bottom(靠底)等。

一.  水平方向即左中右的代码:

<p align=left>

<font style=font:15pt face=黑体 color=fff000>向左对齐</font></P>

<p align=CENTER>

<font style=font:15pt face=黑体 color=fff000>表示居中</font></P>

<p align=RIGHT>

<font style=font:15pt face=黑体 color=fff000>向右对齐</font></P>

二.  靠顶和靠底的代码:

垂直方向valign)靠顶的代码:

<TD align=LEFT valign=top>居左靠顶</TD>

<TD align=center valign=top>居中靠顶</TD>

<TDalign=RIGHT valign=top>居右靠顶</TD>

垂直方向valign)靠底的代码:

<TD align=LEFT valign=bottom>居左靠底</TD>

<TD align=center valign=bottom>居中靠底</TD>

<TD align=RIGHT valign=bottom>居右靠底</TD>

文字输出位置垂直方向的代码是设置在一张空表格的单元格里(TD)和(/TD),方便易用。

实例如下:

<CENTER>

<TABLE width=480 height=320 bordercolor=olive background=http://sucai.heima.com/sucai/news/bg/59.jpg border=18>

<TR>

<TD>

<TABLE width=460 height=320 bordercolor=olive border=0>

<TR>

<TD align=LEFT valign=top height=80><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>

居左靠顶的代码<BR><h3>align=LEFT valign=top</h3></B></FONT></TD></TR>

<TR>

<TD align=center valign=top height=160><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>

居中靠顶的代码<BR><h3>align=center valign=top</h3></B></FONT></TD></TR>

<TR>

<TD align=RIGHT valign=bottom height=80><FONT style="FONT-SIZE: 12pt" face=黑体 color=#fff000><B>

居右靠底的代码<BR><h3>align=RIGHT valign=bottom</h3></B></FONT>

</TD></TR></TABLE>

 说明:

◇垂直方向设置必须在表格的单元格里(TD)和(/TD)。

◇本实例在图框内插入一张空表格,分为三横排。

◇根据各行插入内容设置高度。

◇在一张表格中,设置每一行的关键语句。

行的开始标签:

<TR>

<TD align=center valign=top height=160>

插入内容

行的结束标签:

</TD></TR>

代码命令注解:

一、字体语法:   

  align=center  字体居中

  align=right  字体居右

  align=left  字体居左

  align=up  字体居上

  align=down  字体居下

  <font color=ff000>...</font>  字体颜色 

  face=华文行楷  表示字体

  <font style=font:30pt face=新宋体 color=#ff0000>文字</font>

     font:30pt  数值大文字就大

        <font size=1>...</font>  最小字体

  <font size=7>...</font>  最大字体

        <h1>...</h1>  标题字(最大 )   

  <h6>...</h6>  标题字(最小)

        <b>...</b> 粗体字   

  <strong>...</strong>  粗体字(强调)   

  <i>...</i>  斜体字     

  <em>...</em>  斜体字(强调)   

        <big>...</big> 字体加大

        <marquee>...</marquee>  移动字体(走马灯)

        <dfn>...</dfn>  斜体字(表示定义)     

  <u>...</u>  底线   

  <ins>...</ins>  底线(表示插入文字)   

  <strike>...</strike>  横线   

  <s>...</s>  删除线   

  <del>...</del> 删除线(表示删除)   

  <kbd>...</kbd>  键盘文字   

  <tt>...</tt>  打字体   

  <xmp>...</xmp  固定宽度字体(在文件中空白、换行、定位功能有效)   

  <plaintext>...</plaintext>  固定宽度字体(不执行标记符号)   

  <listing>...</listing>  固定宽度小字体   

  <font style ="font-size:100px">...</font>  无限增大

二、区断标记:   

  <hr>  水平线   

  <hr size="9"  水平线(设定大小)   

        <hr width="80%">  水平线(设定宽度)   

  <hr color="ff0000">  水平线(设定颜色)  

  <br> (换行)   

        &nbsp;  空格命令  

        <nobr>...</nobr>  (不换行)   

  <p>...</p> (段落)   

  <center>...</center>  置中  <!>连结格式   

  <base href=地址>  (预设好连结路径)   

  <a href=地址></a>  外部连结   

  <a href=地址 target="_blank"></a>  外部连结(另开新窗口)   

  <a href=地址 target="_top"></a>  外部连结(全窗口连结)   

  <a href=地址 target="页框名"></a>  外部连结(在指定页框连结)   

三、贴图/音乐:   

  <img src=图片地址>  贴图  

  <img src=图片地址 width="180">  设定图片宽度   

  <img src=图片地址 height="30">  设定图片高度   

  <img src=图片地址 alt="提示文字">  设定图片提示文字   

  <img src=图片地址 border="1">  设定图片边框   

  <bgsound src=MID音乐文件地址>  背景音乐设定

  <body background="背景图片地址">  贴背景

  <body bgcolor="#ff0000">  设定背景颜色

  <embed src="flash地址" width="宽度" height="高度">  贴Flash图

  <img dynsrc="影视文件地址" width="宽度" height="高度" start=mouseover>  贴影视

  <iframe src="相关地址" width="宽度" height="高度"></iframe>  贴网页

  <A href="对方网址">写文字   文字连接

  <a href="对方网址"><IMG src="图片地址" border=0>  图片连接

  <DIV><FONT face=黑体 color=#ff0000 size=4> <A href="对方网址">文字</DIV>  彩色文字连接

  <P align=center><FONT color=#0066ff face=华文行楷 size=5>插入文字</FONT></P>设定文

四、滑动语法:

  <marquee>...</marquee>普通滑动   

  <marquee behavior=slide>...</marquee>滑动   

  <marquee behavior=scroll>...</marquee>预设卷动   

  <marquee behavior=alternate>...</marquee>来回滑动    

  <marquee direction=down>...</marquee>向下滑动   

  <marquee direction=up>...</marquee>向上滑动   

  <marquee direction=right></marquee>向右滑动     

  <marquee direction=left></marquee>向左滑动   

  <marquee loop=2>...</marquee>滑动次数   

  <marquee width=180>...</marquee>设定宽度   

  <marquee height=30>...</marquee>设定高度   

  <marquee bgcolor=FF0000>...</marquee>设定背景颜色   

  <marquee scrollamount=2>...</marquee>设定滑动速度数值   

  <marquee scrolldelay=200>...</marquee>设定滑动时间 

    <marquee scrolldelay=300 scrollamount=100>插入文字</marquee>滑动停顿

    <body background="背景图片地址" body bgproperties=fixed>固定背景不随滚动条滚动

五.表格语法:   

  <table aling=left>...</table>表格位置,置左   

  <TABLE aling=center>...</table>表格位置,置中   

  <table background=图片路径>...</table>背景图片的URL=就是路径网址   

  <table border=边框大小>...</table>设定表格边框大小(使用数字)  

  <table bgcolor=颜色码>...</table>设定表格的背景颜色   

  <table borderclor=颜色码>...</table>设定表格边框的颜色 

  <table borderclordark=颜色码>...</table>设定表格暗边框的颜色   

  <table borderclorlight=颜色码>...</table>设定表格亮边框的颜色   

  <table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)   

  <table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)   

  <table cols=参数>...</table>指定表格的栏数   

  <table frame=参数>...</table>设定表格外框线的显示方式   

  <table width=宽度>...</table>指定表格的宽度大小(使用数字)   

  <table height=高度>...</table>指定表格的高度大小(使用数字)   

  <td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)   

  <td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)   

  <!>分割窗口   

  <frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整   

  <frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整   

  <frameset cols="20%,*">分割左右两个框架   

  <frameset cols="20%,*,20%">分割左中右三个框架   

  <分割上下两个框架   

  <frameset rows="20%,*,20%">分割上中下三个框架   

  <! - - ... - -> 批注   

  <A HREF TARGET> 指定超级链接的分割窗口   

  <A HREF=#锚的名称> 指定锚名称的超级链接   

  <A HREF> 指定超级链接   

  <A 被连结点的名称   

  <ADDRESS>....</ADDRESS> 用来显示电子邮箱地址

 

 

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

历史上的今天

评论

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

页脚

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