记自己的Form布局一种

caiceclb · 发表于 2013-2-7 23:38:35

<!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><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"><input type="submit" class="submit btn-red-small" value="确认并提交" /></p></fieldset> </body></html>

		自动登录	找回密码
密码			立即注册

记自己的Form布局一种

浏览过的版块