|
#2
zys44162008-07-24 20:47
经过我好几个小时的试验、研究，终于出了成果……期间不断截图、放大400%、计算象素、出过好多套方案……终于做出了比较满意的效果，写成文如下：
单选、复选 单选框是个边长为12px的方框，复选框是个直径为12px的圆钮。我用表格将按钮和文本分隔两列。 单元格高（height）设为24px，偶数的素高便于文本在字体大小（font-size）和行高(line-height）为12px时垂直方向对称居中（上下各空6px）。虽然按钮不能对称居中，不过这也没办法，谁让windows指定了这么个象素高呢。按钮所在的单元格宽（width）可以设为奇数宽，我一般设为23px。 如果CSS控制里使用了*{margin:0px; padding:0px;}的话，Firefox浏览器中按钮有可能不居中，这时要在按钮所在单元格使用控制{text-align: center; vertical-align: middle;}。 如果需要，可在文本的<label>标签外嵌入<span>，然后用类控制器设置左边距（margin-left），值可根据实际情况设定，这里我设为5px。 文本框 文本框的宽和高可以通过CSS自定义。在单元格高（height）为24px、文本的字体大小（font-size）和行高(line-height）为12px时，我对文本框使用ID控制器{height: 15px; padding: 3px 0 0 2px;}，这样在IE7和Firefox中文本框对于单元格垂直方向对称居中（上下各空1px）、文本框内的文本也垂直方向对称居中（上下各空4px）。 示例代码： <html> <head> <title>表单</title> <style type="text/css"> <!-- * { font-family: "宋体"; font-size: 12px; line-height: 12px; margin: 0; padding: 0; } td { height: 24px; text-align: center; vertical-align: middle; } #user_name { height: 15px; width: 108px; padding: 3px 0 0 2px; } .td { text-align: left; } span { margin-left: 5px; } --> </style> </head> <body> <form id="form1" name="form1" method="post" action=""> <table border="0" cellpadding="0" cellspacing="2"> <tr> <td width="23" bgcolor="#FFCCCC"><input type="checkbox" name="checkbox1" id="checkbox1" /></td><td width="136" bgcolor="#CCFFCC" class="td" > <span><label for="checkbox1">在此电脑上记住用户名</label></span></td> </tr> <tr> <td bgcolor="#99CCFF"><input type="checkbox" name="checkbox2" id="checkbox2" /></td><td bgcolor="#FFFFCC" class="td"> <span><label for="checkbox2">SSL安全登录</label></span></td> </tr> <tr> <td bgcolor="#FFCCCC"><input type="radio" name="RadioGroup" id="RadioGroup_0" /></td><td bgcolor="#CCFFCC" class="td"> <span><label for="RadioGroup_0">所有网页</label></span></td> </tr> <tr> <td bgcolor="#99CCFF"><input type="radio" name="RadioGroup" id="RadioGroup_1" /></td><td bgcolor="#FFFFCC" class="td"> <span><label for="RadioGroup_1">中文网页</label></span></td> </tr> <tr bgcolor="#FFE9BB"> <td colspan="2"><label for="user_name">用户名</label> <input type="text" name="user_name" id="user_name" maxlength="18" /></td> </table> </form> </body> </html> |
图1：
只有本站会员才能查看附件，请 登录
图2：
只有本站会员才能查看附件，请 登录
[[it] 本帖最后由 zys4416 于 2008-7-23 10:07 编辑 [/it]]