淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。
B型天秤座
2011-03-18 20:45:02| 分类: HTML专区 | 标签: |举报 |字号大中小 订阅
用微信 “扫一扫”
将文章分享到朋友圈。
用易信 “扫一扫”
HTML
<fieldset> 标签
圆角的文本框与博文简介
搜遍整个网络没有制作圆角的文本框代码,如果制作圆角的只有制作透明圆角图片,很繁琐,如若只用代码做圆角,只有运用HTML <fieldset>标签。
HTML <fieldset>标签无法改变改变边框的颜色等属性(如改变颜色属性,则已经不是圆角的了)。虽然网站介绍的很多,但拓展应用的不多,通过自己的时间制作,感觉乐趣无限!启野欢迎与各位爱好者交流!
原代码来源于:w3school 在线教程
HTML代码:
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>
在这里我进行了修改,形成新的代码运用:
用“文本编辑”四个字代替了
用“标题文本”四个字代替了
health information
<form> <fieldset> <legend>标题文本</legend> 文本编辑 </fieldset></form>
请参看下面详细介绍:
定义和用法
HTML基本代码
示例
fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
<fieldset> 标签没有必需的或唯一的属性。
<legend> 标签为 fieldset 元素定义标题。(如不需要可以去掉这个属性)
有标题代码: <form> <fieldset> <legend>标题文本</legend> 文本编辑 </fieldset></form> 无标题代码: <form> <fieldset> 文本编辑 </fieldset></form>
有标题代码:
无标题代码:
<form> <fieldset> 文本编辑 </fieldset></form>
有标题示例:
无标题示例:
align 属性规定
align 属性规定<fieldset>标签中标题的对齐方式
语法
<legend align="value">属性值
值的描述
left 对标题进行左对齐。
right 对标题进行右对齐。
top 对标题进行上对齐。
bottom 对标题进行下对齐。
补充对标题进行居中有意义:
center对标题进行居中齐。
标题靠右对齐代码: <form> <fieldset> <legend align="right">标题文本</legend> 文本编辑 </fieldset></form> 标题居中对齐代码: <form> <fieldset> <legend align="center">标题文本</legend> 文本编辑 </fieldset></form>
标题靠右对齐代码:
<form> <fieldset> <legend align="right">标题文本</legend> 文本编辑 </fieldset></form>
标题居中对齐代码:
<form> <fieldset> <legend align="center">标题文本</legend> 文本编辑 </fieldset></form>
标题靠右对齐:
标题居中对齐: 标题文本文本编辑
标题居中对齐:
设置说明
在<fieldset>标签内添加<style="WIDTH: 宽度px; HEIGHT: 高度px">,也可以自动拖动大小。
<form> <fieldset style="WIDTH:宽度px;HEIGHT:高度px"> <legend>标题文本</legend> 文本编辑 </fieldset></form>
推荐过这篇日志的人:
他们还推荐了:
网易公司版权所有 ©1997-2018
评论