记自己的Form布局一种

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="tofishes@163.com" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
body { font-size:14px; }
ul { list-style:none; }


fieldset .text, fieldset .radio, fieldset .checkbox, fieldset label, fieldset dfn, fieldset img, fieldset .submit, fieldset a, fieldset textarea, fieldset select { padding:0 2px;  vertical-align: middle;  }
fieldset .text { width: 13em; height: 18px; line-height: 18px; font-size: 14px; }
fieldset .title { width: 40em; }
fieldset .short { margin-right: 5px; width: 40px; }
fieldset .medium {width: 80px; }
fieldset label { display: inline-block; margin:0 10px 0 0;width: 80px; font-weight: 700; color: #666; text-align: right;}
fieldset p, fieldset .action { margin: 0 0 15px; }
	fieldset.long label { width: 100px; }
fieldset .desc { padding-left: 20px; color: #666; line-height: 150%;  }
fieldset p.desc, fieldset .action { padding:0 0 0 100px; }
	fieldset.long .action, fieldset.long p.desc { padding: 0 0 0 120px; }
fieldset p.desc {margin-top: -10px;}
fieldset dfn { margin:0 0 0 10px; font-style: normal; color: red; }
fieldset .radio, fieldset .checkbox { margin: -2px 5px 0 0; }
fieldset .submit { border: none; }
fieldset select{ margin:0 10px 0 0; padding:0; font-size: 14px; color: #666;}
fieldset a, fieldset a:visited, #result a, #result a:visited { color: #39c; }
fieldset a:hover { color: #f60; }
fieldset textarea { padding:2px; width: 400px; height: 120px; vertical-align: top; font-size: 14px; }
fieldset .file { height: 22px; line-height: 22px; vertical-align: middle; }
fieldset .preview { padding:2px; border: 1px solid #aaa; }
fieldset .category, fieldset .select { margin:0 0 15px; zoom:1;overflow:hidden; }/* select用于右侧还有多个输入框选择,比如多个联系方式 */
/* 特殊行使用div布局,label左浮动,右边可以是个div wrapper,保证整个框架不乱,然后这个div wrapper里面想怎样布局都行了 */
	fieldset .category label { float: left; }
	fieldset .category ul { float:left; display: inline; margin:0 5px; width: 190px; height: 180px; border: 1px solid #ccc; verticla-align:top; overflow: auto; }
		fieldset .select ul li { margin: 5px 0; }
		fieldset .category ul li { margin:1px; padding:0 5px; cursor: default;}
		fieldset .category ul li.title { background: #fcc; width: auto; }
		fieldset .category ul li:hover, fieldset .category ul li.curr { background: #dcf url(img/icon.png) no-repeat right -294px; }
fieldset iframe.editor { vertical-align: top; width: 560px; height: 230px; border: 1px solid #ccc; }/*如果有iframe的可视化编辑器*/
  </style>
 </head>

 <body>
  		<form enctype="multipart/form-data" method="post" action="" >
						<fieldset>
							<p><label>标题:</label>
								<input type="text" class="text title" name="title" /><dfn>*</dfn>
							</p><p class="desc">简洁形象的标题,方便用户搜索及浏览</p>
							<p><label>TAG标签:</label>
								<input type="text" class="text title" name="" />
							</p><p class="desc">多写几个与内容有关的标签,会让更多的人找到你的资源哦!(用逗号分开)</p>
							<p><label>作者:</label>
								<input type="text" class="text" name="" /><dfn>*可以作为错误警示信息的地方</dfn>
							</p>
							<p><label>分类:</label>
								<select name="">
									<option value="">请选择分类...</option>
								</select><dfn>*</dfn>
							</p>							
							<p><label>是否原创:</label>
								<input type="radio" class="radio" name="" />原创(<a href="">请阅读原创声明</a>)
								<input checked="checked" type="radio" class="radio" name="" />转载(<a href="">请阅读转载声明</a>)
							</p>
							<p><label>下载所需:</label>
								<input type="text" class="text short" name="" value="0" />
								<select name="">
									<option value="">积分</option>
								</select>
							</p>
							<p><label>图片预览:</label><!-- 如果不需要就去掉这一段 -->
								<img id="preview" class="preview" src="http://pic.digu.com/file/11/50/24/12/default/SIGN11502412_128x128.jpg?t=1270015986409" />
							</p>
							<p><label>缩略图:</label>
								<input type="file" class="file" name="" size="35" /><dfn>*</dfn>
							</p><p class="desc">允许上传格式:jpg|gif|png|bmp|jpeg</p>
							<p><label>上传文件:</label>
								<input type="file" class="file" name="" size="35" /><dfn>*</dfn>
							</p><p class="desc">允许上传格式:jar|sis</p>
							<div class="category"><label>系统平台:</label>
								<ul><!-- 最多放3个ul,应该够用了-->
									<li class="title">请选择品牌</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
								</ul>
								<ul>
									<li class="title">请选择型号</li>
									<li>S40系列</li>
									<li>S90系列</li>
								</ul>
								<ul>
									<li class="title">请选择系统</li>
									<li>S40系列</li>
									<li>S90系列</li>
								</ul>
							</div>			
							<p><label>文件简介:</label>
								<textarea rows="6" cols="60" name=""></textarea>
							</p>
							<p class="action"><!-- 所有的隐藏域和隐藏iframe可以写这里 -->
								<input type="submit" class="submit btn-red-small" value="确认并提交" />
							</p>
						</fieldset>
 </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值