HTML5 使用CSS 格式化fieldset容器的Legend

zlpx

浏览: 157425 次
性别:
来自: 北京

最近访客更多访客>>

dragonsky_w

whatl

zhangbody

xy14qg

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

下面的例子展示了，你如使用CSS来改变HTML5的Fieldset标签的legend。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        label {
            color: #F00;
        }
 
        legend {
            color: #F00;
            font-family: "Comic Sans MS";
            font-weight: bold;
            text-shadow: #999 2px 2px 1px;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
 
    <fieldset>
        <legend>Comments form</legend>
        <table>
            <tr>
                <th><label for="usrnm">Username:</label></th>
                <td><input id="usrnm" type="email" name="username" placeholder="user@domain.com" /></td>
            </tr>
            <tr>
                <th><label for="psswd">Password:</label></th>
                <td><input id="psswd" type="password" name="password" placeholder="Top secret password" /></td>
            </tr>
            <tr>
                <th><label for="cmmnts">Comments:</label></th>
                <td><textarea id="cmmnts" cols="30" rows="5" placeholder="Comments"></textarea></td>
            </tr>
            <tr>
                <th><label for="sub">Subscribe:</label></th>
                <td><input id="sub" type="checkbox" value="1" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input id="submitBtn" type="submit" value="Submit" /></td>
            </tr>
        </table>
    </fieldset>
 
</body>
</html>

源码下载：

formatting_legend.zip

分享到：

HTML5 使用fieldset 标签disable属性 | 使用CSS3样式Child选择器

2011-10-25 13:25
浏览 1906
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 使用CSS 格式化fieldset容器的Legend

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 使用CSS 格式化fieldset容器的Legend

评论

发表评论

相关推荐

在JS中利用arrays 排序

在HTML列表上动态改变列表位置风格

在HTML列表上改变列表位置风格

在HTML对象上应用多个class Name

使用CSS3生成一个inset盒子阴影

使用AJAX和XMLHttpRequest动态加载内容

使用CSS3生成简单的box影子

将javascript对象转换为JSON字符串

在HTML的text input控件获取焦点时设置背景颜色

在HTML5中定制数据属性

在HTML5中自动设置Form的焦点

使用CSS3建立不可选的的文字

在HTML5中使用Form新的input types

在容器内使用CSS设置背景颜色

用CSS3在一个容器中使用特定的圆角

用CSS3生成多列文本流

用HTML5的本地存储功能

用HTML5产生操作系统通知

利用CSS3创建用户可以改变大小的DIV容器

HTML5中交替变换表格的行颜色

最近访客更多访客>>