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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML <fieldset> 标签应用三(启野独立创作—本末倒置)  

2011-03-18 20:48:58|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

HTML

<fieldset> 标签应用三

 

HTML <fieldset> 标签的本末倒置博文简介

 

 

 

HTML <fieldset> 标签的本末倒置

——HTML <fieldset>标签中标题的对齐方式

 

创作思路:

相对于文本边框而言,HTML <fieldset>标签中标题的对齐方式最明显的的是标题上左角、标题上居中、标题上右角,想把HTML <fieldset>标签中标题放在文本边框的底部作为特效处理,相当于页面的页脚效果。

查找所有网站,没有找到这样的制作代码,于是我想到我曾经创作过《用一张透明角隅图片做角隅边框的代码》时,用过水平垂直滤镜翻转。联想用水平垂直滤镜翻转到这里试着来制作,但没有加载的地方,我通过让HTML <TABLE>标签透明表格嵌套HTML <fieldset> 标签,在<td>标签内加载Filter:FlipV翻转形成,让HTML <fieldset>标签本末倒置。由三种标题形式变为六种。

HTML <fieldset> 标签的标题形式:

原本标题:标题上左角、标题上居中、标题上右角

创作标题:标题下左角、标题下居中、标题下右角

 

相关属性:

1align 属性规定<fieldset>标签中标题的对齐方式

语法:<legend align="value">属性值

值的描述:

left   对标题进行左对齐。

right   对标题进行右对齐。

center  对标题进行居中齐。

top   对标题进行上对齐。

bottom  对标题进行下对齐。

2FlipCSS滤镜的翻转属性:

FlipH代表水平方向翻转

FlipV代表垂直方向翻转

它们的原理都是制作一个镜像,然后让指定元素在水平或垂直方向实现翻转。它们的表达式很简单,分别是:

Filter:FlipH

Filter:FlipV

 

备注:

当代码在运用的过程中不能翻转,一定是自己的代码中的标点符不是英文标点符号,及时替换过来。

 HTML fieldset 标签应用三(启野独立创作—本末倒置) - qy-0824 - 启野的博客

 

1、制作过程:

相关设置详细说明

 

制作用的基本代码:

1HTML <TABLE>标签透明表格代码

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD>文本编辑</TD></TR></TBODY></TABLE>

2HTML <fieldset>标签代码

<form>

  <fieldset>

    <legend>标题文本</legend>

    文本编辑

  </fieldset>

</form>

3)垂直方向翻转代码

style="FILTER: FlipV"

 

制作步骤:

第一步:把HTML <fieldset>标签代码嵌套在HTML <TABLE>标签内。

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD><form>

  <fieldset>

    <legend>标题文本</legend>

    文本编辑

  </fieldset></TD></TR></TBODY></TABLE>

 

第二步:垂直方向翻转代码嵌套在<TD>标签内。

使整个HTML <fieldset>标签垂直翻转了,但编辑文字倒立。

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD style="FILTER: FlipV"><form>

  <fieldset>

    <legend>标题文本</legend>

    文本编辑

  </fieldset></TD></TR></TBODY></TABLE>

 

第三步:再次把垂直方向翻转代码嵌套在<legend>标签内。

这样对标题文本就相当于两次垂直翻转,显示正常。但文本编辑仍然倒立。

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD style="FILTER: FlipV"><form>

  <fieldset>

    <legend style="FILTER: FlipV">标题文本</legend>

    文本编辑

  </fieldset></TD></TR></TBODY></TABLE>

 

第四步:复制<legend style="FILTER: FlipV">标题文本</legend>,粘贴在文本编辑这四个字的中间。

由于文字无法翻转,借用<legend>标签,在文本编辑加入的标题文本正确,但文本编辑仍然倒立。

 

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD style="FILTER: FlipV"><form>

  <fieldset>

    <legend style="FILTER: FlipV">标题文本</legend>

    文本<legend style="FILTER: FlipV">标题文本</legend>编辑

  </fieldset></TD></TR></TBODY></TABLE>

 

第五步:把“文本、编辑”看做头和尾改成任意翻转不影响效果的中文特殊符号或小图形,在这里我用“·”代替。

看看是不是显示正常了,要小心不要把“·”删除。

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>

<TBODY>

<TR>

