使用dl,dt,dd布局的商业表单效果
<br/><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br/><html xmlns="http://www.w3.org/1999/xhtml"><br/><head><br/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br/><title>使用dl,dt,dd布局的演示</title><br/><style type="text/css" media="all"><br/>* {<br/> margin:0;<br/> padding:0;<br/>}<br/>input,select {<br/> font-family:Arial, Helvetica, sans-serif; <br/> font-size: 12px;<br/>}<br/>.required {<br/> font:0.8em Verdana !important;<br/> color:#f68622;<br/>}<br/>.explain {<br/> color:#808080;<br/>}<br/>.b {<br/> font-weight:bold;<br/> font-size:12px;<br/>}<br/>.democss {<br/> font:11px/12px Arial, Helvetica, sans-serif;<br/> color:#333;<br/>}<br/>.democss dl {<br/> width:420px;<br/>}<br/>.democss dt {<br/> width: 110px;<br/> float: left;<br/> padding:4px;<br/> padding-top:8px; <br/> text-align:right;<br/>}<br/>.democss dd{<br/> margin:0 0 0 118px;<br/> padding:4px;<br/> text-align:left;<br/>}<br/>.democss input {<br/> width:180px;<br/>}<br/>.democss select#content {<br/> width:185px;<br/>}<br/>.democss input.submit {<br/> width:70px;<br/>}<br/>div#submit {<br/> width:298px;<br/> text-align:left;<br/> padding:4px;<br/> padding-left:122px;<br/>}<br/>* html .democss input,* html .democss select{<br/> margin-left: -3px; <br/>}<br/>* html div#submit input{<br/> margin-left: 0px;<br/>}<br/></style><br/></head><br/><body><br/><form id="demoform" class="democss" action=""><br/> <dl><br/> <dt><span class="required">*</span><br/> <label for="fname" accesskey="F">First name:</label><br/> </dt><br/> <dd><br/> <input type="text" id="fname" value="" /><br/> </dd><br/> <dt><span class="required">*</span><br/> <label for="lname" accesskey="L">Last name:</label><br/> </dt><br/> <dd><br/> <input type="text" id="lname" value="" /><br/> </dd><br/> <dt><span class="required">*</span><br/> <label for="content" accesskey="C">Preferred content:</label><br/> </dt><br/> <dd><br/> <select name="content" id="content"><br/> <option value="us" selected="selected">Yahoo! U.S.</option><br/> <option value="e1">Yahoo! U.S. in Spanish</option><br/> <option value="b5">Yahoo! U.S. in Chinese</option><br/> <option value="cn">Yahoo! China</option><br/> <option value="uk">Yahoo! United Kingdom</option><br/> <option value="ar">Yahoo! Argentina</option><br/> <option value="aa">Yahoo! Asia</option><br/> <option value="au">Yahoo! Australia</option><br/> <option value="br">Yahoo! Brazil</option><br/> <option value="ca">Yahoo! Canada in English</option><br/> <option value="cf">Yahoo! Canada in French</option><br/> <option value="fr">Yahoo! France</option><br/> <option value="de">Yahoo! Germany</option><br/> <option value="hk">Yahoo! Hong Kong</option><br/> <option value="in">Yahoo! India</option><br/> <option value="it">Yahoo! Italy</option><br/> <option value="kr">Yahoo! Korea</option><br/> <option value="mx">Yahoo! Mexico</option><br/> <option value="sg">Yahoo! Singapore</option><br/> <option value="es">Yahoo! Spain</option><br/> <option value="tw">Yahoo! Taiwan</option><br/> </select><br/> </dd><br/> <dt><span class="required">*</span><br/> <label for="sex" accesskey="G">Gender:</label><br/> </dt><br/> <dd><br/> <select name="sex" id="sex"><br/> <option value="">[Select] </option><br/> <option value="m">Male</option><br/> <option value="f">Female</option><br/> </select><br/> </dd><br/> <dt><span class="required">*</span><br/> <label for="yid" accesskey="Y">Yahoo! ID:</label><br/> </dt><br/> <dd><br/> <textarea cols="" rows="10"></textarea><br/> <span class="b">@yahoo.com</span><br /><br/> <span class="explain">ID may consist of a-z, 0-9, underscores, and a single dot (.)</span></dd><br/> <dt><span class="required">*</span><br/> <label for="pw" accesskey="P">Password:</label><br/> </dt><br/> <dd><br/> <input type="password" value="" id="pw" /><br/> <br /><br/> <span class="explain">Six characters or more; capitalization matters!</span> </dd><br/> <dt><span class="required">*</span><br/> <label for="pw2" accesskey="R">Re-type password:</label><br/> </dt><br/> <dd><br/> <input type="password" value="" id="pw2"/><br/> </dd><br/> </dl><br/> <div id="submit"><br/> <input type="submit" value="Submit" class="submit"/><br/> <input type="reset" value="Reset" class="submit"/><br/> </div><br/></form><br/></body><br/></html><br/>
0 条留言
我要留言