放大镜站内搜索:


您现在的位置:首页 > 电脑 > 网页制作 > 正文
简单form标准化实例——整体布局
学生王国 ∥ http://www.xswg.com 更新时间:2007年2月8日 调整字体:

<dd><input type="password" value="" id="pw2"/></dd>
</dl>

<div id="submit">
<input type="submit" value="Submit" class="submit"/> <input type="reset" value="Reset" class="submit"/>
</div>

</form>

CSS部分:

* {
  margin:0;
  padding:0;
}

input,select {
   font-family:Arial, Helvetica, sans-serif;
   font-size: 12px;
}

.required {
  font:0.8em Verdana !important;
  color:#f68622;
}

.explain {
  color:#808080;
}

.b {
  font-weight:bold;
  font-size:12px;
}

.democss {
  font:11px/12px Arial, Helvetica, sans-serif;
  color:#333;
}

.democss dl {
  width:420px;
}

.democss dt {
  width: 110px;
  float: left;
  padding:4px;
  padding-top:8px;
  text-align:right;
}

.democss dd{
  margin:0 0 0 118px;
  padding:4px;
  text-align:left;
}

.democss input {
  width:180px;
}

.democss select#content {
  width:185px;
}

.democss input.submit {
  width:70px;
}

div#submit {
  width:298px;
  text-align:left;
  padding:4px;
  padding-left:122px;
}

* html .democss input,* html .democss select{
  margin-left: -3px; 
}

* html div#submit input{
  margin-left: 0px;
}

具体演示:

运行代码框

对于dl,dt,dd的布局好像有个小BUG,有兴趣的朋友可以实验一下。给dd添加他的宽度属性,我们可以根据相关数据算出dd的宽度为294px,添加上这个宽度属性按理论上是没有问题的,在FF下实验也没有问题,但在IE6下,就惨不忍睹了!

6共  上一页 1 2 3 4 5 6


相关链接
简单form标准化实例——语义结构 (2007年2月8日)
来自:蓝色理想
编辑:
浏览:
评论查看全部评论
您的评论
姓名:
请您注意:
1.请遵守《中国互联网行业自律条款》及中华人民共和国其他各项有关法律法规。
2.严禁发表危害国家安全、损害国家利益、破坏民族团结、破坏国家宗教政策、破坏社会稳定、侮辱、诽谤、教唆、淫秽等内容的评论 。
3.用户需对自己在使用本站服务过程中的行为承担法律责任(直接或间接导致的)。
4.本站管理员有权保留或删除评论内容。
评论内容只代表网友个人观点,与本网站立场无关。