首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-08-27 
HTML5 使用CSS 格式化fieldset容器的Legend下面的例子展示了,你如使用CSS来改变HTML5的Fieldset标签的lege

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

下面的例子展示了,你如使用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

?

?

热点排行