<TD style="FILTER: FlipV"><form>

  <fieldset>

    <legend style="FILTER: FlipV">标题文本</legend>

    ·<legend style="FILTER: FlipV">标题文本</legend>·

  </fieldset></TD></TR></TBODY></TABLE>

 HTML fieldset 标签应用三(启野独立创作—本末倒置) - qy-0824 - 启野的博客

 

HTML基本代码

 

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="FILTER: FlipV"><form>
  <fieldset>
    <legend style="FILTER: FlipV">标题文本</legend>
    ·<legend style="FILTER: FlipV">标题文本</legend>·
  </fieldset></TD></TR></TBODY></TABLE>

 HTML fieldset 标签应用三(启野独立创作—本末倒置) - qy-0824 - 启野的博客

示例

 
 

 

第一步范例:(嵌套的表格)
在此为了看出嵌套的关系,首先把border设为border=1,在应用中border设为border=0。
 

标题文本文本编辑

 

第二步范例:(HTML <fieldset>标签垂直翻转,标题文本和文本编辑倒立)
 

标题文本文本编辑

 第三步范例:(标题文本显示正常,文本编辑倒立)

 

标题文本文本编辑

 

第四步范例:(在文本编辑加入的标题文本正确,但文本编辑仍然倒立。)
 

标题文本文本标题文本编辑

 

第五步范例:(文本、编辑用“·”代替。)

 

标题文本·标题文本·

 

 

 HTML fieldset 标签应用三(启野独立创作—本末倒置) - qy-0824 - 启野的博客

2、HTML <fieldset> 标签的标题形式

相关设置详细说明

 

HTML <fieldset> 标签的标题形式:

原本标题:标题上左角、标题上居中、标题上右角

创作标题:标题下左角、标题下居中、标题下右角

 

标题文本居左、居中、居右用align 属性:

语法: <legend align="value">

值:

left   对标题进行左对齐。(默认居左,可以不出现)

right   对标题进行右对齐。

center  对标题进行居中齐。

 

标题文本居文本框上下属性用垂直翻转滤镜

语法:style="FILTER: FlipV

用法参看上述制作。

 

HTML fieldset 标签应用三(启野独立创作—本末倒置) - qy-0824 - 启野的博客

HTML基本代码

1、原本标题:标题上左角代码:(原基本代码)

<form>
  <fieldset>
    <legend>标题文本</legend>
    文本编辑
  </fieldset>
</form>

2、原本标题:标题上居中代码:

<form>
  <fieldset>
    <legend align=center>标题文本</legend>
    文本编辑
  </fieldset>
</form>

3、原本标题:标题上右角代码:

<form>
  <fieldset>
    <legend align=right>标题文本</legend>
    文本编辑
  </fieldset>
</form>

4、创作标题:标题下左角代码:

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="FILTER: FlipV"><form>
  <fieldset>
    <legend style="FILTER: FlipV">标题文本</legend>
    ·<legend style="FILTER: FlipV">标题文本</legend>·
  </fieldset></TD></TR></TBODY></TABLE>

5、创作标题:标题下居中代码:

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="FILTER: FlipV"><form>
  <fieldset>
    <legend style="FILTER: FlipV" align=center>标题文本</legend>
    ·<legend style="FILTER: FlipV">标题文本</legend>·
  </fieldset></TD></TR></TBODY></TABLE>

6、创作标题:标题下右角代码:

<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="FILTER: FlipV"><form>
  <fieldset>
    <legend style="FILTER: FlipV" align=right>标题文本</legend>
    ·<legend style="FILTER: FlipV">标题文本</legend>·
  </fieldset></TD></TR></TBODY></TABLE>

 

HTML fieldset 标签应用三(启野独立创作—本末倒置) - qy-0824 - 启野的博客

示例

 

1、原本标题:标题上左角示例:

 

标题文本文本编辑

 

2、原本标题:标题上居中示例:

 

标题文本文本编辑

 

3、原本标题:标题上右角示例:

 

标题文本文本编辑

 

4、创作标题:标题下左角示例:

 

标题文本·标题文本·

 

5、创作标题:标题下居中示例:

 

标题文本·标题文本·

6、创作标题:标题下右角示例:

 

标题文本·标题文本·

 

 

 

HTML fieldset 标签应用三(启野独立创作—本末倒置) - qy-0824 - 启野的博客

欢迎光临启野博客!
  评论这张
 
阅读(2081)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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